Flate blokker, knapper uten dybde, kort som går i ett med bakgrunnen: dette er det typiske utseendet på et nettsted der designeren tok det lett på box-shadow. Likevel kan et par linjer med CSS forvandle kjedelig markup til et grensesnitt med karakter ved å legge til luft, fremheve en nøkkelblokk eller mykt skille en seksjon uten en eneste border.

Problemet er at de fleste utviklere stopper ved standard gråskygge 0px 2px 5px rgba(0,0,0,0.2) og glemmer at box-shadow kan gjøre mye mer: flerlags skygger, fargede glødeeffekter, neumorfisme, innvendige effekter og til og med pikselkunst-gjengivelse uten en eneste div.

Nedenfor finner du 13 teknikker som vil gjøre box-shadow fra et kjedelig verktøy til ditt hovedverktøy for å jobbe med dybde. Hvert utdrag er kopiert fra virkelige prosjekter og klart til bruk.

💡 Rask oversikt:

• Nedbryting av box-shadow-syntaksen så du husker den første gang
• 13 klare til bruk-utdrag: fra en knapt synlig kantlinje til flerlags farget glød
• Tre måter å inkludere CSS i HTML og når du bør bruke hver av dem
• Ofte stilte spørsmål: ytelse, filter drop-shadow, Chrome-inspektør og neumorfisme

Hva er box-shadow og hvordan fungerer det

Egenskapen box-shadow legger til én eller flere skygger på et element. I motsetning til border påvirker ikke en skygge dokumentflyten og øker ikke blokkens dimensjoner; den tegnes «utenfor», bortenfor elementets grenser.

Full syntaks:

1
box-shadow: offset-x offset-y blur-radius spread-radius color;

Nedbryting av hver parameter:

• offset-x, horisontal forskyvning. En positiv verdi forskyver skyggen til høyre, en negativ verdi forskyver den til venstre.
• offset-y, vertikal forskyvning. Positiv flytter skyggen ned, negativ flytter den opp. Dette er de eneste to obligatoriske parameterne.
• blur-radius, uskarphetsradius. Jo større verdi, desto mykere og bredere blir skyggen. Standard er 0, noe som betyr en skygge med skarpe kanter.
• spread-radius, spredningsradius. En positiv verdi utvider skyggen utover, en negativ verdi krymper den innover. Nyttig for å simulere kanter uten border.
• color, fargen i ethvert format: hex, rgb(), rgba(), hsl(). Gjennomsiktighet via rgba() eller hsla() gir de mest naturlige skyggene.

Trikset er at du kan sende inn flere verdier, atskilt med komma. Det er nettopp dette som åpner døren for teknikkene nedenfor: hver påfølgende skygge i listen legges lagvis oppå den forrige.

1. Knapt synlig skygge på tre sider

En minimalistisk skygge som tilfører dybde, men som ikke skriker etter oppmerksomhet. Perfekt for produktkort, artikkelforhåndsvisninger og alle blokker på lys bakgrunn.

1
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

En forskyvning bare nedover med 8px og en stor uskarphet på 24px skaper en svevende blokkeffekt. En opasitet på 0,2 gjør skyggen knapt synlig på hvitt, akkurat nok til at øyet føler seg komfortabelt.

2. Lett skygge på alle sider

Når en blokk trenger en skygge jevnt rundt hele omkretsen, for eksempel for et modalt vindu eller verktøytips.

1
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

Null horisontal forskyvning og en spread-radius på 0px fordeler skyggen symmetrisk. En stor blur-radius (29px) gjør overgangen jevn. Fargen rgba(100, 100, 111, ...) gir en kjølig gråtone; det ser bedre ut på hvitt enn ren svart.

3. Tynn skygge til høyre og bunn

Den klassiske «hevet»-effekten. Fungerer for knapper, kort med hover-tilstander og ethvert element som skal se taktilt ut.

1
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

Små forskyvningsverdier (rundt 2px) og en liten uskarphet skaper en skarp, nesten vektorlignende skygge. Passer godt sammen med transform: translateY(-2px) ved hover; skyggen «beveger seg» med blokken og forsterker løfteeffekten.

4. Kraftig skygge på alle sider

For tilfeller der et element må skille seg merkbart ut fra bakgrunnen: hero-seksjoner, kort med viktig innhold, bannere.

1
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

