Du har laget et kortdesign med hvit bakgrunn, men det ser flatt og livløst ut. Kortet flyter inn i bakgrunnen, og det er ingenting som gir dybde eller visuell tyngde. Det du trenger er en skygge som løfter elementet fra siden. Med box-shadow i CSS kan du legge til skygger på alle bokselementer, fra subtile dybdeeffekter til markante rammer. Egenskapen gir deg full kontroll over skyggenes retning, mykhet, størrelse og farge.
Syntaksen bak box-shadow i CSS
En box-shadow-deklarasjon består av opptil seks verdier i en bestemt rekkefølge. De to første verdiene er obligatoriske og styrer plasseringen. Offset-x forskyver skyggen horisontalt, og offset-y forskyver den vertikalt. Positive verdier flytter skyggen til høyre og nedover, mens negative verdier flytter den til venstre og oppover. Den tredje verdien er fargen, som avslutter den enkleste formen for box-shadow.
Med bare tre verdier får du en skarp skygge uten gradering. Det kan fungere som en designeffekt, men ser sjelden ut som en naturlig skygge. For å gjøre den mykere legger du til en fjerde verdi.
Blur og spread gir skyggen dybde
Den fjerde verdien i box-shadow er blur-radius. Den bestemmer hvor mye skyggen graderes ut fra kanten. En blur på 0 gir en skarp kant, mens en høyere verdi gir en mykere overgang. Det er blur som gjør at skyggen begynner å se naturlig ut, som om elementet faktisk svever over bakgrunnen.
Den femte verdien er spread-radius. Spread utvider eller krymper skyggen i alle retninger. En positiv spread gjør skyggen større enn selve elementet, slik at den synes på alle sider selv om offset-verdiene skyver den i en retning. En negativ spread krymper skyggen slik at den blir smalere enn boksen.
Inset-skygger på innsiden av boksen
Alle skyggene så langt ligger utenfor elementet. Legger du til nøkkelordet inset helt først i deklarasjonen, flyttes skyggen til innsiden av boksen. Det gir en fordypningseffekt, som om elementet er presset inn i bakgrunnen. Inset-skygger brukes ofte til inputfelt eller for å gi en følelse av at noe er trykket inn.
Husk at innhold inne i boksen kan dekke over en inset-skygge. Har du et bilde som fyller hele elementet, vil skyggen forsvinne bak bildet. I slike tilfeller kan du bruke negative offset-verdier for å flytte skyggen slik at den blir synlig langs kantene.
Kombiner flere skygger i samme deklarasjon
Du er ikke begrenset til en enkel skygge. Box-shadow godtar flere skygger separert med komma. Du kan for eksempel kombinere en mørk skygge på utsiden med en lys inset-skygge på innsiden. Hver skygge kan ha egne verdier for offset, blur, spread og farge. Det gir deg stor fleksibilitet til å bygge realistiske lyse- og dybdeeffekter uten ekstra HTML-elementer.
Bruk RGBA for myke, naturlige skygger
En svart skygge ser ofte for hard og kunstig ut. Trikset er å bruke RGBA-farger med lav alfa-verdi, for eksempel rgba(0, 0, 0, 0.1). Det gir en skygge med 90 prosent gjennomsiktighet, som bare antyder dybde uten å dominere designet. De fleste kortdesign og UI-komponenter bruker nettopp slike myke skygger. Juster alfa-verdien mellom 0.03 og 0.3 for å finne den rette balansen mellom subtil og tydelig.
Vil du forstå hvordan farger i CSS fungerer med rgba og andre fargeformater, gir det deg mer kontroll over skyggenes utseende.
Skygger i samspill med boksmodellen
Box-shadow tegnes utenfor elementets ramme, men den påvirker ikke layout. Skyggen tar ikke opp plass og flytter ikke naboelementer. Det betyr at en stor skygge kan overlappe innhold ved siden av uten at nettleseren justerer plasseringen. Kombinerer du box-shadow med border og padding, kan du bygge elegante kortdesign der hvert lag gir visuell informasjon.
Skyggen følger elementets border-radius. Har du avrundede hjørner, får skyggen samme avrunding automatisk. Du kan lese mer om alle verdiene og kantverdier i MDN sin dokumentasjon om box-shadow.
Lær mer om box-shadow med video
Denne artikkelen bygger på en videoleksjon fra CSS-kurset på Utdannet.no. I kurset lærer du:
- Hvordan du bygger opp box-shadow steg for steg med tre, fire, fem og seks verdier
- Hvordan du kombinerer flere skygger og bruker inset for innvendig skygging
- Hvordan du bruker RGBA-farger for å lage profesjonelle, myke skyggeeffekter
