Box shadow-generator

Træk i skyderne for at forme en box-shadow, stabel lag for at skabe dybde, og kopier den færdige CSS med det samme.

Skyggelag
Lag 1
CSS
Juster skyderne for at forme din skygge.

Hver skygge renderes i din browser. Intet af det, du indstiller her, uploades til BroBroGo.

FAQ

Hvad styrer forskydning, sløring og spredning egentlig?

Forskydning (offset) flytter skyggen til venstre/højre og op/ned, sløring (blur) gør kanterne blødere, og spredning (spread) gør skyggen større eller mindre før sløringen. En negativ spredning trækker skyggen indad, hvilket er nyttigt til en tæt, tætsiddende skygge.

Hvad gør indstillingen inset?

En normal skygge falder uden for elementet, ligesom lyset bag et hævet kort. Inset vender skyggen indad i stedet, så elementet ser nedsænket ud — praktisk til dybe inputfelter eller trykkede knapper.

Hvorfor stable mere end ét skyggelag?

En enkelt skygge ser flad ud, når den når en vis størrelse. Realistisk dybde kombinerer normalt en tæt, mørk skygge med en blød, bredere skygge — tilføj et ekstra lag og juster dem uafhængigt af hinanden for at opnå den effekt.

CSS Cubic Bezier-generatorTræk i de to håndtag for at forme en easing-kurve, se en prik bevæge sig langs den i forhold til en jævn bevægelse, og kopier cubic-bezier()-værdien.Gradient-generatorByg en lineær, radial eller konisk gradient, tilføj farvestop og indstil retningen, og kopier derefter CSS-koden med ét klik.Border radius-generatorAfrund hvert hjørne med skydere, form organiske klatter med elliptisk tilstand, og kopier din CSS med det samme.Flexbox-generatorOpsæt en flex-container og dens elementer med visuelle kontroller, se layoutet reagere live, og kopier CSS-koden med ét klik.CSS Grid-generatorIndstil dine søjler og rækker, træk hen over cellerne for at placere elementer, og kopier grid-CSS med tilhørende HTML med ét klik.CSS clamp() BeregnerIndtast en størrelse til små og store skærme, og få en flydende clamp()-værdi, der skalerer jævnt derimellem — til skriftstørrelser, padding, marginer eller gaps.FarvekonverterKonverter farver mellem HEX, RGB, HSL, HSV, CMYK og LAB — rediger et felt, og resten opdateres løbende.CSS Formaterings- og minificeringsværktøjGenindryk rodet CSS for at gøre det læsbart, eller minificer det til udgivelse – med en sikker tilstand, der aldrig ændrer rækkefølgen af dine regler.KontrasttjekkerIndtast en tekst- og baggrundsfarve for at se WCAG-kontrastforholdet og hvilke AA- og AAA-niveauer der bestås.