Høy opasitet (0,35) og en liten uskarphet (15px) gir en uttalt, lesbar skygge. Med null horisontal forskyvning ligger den jevnt; blokken ser ut som om den svever over siden.

5. Diffus flerlags skygge

Fem skyggelag som jobber sammen: ett dypt lag for separasjon fra bakgrunnen, resten for myk diffusjon på sidene.

1
box-shadow:
2
  rgba(0, 0, 0, 0.25) 0px 54px 55px,
3
  rgba(0, 0, 0, 0.12) 0px -12px 30px,
4
  rgba(0, 0, 0, 0.12) 0px 4px 6px,
5
  rgba(0, 0, 0, 0.17) 0px 12px 13px,
6
  rgba(0, 0, 0, 0.09) 0px -3px 5px;

Det første laget er hovedskyggen nedover (54px, opasitet 0,25). Det andre er en lett skygge oppover (negativ forskyvning -12px). Resten finpusser kantene. Sammen produserer de et komplekst, realistisk lys-og-skygge-mønster, som et fysisk objekt under diffust lys.

6. Tynn kant med en innvendig skygge

To skygger skaper illusjonen av en tynn kant (border) samtidig som de tilfører dybde. Ikke en eneste border i koden.

1
box-shadow:
2
  rgba(6, 24, 44, 0.4) 0px 0px 0px 2px,
3
  rgba(6, 24, 44, 0.65) 0px 4px 6px -1px,
4
  rgba(255, 255, 255, 0.08) 0px 1px 0px inset;

Nedbryting av de tre lagene:

• Først «kantlinjen»: null forskyvning og uskarphet, spread-radius på 2px etterligner border: 2px solid.
• Deretter hovedskyggen nedover for volum.
• Til slutt en hvit inset-skygge ovenfra, som gir et høylys (glasseffekt).

7. Skygge til venstre og bunn

En ikke-standard retning: skyggen faller til venstre og litt ned. Ser bra ut på elementer justert til høyre kant eller for å skape en asymmetrisk komposisjon.

1
box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;

En negativ horisontal forskyvning (-4px) sender skyggen til venstre. En negativ spread-radius (-6px) stikker skyggen innover, noe som gjør den mer kompakt enn selve blokken; den «stikker ikke ut» over kantene.

8. Tosidig skygge: lys fra øverst til venstre, skygge nederst til høyre

Simulerer en retningsbestemt lyskilde, som om en lampe skinner fra øvre venstre hjørne.

1
box-shadow:
2
  rgba(136, 165, 191, 0.48) 6px 2px 16px 0px,
3
  rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;

Det første laget er en blålig skygge (rgba(136, 165, 191, ...)) til høyre og nederst. Det andre er et hvitt «høydepunkt» til venstre og øverst (negative forskyvninger, høy opasitet). Sammen skaper de en realistisk tredimensjonal effekt; blokken ser ut som om den er belyst av en softbox.

9. Farget glødende kantlinje

En enkelt skygge med null forskyvning og uskarphet, men med en positiv spredningsradius, gir en pen farget glød rundt elementet.

1
box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;

En blå glød (rgba(3, 102, 214, ...)) med 3px radius. Perfekt for inndatafelt i fokus (:focus), aktive knapper og utheving av gjeldende menyelement. Bytt ut fargen med rgba(220, 38, 38, 0.3), så får du en utheving for valideringsfeil.

10. Dobbel indre skygge for en «trykket»-effekt

To inset-lag skaper en dyp konkav effekt. Egnet for teksturerte bakgrunner, trykkede knapper og dekorative paneler.

1
box-shadow:
2
  rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset,
3
  rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;

Nøkkelordet inset flytter skyggen inn i elementet. Det første laget er en bred skygge ovenfra. Det andre er mørkere og mer komprimert, også ovenfra. En negativ spredningsradius (-12px, -18px) hindrer skyggene i å fylle hele blokken; kantene forblir lyse mens midten er nedsenket.

11. Farget «kaskade» av skygger nedover

Fem lag av samme farge med økende forskyvning skaper en flerlags farget skyggeeffekt, som Material Design, men lysere.

1
box-shadow:
2
  rgba(240, 46, 170, 0.4) 0px 5px,
3
  rgba(240, 46, 170, 0.3) 0px 10px,
4
  rgba(240, 46, 170, 0.2) 0px 15px,
