Platta block, knappar utan djup, kort som smälter in i bakgrunden: så ser en sajt ut där designern varit försiktig med box-shadow. Ändå kan ett par rader CSS förvandla trist markup till ett gränssnitt med karaktär genom att lägga till luft, lyfta fram ett viktigt block eller mjukt avgränsa en sektion utan en enda border.

Problemet är att de flesta utvecklare stannar vid den förvalda grå skuggan 0px 2px 5px rgba(0,0,0,0.2) och glömmer att box-shadow kan mycket mer: skuggor i flera lager, färgade glow-effekter, neumorphism, inset-effekter och till och med pixel art-rendering utan en enda div.

Här är 13 tekniker som gör box-shadow från ett tråkigt verktyg till ditt främsta redskap för att arbeta med djup. Varje kodsnutt är kopierad från riktiga projekt och redo att användas.

💡 Snabb överblick:

• Så bryter du ner syntaxen för box-shadow så att du kommer ihåg den direkt
• 13 färdiga kodsnuttar: från en knappt synlig kantlinje till flerlagers färgad glow
• Tre sätt att inkludera CSS i HTML och när du ska använda respektive
• Vanliga frågor: prestanda, filter drop-shadow, Chrome inspector och neumorphism

Vad är box-shadow och hur fungerar det

Egenskapen box-shadow lägger till en eller flera skuggor på ett element. Till skillnad från border påverkar en skugga inte dokumentflödet och ökar inte blockets dimensioner; den ritas "utanför", bortom elementets gränser.

Fullständig syntax:

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

Genomgång av varje parameter:

• offset-x, horisontell förskjutning. Ett positivt värde flyttar skuggan åt höger, ett negativt värde flyttar den åt vänster.
• offset-y, vertikal förskjutning. Positivt flyttar skuggan nedåt, negativt uppåt. Detta är de enda två obligatoriska parametrarna.
• blur-radius, oskärpans radie. Ju större värde, desto mjukare och bredare blir skuggan. Standardvärdet är 0, vilket ger en skugga med skarpa kanter.
• spread-radius, spridningsradien. Ett positivt värde expanderar skuggan utåt, ett negativt värde krymper den inåt. Användbart för att simulera kantlinjer utan border.
• color, färgen i valfritt format: hex, rgb(), rgba(), hsl(). Transparens via rgba() eller hsla() ger de mest naturliga skuggorna.

Knepet är att du kan ange flera värden, separerade med kommatecken. Det är just detta som öppnar dörren till teknikerna nedan: varje efterföljande skugga i listan läggs ovanpå den föregående.

1. Knappt synlig skugga på tre sidor

En minimalistisk skugga som tillför djup men inte skriker efter uppmärksamhet. Perfekt för produktkort, artikel-förhandsvisningar och alla block på ljus bakgrund.

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

En förskjutning endast nedåt med 8px och en stor oskärpa på 24px skapar en svävande blockeffekt. En opacitet på 0.2 gör skuggan knappt synlig mot vitt, precis tillräckligt för att ögat ska känna sig bekvämt.

2. Lätt skugga på alla sidor

När ett block behöver en skugga jämnt runt hela sin omkrets, till exempel för ett modalfönster eller en tooltip.

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

Noll horisontell förskjutning och en spread-radius på 0px fördelar skuggan symmetriskt. En stor blur-radius (29px) gör övergången mjuk. Färgen rgba(100, 100, 111, ...) ger en sval grå ton; den ser bättre ut på vitt än rent svart.

3. Tunn skugga till höger och nedåt

Den klassiska "upphöjda" effekten. Fungerar för knappar, kort med hover-tillstånd och alla element som ska kännas taktila.

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

Små förskjutningsvärden (cirka 2px) och en liten oskärpa skapar en skarp, nästan vektorliknande skugga. Passar bra ihop med transform: translateY(-2px) vid hover; skuggan "rör sig" med blocket och förstärker lyfteffekten.

4. Fyllig skugga på alla sidor

