Skip to content

Alles für WordPress, Webentwicklung — und mehr

💡 13 CSS-Box-Shadow-Techniken: Schatten, die Ihre Benutzeroberfläche zum Leben erwecken
Webentwicklung
9 Min1,739 Wörter

💡 13 CSS-Box-Shadow-Techniken: Schatten, die Ihre Benutzeroberfläche zum Leben erwecken

Flache Blöcke, Buttons ohne Tiefe, Karten, die mit dem Hintergrund verschwimmen: So sieht eine Website typischerweise aus, wenn der Designer mit box-shadow sparsam umgegangen ist. Dabei genügen ein paar Zeilen CSS, um aus langweiligem Markup eine Oberfläche mit Charakter zu machen, indem Sie Weißraum hinzufügen, einen wichtigen Block hervorheben oder einen Bereich sanft abtrennen, ganz ohne border.

Das Problem: Die meisten Entwickler bleiben beim standardmäßigen grauen Schatten 0px 2px 5px rgba(0,0,0,0.2) stehen und vergessen, dass box-shadow viel mehr kann: mehrschichtige Schatten, farbige Glüheffekte, Neumorphismus, Inset-Effekte und sogar Pixel-Art-Rendering ohne ein einziges div.

Im Folgenden finden Sie 13 Techniken, die box-shadow von einem langweiligen Werkzeug zu Ihrem Hauptinstrument für die Arbeit mit Tiefe machen. Jedes Snippet stammt aus realen Projekten und ist direkt einsetzbar.

💡 Kurzüberblick:

  • Die box-shadow-Syntax verständlich aufgeschlüsselt, damit Sie sie sich sofort merken
  • 13 einsatzbereite Snippets: von einer kaum sichtbaren Kante bis zum mehrschichtigen farbigen Glühen
  • Drei Wege, CSS in HTML einzubinden, und wann Sie welchen nutzen
  • Häufig gestellte Fragen: Performance, Filter drop-shadow, Chrome Inspector und Neumorphismus

Was ist box-shadow und wie funktioniert es

Die Eigenschaft box-shadow fügt einem Element einen oder mehrere Schatten hinzu. Anders als border beeinflusst ein Schatten den Dokumentfluss nicht und vergrößert die Abmessungen des Blocks nicht; er wird „außerhalb", jenseits der Elementgrenzen, gezeichnet.

Vollständige Syntax:

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

Aufschlüsselung der einzelnen Parameter:

  • offset-x, horizontaler Versatz. Ein positiver Wert verschiebt den Schatten nach rechts, ein negativer nach links.
  • offset-y, vertikaler Versatz. Ein positiver Wert verschiebt den Schatten nach unten, ein negativer nach oben. Dies sind die beiden einzigen erforderlichen Parameter.
  • blur-radius, der Weichzeichnungsradius. Je größer der Wert, desto weicher und breiter wird der Schatten. Der Standardwert ist 0, was einen Schatten mit scharfen Kanten bedeutet.
  • spread-radius, der Ausbreitungsradius. Ein positiver Wert dehnt den Schatten nach außen aus, ein negativer zieht ihn nach innen zusammen. Nützlich, um Rahmen ohne border zu simulieren.
  • color, die Farbe in einem beliebigen Format: hex, rgb(), rgba(), hsl(). Transparenz über rgba() oder hsla() erzeugt die natürlichsten Schatten.

Der Trick ist, dass Sie mehrere Werte, durch Kommas getrennt, übergeben können. Genau das öffnet die Tür zu den folgenden Techniken: Jeder nachfolgende Schatten in der Liste wird über den vorherigen gelegt.

1. Kaum sichtbarer Schatten an drei Seiten

Ein minimalistischer Schatten, der Tiefe verleiht, aber nicht um Aufmerksamkeit schreit. Perfekt für Produktkarten, Artikelvorschauen und beliebige Blöcke auf hellem Hintergrund.

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