5
  rgba(240, 46, 170, 0.1) 0px 20px,
6
  rgba(240, 46, 170, 0.05) 0px 25px;

Hvert påfølgende lag er forskjøvet 5px lenger og har lavere opasitet. Ingen uskarphet er angitt, så skyggene er skarpe, som vektorstriper. Dette gir et sterkt neonspor bak blokken. Bytt ut rosa med din merkevarefarge for å få en gjenkjennelig aksent.

12. Farget «kaskade» til høyre og ned

Samme teknikk, men med horisontal forskyvning; skyggen går diagonalt.

1
box-shadow:
2
  rgba(240, 46, 170, 0.4) 5px 5px,
3
  rgba(240, 46, 170, 0.3) 10px 10px,
4
  rgba(240, 46, 170, 0.2) 15px 15px,
5
  rgba(240, 46, 170, 0.1) 20px 20px,
6
  rgba(240, 46, 170, 0.05) 25px 25px;

En diagonal kaskade skaper en følelse av bevegelse til høyre og ned. Ser flott ut på knapper ved hover; blokken ser ut til å «gli» bak skyggen sin.

13. Diffus skygge med tetthetsgradient

Fem lag der hver påfølgende forskyvning dobles (2px, 4px, 8px, 16px, 32px) mens opasiteten forblir konstant. Resultatet er en skygge med en jevn tetthetsgradient, den mest realistiske i samlingen.

1
box-shadow:
2
  rgba(0, 0, 0, 0.09) 0px 2px 1px,
3
  rgba(0, 0, 0, 0.09) 0px 4px 2px,
4
  rgba(0, 0, 0, 0.09) 0px 8px 4px,
5
  rgba(0, 0, 0, 0.09) 0px 16px 8px,
6
  rgba(0, 0, 0, 0.09) 0px 32px 16px;

En liten uskarphet for hvert lag (1px, 2px, 4px, 8px, 16px) vokser proporsjonalt med forskyvningen. Dette gir fysisk nøyaktig diffusjon; skyggen «tones ut» med avstanden, som i den virkelige verden. Perfekt for kort som skal se så naturlige ut som mulig.

Tre måter å inkludere CSS i HTML på

Når en snippet er valgt, må du legge den til på siden. CSS tilbyr tre alternativer, og hver har sin nisje.

Intern CSS

Regler plasseres i en <style>-tagg inne i <head> på HTML-dokumentet. Egnet for én-sides nettsteder og raske prototyper; alt er i én fil.

1
<html lang="ru">
2
<head>
3
  <meta charset="utf-8">
4
  <title>CSS box-shadow — примеры</title>
5
  <style>
6
    .card {
7
      display: block;
8
      margin: 0 auto;
9
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
10
    }
11
  </style>
12
</head>
13
<body>
14
  <img class="card" src="screenshot.jpg" alt="Пример карточки с тенью">
15
</body>
16
</html>

Ulempen er at stilene ikke mellomlagres separat av nettleseren og ikke kan gjenbrukes på andre sider.

Inline CSS

Stiler skrives direkte i style-attributtet til et HTML-element. Den raskeste måten å bruke stiler i farten, men også den mest tungvinte å vedlikeholde.

1
<img
2
  src="screenshot.jpg"
3
  alt="Пример карточки с тенью"
4
  style="box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; display: block; margin: 0 auto;"
5
>

Bruk inline-stiler selektivt: for dynamiske verdier fra JavaScript, for e-postoppsett (der eksterne stilark ofte strippes av e-postklienter), og for kritisk CSS «above the fold».

Ekstern CSS

Regler flyttes til en separat .css-fil og lenkes via <link>. Dette er standarden for ethvert prosjekt som er mer komplekst enn en enkelt side.

Fil styles.css:

1
.card {
2
  display: block;
3
  margin: 0 auto;
4
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
5
}

HTML-dokument:

1
<html lang="ru">
2
<head>
3
  <meta charset="utf-8">
4
  <title>CSS box-shadow — примеры</title>
5
  <link rel="stylesheet" href="styles.css">
6
</head>
7
<body>
8
  <img class="card" src="screenshot.jpg" alt="Пример карточки с тенью">
9
</body>
10
</html>

Ekstern CSS mellomlagres av nettleseren, er enkel å vedlikeholde og skalerbar. I alle tre tilfeller er gjengivelsesresultatet det samme; velg metode basert på prosjektets arkitektur.

