CSS Box Shadow Generator

Hva er CSS box-shadow?

CSS-egenskapen box-shadow legger til skyggeeffekter rundt et elements ramme. Skygger er et grunnleggende verktøy for å skape dybde, opphøyning og visuelt hierarki i webdesign. En velutformet skygge kan få et kort til å se ut som det svever over siden eller gi en knapp et trykt utseende.

Box-shadow aksepterer flere parametere: horisontal forskyvning, vertikal forskyvning, uskarphetradius, spredningsradius og farge. Du kan også legge til inset-nøkkelordet for å lage indre skygger. Flere skygger kan legges lagvis på et enkelt element ved å skille dem med komma, og de gjengis bakfra til front.

Box-shadow-syntaks forklart

Den fulle syntaksen er: box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] farge. Verdiene offset-x og offset-y er påkrevd og definerer skyggens posisjon i forhold til elementet. Positive verdier flytter skyggen til høyre og ned. Blur-radius myker kantene — en verdi på 0 gir en skarp skygge. Spread-radius utvider eller krymper skyggen — negative verdier gir en strammere skygge.

Slik bruker du dette verktøyet

Juster skyvekontrollene for horisontal forskyvning, vertikal forskyvning, uskarphet, spredning og farge. Forhåndsvisningen oppdateres i sanntid slik at du ser nøyaktig hvordan skyggen vil se ut. Slå på inset-alternativet for indre skygger. Legg til flere skyggelag for mer realistiske dybdeeffekter. Når du er fornøyd, kopierer du den genererte CSS-koden.

Tips for effektive skygger

• Bruk subtile skygger med lav opasitet for et rent, moderne, opphøyd utseende.
• Lag flere skygger for mer realistisk dybde — en skarp nær skygge pluss en myk diffus skygge etterligner belysning fra den virkelige verden.
• Større uskarphet med en liten forskyvning skaper en myk sveveeffekt ideell for kort og modaler.
• Negativ spredning skaper en strammere, mer fokusert skygge som er nyttig for subtile kanter.
• Hold skyggeretningen konsekvent over hele siden din — inkonsekvente lyskilder ser unaturlige ut.

Material Design-opphøyningssystem

Googles Material Design definerer opphøyningsnivåer fra 0dp til 24dp, hvert med spesifikke skyggeverdier. Høyere opphøyning betyr større uskarphet- og forskyvningsverdier. Dette systemet sikrer konsekvent visuelt hierarki på tvers av en applikasjon. Selv om du ikke følger Material Design, er prinsippet om å bruke konsistente opphøyningsnivåer verdifullt for ethvert designsystem.

Ytelsespåvirkning

Box-skygger er GPU-akselererte i moderne nettlesere og har minimal ytelsespåvirkning for typisk bruk. Svært store uskarphetradiuser (50px+) på mange elementer samtidig kan imidlertid forårsake bildetap under animasjoner. Hvis du trenger å animere skygger, bør du vurdere å bruke transform: scale() for å vokse et pseudoelement med en statisk skygge i stedet for å animere skyggeverdiene direkte.

Ofte stilte spørsmål

Hva er forskjellen mellom box-shadow og drop-shadow?

box-shadow gjelder elementets rektangulære boks, inkludert padding og kant. Funksjonen filter: drop-shadow() følger elementets faktiske form, inkludert gjennomsiktige områder i bilder. Bruk drop-shadow for ikke-rektangulære elementer som ikoner eller PNG-bilder med gjennomsiktighet.

Kan jeg bruke box-shadow til å lage kanter?

Ja. En box-shadow med null uskarphet og positiv spredning fungerer som en kant som ikke påvirker layouten. Denne teknikken er nyttig når du trenger en visuell kant uten å endre elementets dimensjoner, for eksempel under hover-tilstander.