För fall när ett element behöver sticka ut märkbart från bakgrunden: hero-sektioner, kort med viktigt innehåll, banners.

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

Hög opacitet (0.35) och en liten oskärpa (15px) ger en uttalad, läsbar skugga. Med noll horisontell förskjutning ligger den jämnt; blocket ser ut som om det svävar ovanför sidan.

5. Diffuserad flerlagersskugga

Fem skugglager som samverkar: ett djupt lager för separation från bakgrunden, resten för mjuk diffusion på sidorna.

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örsta lagret är huvudskuggan nedåt (54px, opacitet 0.25). Det andra är en lätt skugga uppåt (negativ förskjutning -12px). Resten finslipar kanterna. Tillsammans skapar de ett komplext, realistiskt ljus-och-skuggmönster, som ett fysiskt objekt under diffust ljus.

6. Tunn kantlinje med en inre skugga

Två skuggor skapar illusionen av en tunn kantlinje (border) samtidigt som de tillför djup. Inte en enda 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;

Genomgång av de tre lagren:

• Först "kantlinjen": noll förskjutning och oskärpa, spread-radius på 2px härmar border: 2px solid.
• Sedan huvudskuggan nedåt för volym.
• Sist en vit inset-skugga ovanifrån, som ger en ljusreflex (glaseffekt).

7. Skugga till vänster och nedåt

En icke-standardriktning: skuggan faller åt vänster och något nedåt. Ser bra ut på element som är justerade mot högerkanten eller för att skapa en asymmetrisk komposition.

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

En negativ horisontell förskjutning (-4px) skickar skuggan åt vänster. En negativ spread-radius (-6px) drar in skuggan, vilket gör den mer kompakt än själva blocket; den "sticker inte ut" bortom kanterna.

8. Tvåsidig skugga: ljus från övre vänster, skugga nedre höger

Simulerar en riktad ljuskälla, som om en lampa lyser från det övre vänstra hörnet.

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örsta lagret är en blåaktig skugga (rgba(136, 165, 191, ...)) till höger och nedtill. Det andra är en vit "highlight" till vänster och upptill (negativa offset, hög opacitet). Tillsammans skapar de en realistisk tredimensionell effekt; blocket ser ut som om det är belyst av en softbox.

9. Färgad glow-kant

En enkel skugga med noll offset och blur, men med en positiv spridningsradie, ger en snygg färgad glow runt elementet.

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

En blå glow (rgba(3, 102, 214, ...)) med en radie på 3px. Perfekt för fokuserade inputfält (:focus), aktiva knappar och för att markera det aktuella menyvalet. Byt ut färgen mot rgba(220, 38, 38, 0.3) så får du en markeringsfärg för valideringsfel.

10. Dubbel inre skugga för en "intryckt" effekt

Två inset-lager skapar en djup konkav effekt. Passar för texturerade bakgrunder, intryckta knappar och dekorativa 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;

Nyckelordet inset flyttar skuggan inuti elementet. Det första lagret är en bred skugga ovanifrån. Det andra är mörkare och mer komprimerat, också ovanifrån. En negativ spridningsradie (-12px, -18px) hindrar skuggorna från att fylla hela blocket; kanterna förblir ljusa medan mitten är försänkt.

11. Färgad "kaskad" av skuggor nedåt

Fem lager av samma färg med ökande offset skapar en flerskiktad färgad skuggeffekt, som Material Design men ljusare.

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;

Varje efterföljande lager är förskjutet 5px längre och har lägre opacitet. Ingen blur anges, så skuggorna är skarpa, som vektorränder. Detta ger ett ljust neonspår bakom blocket. Byt ut rosa mot din varumärkesfärg för att få en igenkännbar accent.

12. Färgad "kaskad" till höger och nedåt

Samma teknik men med horisontell offset; skuggan 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 kaskad skapar en känsla av rörelse åt höger och nedåt. Ser bra ut på knappar vid hover; blocket verkar "glida" bakom sin skugga.

13. Diffuserad skugga med densitetsgradient

