Box Shadow-generator

Dra i glidebryterne for å forme en box-shadow, stable lag for dybde, og kopier den ferdige CSS-koden umiddelbart.

Skyggelag
Lag 1
CSS
Juster glidebryterne for å forme skyggen din.

Hver skygge rendres i nettleseren din. Ingenting du angir her lastes opp til BroBroGo.

Ofte stilte spørsmål

Hva styrer egentlig offset, blur og spread?

Forskyvning (offset) flytter skyggen til venstre/høyre og opp/ned, uskarphet (blur) gjør kantene mykere, og spredning (spread) gjør skyggen større eller mindre før den blir uskarp. En negativ spredning trekker skyggen innover, noe som er nyttig for en tett og nær skygge.

Hva gjør inset-valget?

En vanlig skygge faller på utsiden av elementet, som lyset bak et opphøyd kort. Inset flipper den inn på innsiden i stedet, slik at elementet ser nedsenket ut — praktisk for dype inndatafelt eller nedtrykte knapper.

Hvorfor stable mer enn ett skyggelag?

En enkelt skygge ser flat ut over en viss størrelse. Realistisk dybde kombinerer vanligvis en tett, mørk skygge med en myk, bredere skygge — legg til et ekstra lag og juster dem uavhengig for å oppnå denne effekten.

CSS Cubic Bezier-generatorDra i de to håndtakene for å forme en overgangskurve, se en prikk følge den mot en jevn bevegelse, og kopier cubic-bezier()-verdien.Gradient-generatorBygg en lineær, radial eller konisk gradient, legg til fargepunkter og angi retning, og kopier deretter CSS-koden med ett klikk.Border Radius-generatorRund av hvert hjørne med glidebrytere, lag organiske former med elliptisk modus, og kopier CSS-koden umiddelbart.Flexbox-generatorSett opp en flex-container og tilhørende elementer med visuelle kontroller, se layouten reagere live, og kopier CSS-koden med ett klikk.CSS Grid-generatorDefiner kolonner og rader, dra over rutene for å plassere elementer, og kopier CSS-koden med tilhørende HTML med ett klikk.CSS clamp()-kalkulatorAngi en størrelse for små og store skjermer og få en flytende clamp()-verdi som skalerer trinnløst i mellom — for skriftstørrelser, padding, marginer eller gap.FargekonvertererKonverter farger mellom HEX, RGB, HSL, HSV, CMYK og LAB — rediger et felt og resten oppdateres fortløpende.CSS-formaterer og -minifisererRydd opp i uoversiktlig CSS for å gjøre den lesbar, eller minifiser den for raskere innlasting – med en sikker modus som aldri endrer rekkefølgen på reglene dine.KontrastsjekkerSkriv inn tekst- og bakgrunnsfarge for å se WCAG-kontrastforholdet og hvilke AA- og AAA-nivåer som blir bestått.