Ein Versatz nur nach unten um 8px und eine starke Weichzeichnung von 24px erzeugen einen schwebenden Blockeffekt. Eine Deckkraft von 0,2 macht den Schatten auf Weiß kaum sichtbar, gerade genug, damit sich das Auge wohlfühlt.

2. Leichter Schatten an allen Seiten

Wenn ein Block einen gleichmäßigen Schatten rund um seinen Umfang benötigt, zum Beispiel für ein modales Fenster oder einen Tooltip.

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

Ein horizontaler Versatz von null und ein Spread-Radius von 0px verteilen den Schatten symmetrisch. Ein großer Blur-Radius (29px) macht den Übergang weich. Die Farbe rgba(100, 100, 111, ...) ergibt einen kühlen Grauton; das wirkt auf Weiß besser als reines Schwarz.

3. Dünner Schatten nach rechts und unten

Der klassische „erhabene" Effekt. Funktioniert für Buttons, Karten mit Hover-Zuständen und jedes Element, das taktil wirken soll.

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

Kleine Versatzwerte (etwa 2px) und eine geringe Weichzeichnung erzeugen einen scharfen, nahezu vektorgrafikartigen Schatten. Harmoniert gut mit transform: translateY(-2px) bei Hover; der Schatten „bewegt sich" mit dem Block und verstärkt den Hebeeffekt.

4. Satter Schatten an allen Seiten

Für Fälle, in denen sich ein Element deutlich vom Hintergrund abheben soll: Hero-Bereiche, Karten mit wichtigem Inhalt, Banner.

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

Eine hohe Deckkraft (0,35) und eine geringe Weichzeichnung (15px) erzeugen einen ausgeprägten, gut lesbaren Schatten. Bei horizontalem Versatz von null liegt er gleichmäßig auf; der Block wirkt, als schwebe er über der Seite.

5. Diffuser mehrschichtiger Schatten

Fünf Schattenebenen arbeiten zusammen: eine tiefe Ebene zur Abgrenzung vom Hintergrund, die übrigen für weiche Diffusion an den Seiten.

1box-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;

Die erste Ebene ist der Hauptschatten nach unten (54px, Deckkraft 0,25). Die zweite ist ein leichter Schatten nach oben (negativer Versatz -12px). Die übrigen verfeinern die Kanten. Zusammen ergeben sie ein komplexes, realistisches Licht-und-Schatten-Muster, wie ein physisches Objekt unter diffusem Licht.

6. Dünner Rand mit einem inneren Schatten

Zwei Schatten erzeugen die Illusion eines dünnen Rahmens (border) und verleihen gleichzeitig Tiefe. Kein einziges border im Code.

1box-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;

Aufschlüsselung der drei Ebenen:

  • Erstens, der „Rahmen": null Versatz und Weichzeichnung, ein Spread-Radius von 2px imitiert border: 2px solid.
  • Zweitens, der Hauptschatten nach unten für Volumen.
  • Drittens, ein weißer inset-Schatten von oben, der einen Lichtreflex erzeugt (Glaseffekt).

Eine ungewöhnliche Richtung: Der Schatten fällt nach links und leicht nach unten. Sieht gut aus bei Elementen, die am rechten Rand ausgerichtet sind, oder für eine asymmetrische Komposition.

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

Ein negativer horizontaler Versatz (-4px) lenkt den Schatten nach links. Ein negativer Spread-Radius (-6px) zieht den Schatten nach innen, macht ihn kompakter als den Block selbst; er „ragt" nicht über die Kanten hinaus.

Simulation einer gerichteten Lichtquelle, als würde eine Lampe aus der oberen linken Ecke scheinen.

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

Die erste Schicht ist ein bläulicher Schatten (rgba(136, 165, 191, ...)) nach rechts und unten. Die zweite ist ein weißes „Highlight" nach links und oben (negative Versätze, hohe Deckkraft). Zusammen erzeugen sie einen realistischen dreidimensionalen Effekt; der Block wirkt, als würde er von einer Softbox beleuchtet.

9. Farbiger Leuchtrahmen

