DevTulz Online

CSS Box Shadow Generator

Bakgrunn

Hva er CSS Box Shadow?

CSS-egenskapen box-shadow legger til skyggeeffekter rundt rammen til et element. Skygger kan forskyves, gjøres uskarpe, spres, farges og settes som inset (indre skygge). Flere kommaseparerte skygger kan stables for rike effekter. Denne generatoren lar deg bygge komplekse flerlags-skygger visuelt og kopiere den klar-til-lim CSS til utklippstavlen.

Slik bruker du Box Shadow Generatoren

  1. Juster glidebryterne for Offset X/Y, Blur og Spread for å plassere og forme skyggen.

  2. Klikk på fargeprøven for å velge en skyggefarge, og bruk Opacity-glidebryteren for gjennomsiktighet.

  3. Slå på 'Inset' for å lage et indre glød eller et trykket effekt.

  4. Klikk på '+ Legg til lag' for å stable flere skygger oppå hverandre.

  5. Kopier den genererte CSS og lim den inn i stilarket ditt.

Ofte Stilte Spørsmål

Hva er forskjellen mellom box-shadow og drop-shadow-filter? box-shadow legger til skygger rundt elementets rektangulære grenseboks og støtter inset-skygger. CSS-filteret: drop-shadow() brukes på elementets visuelle form (inkludert transparens), noe som gjør at det følger ikke-rektangulære omriss som PNG-filer med transparente bakgrunner.

Hvordan lager jeg en Material Design-kortets heveeffekt? Stabel to boksskygger: en myk omgivelsesskygge (stor uskarphet, lav opasitet, liten spredning) og en nøkkelskygge (mindre uskarphet, høyere opasitet, retningsforskyvning). For eksempel: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08).

Påvirker box-shadow sideoppsett? Nei. box-shadow påvirker ikke størrelsen eller posisjonen til elementet i dokumentflyten. I motsetning til outline tar det ikke opp oppsettsrom og vil ikke flytte andre elementer.

Kan jeg animere box-shadow? Ja. box-shadow er animeringsvennlig med CSS-overganger og animasjoner. For ytelse bør du helst animere box-shadow kun når det er nødvendig — nettlesere kan ikke GPU-akselerere box-shadow-endringer like effektivt som transform eller opacity.

Keywords: CSS box shadow generator, box-shadow CSS, CSS skygge verktøy, CSS drop shadow, indre skygge, flerlags skygge, CSS shadow online