Fem lager där varje efterföljande offset fördubblas (2px, 4px, 8px, 16px, 32px) medan opaciteten förblir konstant. Resultatet är en skugga med en mjuk densitetsgradient, den mest realistiska 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 blur för varje lager (1px, 2px, 4px, 8px, 16px) växer proportionellt mot offseten. Detta ger en fysikaliskt korrekt diffusion; skuggan "tonar bort" med avståndet, precis som i verkligheten. Perfekt för kort som behöver se så naturliga ut som möjligt.

Tre sätt att inkludera CSS i HTML

När du har valt ett kodsnutt måste du lägga till det på sidan. CSS erbjuder tre alternativ, och var och en har sin nisch.

Intern CSS

Reglerna placeras i en <style>-tagg inuti <head> i HTML-dokumentet. Passar för sajter med en enda sida och snabba prototyper; allt finns i en 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>

Nackdelen är att stilmallarna inte cachas separat av webbläsaren och inte kan återanvändas på andra sidor.

Inline-CSS

Stilar skrivs direkt i style-attributet på ett HTML-element. Det snabbaste sättet att applicera stilar i farten, men också det mest svårhanterliga att underhålla.

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
>

Använd inline-stilar selektivt: för dynamiska värden från JavaScript, för e-postlayouter (där externa stilmallar ofta rensas bort av e-postklienter) och för kritisk CSS "above the fold".

Extern CSS

Reglerna flyttas till en separat .css-fil och länkas via <link>. Detta är standarden för alla projekt som är mer komplexa än en enda sida.

Filen 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>

Extern CSS cachas av webbläsaren, är enkel att underhålla och skalbar. I alla tre fallen blir renderingsresultatet detsamma; välj metod baserat på ditt projekts arkitektur.

En kort men innehållsrik video (8 minuter): författaren visar hur man ersätter platta grå skuggor med gradientglöd, lager för lager, och förklarar varje parameter.

⁉️🤔 Vanliga frågor

Vad är skillnaden mellan box-shadow och filter: drop-shadow()?

box-shadow följer elementets begränsningsram, som alltid är en rektangel. filter: drop-shadow() följer alfakanalen och ritar av den faktiska formen: för en PNG med genomskinlighet kommer skuggan att följa objektets kontur snarare än den rektangulära ramen. Det är därför drop-shadow() är oumbärlig för bilder med utklippt bakgrund, ikoner och SVG. Men den arbetar långsammare eftersom webbläsaren analyserar pixlar, inte blockgeometri.

Hur många box-shadow-lager kan du sätta utan att förlora prestanda?

Det finns ingen formell gräns, men det praktiska taket på en genomsnittlig enhet är 10-15 lager. Därutöver kommer du att börja märka FPS-tapp vid skrollning och animationer, särskilt på mobila enheter. Anledningen är att varje lager kräver en separat renderingspassage. För animerade element, begränsa dig till 2-3 lager och använd will-change: box-shadow; detta tipsar webbläsaren om att flytta elementet till ett separat kompositlager.

Hur visar och felsöker du box-shadow i Chromes DevTools?

Öppna DevTools (F12), markera elementet i fliken Elements och hitta egenskapen box-shadow i panelen Styles till höger. Klicka på den färgade fyrkantsikonen bredvid värdet; en visuell skuggeditor öppnas med reglage för offset-x, offset-y, blur och spread. Du kan ändra värden med musen och se resultatet omedelbart. För flerlagersskuggor redigeras varje lager separat; de listas i samma fält, separerade med kommatecken.

Vad är neumorphism och hur uppnår du det med box-shadow?

Neumorphism är en visuell stil där element ser ut som om de är "gjutna" av samma material som bakgrunden. Det uppnås med två skuggor: en ljus från övre vänstra hörnet och en mörk från nedre högra hörnet (som i teknik #8). Nyckelvillkoret är att sidans bakgrund och elementets färg måste matcha eller vara mycket nära varandra. Exempel för ett ljust 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.