Ein einzelner Schatten ohne Versatz und mit Weichzeichnung, aber mit positivem Ausbreitungsradius, erzeugt ein klares farbiges Leuchten um das Element.

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

Ein blaues Leuchten (rgba(3, 102, 214, ...)) mit einem Radius von 3px. Perfekt für Eingabefelder im Fokus (:focus), aktive Schaltflächen und die Hervorhebung des aktuellen Menüpunkts. Ersetzen Sie die Farbe durch rgba(220, 38, 38, 0.3) und Sie erhalten eine Hervorhebung für Validierungsfehler.

10. Doppelter Innenschatten für einen „gedrückten" Effekt

Zwei inset-Ebenen erzeugen einen tiefen konkaven Effekt. Geeignet für strukturierte Hintergründe, gedrückte Schaltflächen und dekorative Panels.

1box-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;

Das Schlüsselwort inset verschiebt den Schatten ins Innere des Elements. Die erste Schicht ist ein breiter Schatten von oben. Die zweite ist dunkler und komprimierter, ebenfalls von oben. Ein negativer Ausbreitungsradius (-12px, -18px) verhindert, dass die Schatten den gesamten Block ausfüllen; die Ränder bleiben hell, während die Mitte vertieft wirkt.

11. Farbige Schatten-„Kaskade" nach unten

Fünf Schichten derselben Farbe mit zunehmendem Versatz erzeugen einen mehrschichtigen farbigen Schatteneffekt, ähnlich wie bei Material Design, aber leuchtender.

1box-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;

Jede Folgeschicht ist um 5px weiter verschoben und hat eine geringere Deckkraft. Es ist keine Weichzeichnung angegeben, sodass die Schatten scharf sind, wie Vektorstreifen. Dies erzeugt eine leuchtende Neonspur hinter dem Block. Ersetzen Sie das Pink durch Ihre Markenfarbe, um einen wiedererkennbaren Akzent zu erhalten.

12. Farbige „Kaskade" nach rechts und unten

Dieselbe Technik, jedoch mit horizontalem Versatz; der Schatten verläuft diagonal.

1box-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;

Eine diagonale Kaskade erzeugt ein Gefühl von Bewegung nach rechts und unten. Sieht auf Schaltflächen beim Darüberfahren großartig aus; der Block scheint hinter seinem Schatten „hervorzugleiten".

13. Diffuser Schatten mit Dichtegradient

Fünf Schichten, bei denen sich jeder Folgeversatz verdoppelt (2px, 4px, 8px, 16px, 32px), während die Deckkraft konstant bleibt. Das Ergebnis ist ein Schatten mit einem sanften Dichtegradienten, der realistischste in dieser Sammlung.

1box-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;

Eine geringe Weichzeichnung für jede Schicht (1px, 2px, 4px, 8px, 16px) wächst proportional zum Versatz. Dies erzeugt eine physikalisch akkurate Diffusion; der Schatten „verblasst" mit der Entfernung, wie in der realen Welt. Perfekt für Karten, die so natürlich wie möglich wirken sollen.

Drei Möglichkeiten, CSS in HTML einzubinden

Sobald ein Snippet ausgewählt ist, müssen Sie es in die Seite einbinden. CSS bietet drei Optionen, und jede hat ihre Nische.

Internes CSS

Regeln werden in einem <style>-Tag innerhalb des <head> des HTML-Dokuments platziert. Geeignet für One-Page-Websites und schnelle Prototypen; alles befindet sich in einer Datei.

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>

Der Nachteil ist, dass die Styles vom Browser nicht separat gecacht und nicht auf anderen Seiten wiederverwendet werden können.

Inline-CSS

Styles werden direkt im style-Attribut eines HTML-Elements geschrieben. Der schnellste Weg, Styles spontan anzuwenden, aber auch der wartungsunfreundlichste.

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>

Verwenden Sie Inline-Styles selektiv: für dynamische Werte aus JavaScript, für E-Mail-Layouts (bei denen externe Stylesheets oft von E-Mail-Clients entfernt werden) und für kritisches CSS „above the fold".