En kort, men innholdsrik video (8 minutter): forfatteren viser hvordan du erstatter flate grå skygger med gradientglød, lag for lag, og forklarer hver parameter.

⁉️🤔 Ofte stilte spørsmål

Hva er forskjellen mellom box-shadow og filter: drop-shadow()?

box-shadow følger elementets avgrensningsboks, alltid et rektangel. filter: drop-shadow() følger alfakanalen og sporer den faktiske formen: for en PNG med gjennomsiktighet vil skyggen følge objektets kontur i stedet for den rektangulære rammen. Det er derfor drop-shadow() er uunnværlig for bilder med utklippet bakgrunn, ikoner og SVG. Men den fungerer tregere fordi nettleseren analyserer piksler, ikke blokkgeometri.

Hvor mange box-shadow-lag kan du sette uten å miste ytelse?

Det finnes ingen formell grense, men det praktiske taket på en gjennomsnittlig enhet er 10-15 lag. Utover det vil du begynne å merke fall i FPS under rulling og animasjoner, spesielt på mobile enheter. Årsaken er at hvert lag krever en separat gjengivelsespass. For animerte elementer bør du begrense deg til 2-3 lag og bruke will-change: box-shadow; dette hinter til nettleseren om å flytte elementet til et separat komposittlag.

Hvordan viser og feilsøker du box-shadow i Chrome DevTools?

Åpne DevTools (F12), velg elementet i Elements-fanen, og finn box-shadow-egenskapen i Styles-panelet til høyre. Klikk på fargefirkantikonet ved siden av verdien; en visuell skyggeredigerer åpnes med glidebrytere for offset-x, offset-y, blur og spread. Du kan endre verdier med musen og se resultatet umiddelbart. For flerlags skygger redigeres hvert lag separat; de er oppført i samme felt, atskilt med komma.

Hva er neumorfisme og hvordan oppnår du det med box-shadow?

Neumorfisme er en visuell stil der elementer ser ut som om de er «støpt» av samme materiale som bakgrunnen. Det oppnås med to skygger: en lys fra øverst til venstre og en mørk fra nederst til høyre (som i teknikk #8). Nøkkelbetingelsen er at sidebakgrunnen og elementfargen må være like eller svært nær hverandre. Eksempel for et lyst tema:

1
> .neuromorphic {
2
>   background: #e0e0e0;
3
>   box-shadow:
4
>     8px 8px 16px #bebebe,
5
>     -8px -8px 16px #ffffff;
6
> }
7
> 
8
 
9
 markdown 
10
 
11
The style is striking but controversial from an accessibility standpoint: low contrast makes elements hard to distinguish for people with visual impairments. Use sparingly and be sure to check contrast.
12
 
13
**Can you use box-shadow to render shapes without a div?**
14
 
15
> Yes, and this is a separate genre of CSS art. Since `box-shadow` supports an unlimited number of layers, each with its own coordinates and color, you can "draw" pixel art with a single `box-shadow` on a single `div`. The technique works like this: each layer with a 1px × N offset and zero blur is one "pixel." Hundreds of layers combine into an image. Generators like [CSS Box Shadow Generator](https://getcssscan.com/css-box-shadow-examples) automate the process, but for production this is more of a novelty; SVG will do the job more efficiently.
16
 
17
## Which shadow should you choose for your project?
18
 
19
The thirteen techniques above cover the full spectrum: from an unobtrusive shadow for modest cards to a bold neon cascade. The key skill here is not memorizing all the snippets but understanding the logic of the parameters; then you can assemble the right shadow for the task faster than you can find a ready-made one.
20
 
21
A quick guide:
22
 
23
- Need depth without visual noise? Use techniques **1-3** (barely visible single shadows).
24
- Want realistic "hovering" above the page? **5** (multi-layered diffused) or **13** (density gradient).
25
- Want to highlight an interactive element with color? **9** (colored border) or **11-12** (colored cascade).
26
- Simulating pressed or glass effect? **6** and **10** (inset shadows).
27
- Need neumorphism? **8** (two-sided shadow) plus a background matching the element.
28
 
29
Bookmark this page as a cheat sheet. And if you create your own signature shadow recipe, test it on real devices: the same shadow can look completely different on a Retina display and on a budget office monitor.