CSS Box Shadow Generator
Bygg CSS box-shadow-kode visuelt: glidebrytere for forskyvning, uskarphet, spredning, farge med gjennomsiktighet, innfelt modus og opptil fire lag med forhåndsvisning i sanntid.
🔒 Behandles i sin helhet i nettleseren din – ingenting du skriver inn her blir noen gang lastet opp.
Resultat
En box-shadow-deklarasjon har seks bevegelige deler – X- og Y-forskyvning, uskarphet, spredning, farge og det valgfrie nøkkelordet inset – og den eneste måten å få dem riktig på er å se dem. Denne generatoren plasserer hver del på en glidebryter og gjengir resultatet på et forhåndsvisningskort mens du drar, slik at CSS-linjen nederst alltid er nøyaktig det du ser på.
Virkelige skygger er sjelden ett enkelt lag. Laglisten lar deg stable opptil fire skygger i én deklarasjon: en tett, mørk linje for kantdefinisjon pluss en bred, myk glød for høydeeffekt, eller det lyse-og-mørke-paret som definerer neumorfisme. Velg et lag for å redigere det, fjern de du ikke trenger, og den kombinerte box-shadow-verdien oppdateres i sanntid.
Skygger leses svært forskjellig på mørke grensesnitt, der en svart skygge på en nesten-svart side rett og slett forsvinner. Vekslingen av forhåndsvisningsbakgrunn bytter bakteppet mellom lyst og mørkt, slik at du kan sjekke begge temaer før du sender avgårde. Forhåndsinnstilte sider dekker variantene folk faktisk søker etter: en myk høydeeffektskygge, en innfelt fordypning, den neumorfiske to-lagsoppskriften og en subtil kortskygge.
Som alle verktøy på dette nettstedet er generatoren gratis og kjører utelukkende i nettleseren din: ingen opplasting, ingen konto, og den fortsetter å fungere uten nettilgang så snart siden er lastet.