Externes CSS

Regeln werden in eine separate .css-Datei ausgelagert und über <link> eingebunden. Das ist der Standard für jedes Projekt, das komplexer ist als eine einzelne Seite.

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

Externes CSS wird vom Browser gecacht, ist einfach zu warten und skalierbar. In allen drei Fällen ist das Rendering-Ergebnis dasselbe; wählen Sie die Methode basierend auf der Architektur Ihres Projekts.

Ein kurzes, aber dichtes Video (8 Minuten): Der Autor zeigt, wie man flache graue Schatten Schicht für Schicht durch Farbverlaufs-Leuchten ersetzt und dabei jeden Parameter erklärt.

⁉️🤔 Häufig gestellte Fragen

Was ist der Unterschied zwischen box-shadow und filter: drop-shadow()?

box-shadow folgt der Begrenzungsrahmenform des Elements, immer ein Rechteck. filter: drop-shadow() folgt dem Alphakanal und zeichnet die tatsächliche Form nach: Bei einer PNG-Datei mit Transparenz folgt der Schatten der Kontur des Objekts und nicht dem rechteckigen Rahmen. Deshalb ist drop-shadow() für Bilder mit freigestelltem Hintergrund, Icons und SVG unverzichtbar. Es arbeitet jedoch langsamer, da der Browser Pixel analysiert und nicht die Blockgeometrie.

Wie viele box-shadow-Ebenen kann man setzen, ohne Leistungseinbußen zu riskieren?

Es gibt kein formales Limit, aber die praktische Obergrenze auf einem durchschnittlichen Gerät liegt bei 10 bis 15 Ebenen. Darüber hinaus werden Sie Einbrüche der Bildrate beim Scrollen und bei Animationen bemerken, besonders auf Mobilgeräten. Der Grund ist, dass jede Ebene einen separaten Rendering-Durchlauf erfordert. Beschränken Sie sich bei animierten Elementen auf 2 bis 3 Ebenen und nutzen Sie will-change: box-shadow; das gibt dem Browser den Hinweis, das Element auf eine eigene Composite-Ebene zu verschieben.

Wie kann man box-shadow in den Chrome-DevTools** anzeigen und debuggen?**

Öffnen Sie die DevTools (F12), wählen Sie das Element im Tab „Elements" aus und suchen Sie die Eigenschaft box-shadow im „Styles"-Panel auf der rechten Seite. Klicken Sie auf das Farbquadrat-Symbol neben dem Wert; es öffnet sich ein visueller Schatten-Editor mit Schiebereglern für offset-x, offset-y, blur und spread. Sie können Werte mit der Maus ändern und das Ergebnis sofort sehen. Bei mehrschichtigen Schatten wird jede Ebene einzeln bearbeitet; sie sind im selben Feld, durch Kommas getrennt, aufgelistet.

Was ist Neumorphismus und wie erreicht man ihn mit box-shadow?

Neumorphismus ist ein visueller Stil, bei dem Elemente so aussehen, als wären sie aus demselben Material wie der Hintergrund „gegossen". Erreicht wird er mit zwei Schatten: einem hellen von oben links und einem dunklen von unten rechts (wie in Technik Nr. 8). Die entscheidende Bedingung ist, dass der Seitenhintergrund und die Elementfarbe übereinstimmen oder sehr ähnlich sein müssen. Beispiel für ein helles Theme:

1> .neuromorphic {
2>   background: #e0e0e0;
3>   box-shadow:
4>     8px 8px 16px #bebebe,
5>     -8px -8px 16px #ffffff;
6> }
7> 
8 
9 markdown 
10 
11The 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&#35;&#35; Which shadow should you choose for your project?
18 
19The 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 
21A 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 
29Bookmark 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.
Redaktion
RedaktionRedaktionsteam→ All publications

Ein professionelles Team von Autoren und Redakteuren, das auf die Erstellung hochwertiger Inhalte spezialisiert ist.