---
title: box-shadow
slug: Web/CSS/box-shadow
tags:
  - CSS
  - CSS Eigenschaft
  - CSS Hintergrund
  - Referenz
translation_of: Web/CSS/box-shadow
---
<div>{{CSSRef}}</div>

<h2 id="Übersicht">Übersicht</h2>

<p><span class="seoSummary">Die <a href="/de/docs/Web/CSS">CSS</a>-Eigenschaft <code>box-shadow </code>beschreibt einen oder mehrere Schatteneffekte als eine kommaseparierte Liste.</span> Sie erlaubt es, den Rahmen fast jedes Elements einen Schatten werfen zu lassen. Falls ein {{cssxref("border-radius")}} für das Element mit einem Schlagschatten angegeben ist, übernimmt der Schatten diese abgerundeten Ecken. Die z-Anordnung mehrerer Schlagschatten ist die gleiche wie bei mehreren <a href="/en-US/docs/Web/CSS/text-shadow">Textschatten</a> (der zuerst angegebene Schatten ist der oberste).</p>

<p><a href="/de/docs/Web/CSS/CSS_Boxmodell/Box-shadow_Generator">Box-shadow-Generator</a> ist ein interaktives Werkzeug, das es erlaubt, einen Schlagschatten zu generieren.</p>

<p>{{cssinfo}}</p>

<h2 id="Syntax">Syntax</h2>

<pre class="brush: css">/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

/* Beliebige Anzahl an Schatten, durch Kommas getrennt */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
</pre>

<h3 id="Werte">Werte</h3>

<dl>
 <dt><code>inset</code></dt>
 <dd>Falls nicht angegeben (Standardwert), wird angenommen, dass der Schatten ein Schlagschatten ist (als ob die Box über dem Inhalt schweben würde).<br>
 Die Angabe des Schlüsselworts <code>inset </code>ändert den Schatten so, dass er innerhalb des Rahmens angezeigt wird (als ob der Inhalt innerhalb der Box nach innen gedrückt wäre). Innere Schatten werden innerhalb des Randes (sogar transparenten) gezeichnet, über dem Hintergrund aber unterhalb des Inhalts.</dd>
 <dt><code>&lt;offset-x&gt;</code> <code>&lt;offset-y&gt;</code></dt>
 <dd>Diese zwei {{cssxref("&lt;length&gt;")}}-Werte setzen den Schattenabstand. <code>&lt;offset-x&gt;</code> beschreibt die horizontale Distanz. Negative Werte platzieren den Schatten links des Elements. <code>&lt;offset-y&gt;</code> beschreibt die vertikale Distanz. Negative Werte platzieren den Schatten oberhalb des Elements. Siehe {{cssxref("&lt;length&gt;")}} für mögliche Einheiten.<br>
 Falls beide Werte <code>0</code> sind, wird der Schatten hinter dem Element platziert (und können einen Unschärfeeffekt erzeugen, falls <code>&lt;blur-radius&gt;</code> und/oder <code>&lt;spread-radius&gt;</code> gesetzt sind).</dd>
 <dt><code>&lt;blur-radius&gt;</code></dt>
 <dd>Dies ist ein dritter {{cssxref("&lt;length&gt;")}}-Wert. Je größer dieser Wert ist, desto größer ist die Unschärfe, sodass der Schatten größer und schwächer wird. Negative Werte sind nicht erlaubt. Falls nicht angegeben, ist der Wert <code>0</code> (der Rand des Schattens wird scharf dargestellt).</dd>
 <dt><code>&lt;spread-radius&gt;</code></dt>
 <dd>Dies ist ein vierter {{cssxref("&lt;length&gt;")}}-Wert. Positive Werte erweitern den Schatten und machen ihn größer, negative Werte verkleinern den Schatten. Falls nicht angegeben, ist der Wert <code>0</code> (der Schatten hat die gleiche Größe wie das Element).</dd>
 <dt><code>&lt;color&gt;</code></dt>
 <dd>Siehe {{cssxref("&lt;color&gt;")}}-Werte für mögliche Schlüsselwörter und Notationen.<br>
 Falls nicht angegeben, hängt die Farbe vom Browser ab – sie ist normalerweise der Wert der {{cssxref("color")}}-Eigenschaft, aber Safari zeichnet in diesem Fall aktuell einen transparenten Schatten.</dd>
</dl>

<h3 id="Interpolation">Interpolation</h3>

<p>Jeder Schatten innerhalb der Liste (<code>none</code> wird als eine leere Liste interpretiert) wird über die Farbkomponente (als Farbe) interpoliert und x-, y-, Unschärfe- und (falls zutreffend) Ausbreitungskomponenten (als Länge). Für jeden Schatten gilt, falls beide angegebenen Schatten <code>inset</code> sind oder nicht, muss der interpolierte Schatten diesbezüglich mit den angegebenen Schatten übereinstimmen. Falls ein Schatten eines beliebigen Paares von angegebenen Schatten <code>inset</code> ist und der andere nicht, ist die gesamte Schattenliste nicht interpolierbar. Falls die Listen von Schatten verschiedene Längen haben, wird die kürzere Liste mit Schatten aufgefüllt, deren Farbe <code>transparent</code> ist, alle Längen <code>0</code> und dessen <code>inset</code> (oder nicht) mit dem der längeren Liste übereinstimmt.</p>

<h3 id="Formale_Syntax">Formale Syntax</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Live-Beispiele">Live-Beispiele</h2>

<ul>
 <li><a href="http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html">box-shadow-Test</a></li>
 <li><a href="http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/">box-shadow-Tutorial und -Beispiele</a></li>
</ul>

<pre style="-moz-box-shadow: 60px -16px teal; -webkit-box-shadow: 60px -16px teal; box-shadow: 60px -16px teal; float: left; margin: 1em;">box-shadow: 60px -16px teal;</pre>

<pre style="-moz-box-shadow: 10px 5px 5px black; -webkit-box-shadow: 10px 5px 5px black; box-shadow: 10px 5px 5px black; float: left; margin: 1em;">box-shadow: 10px 5px 5px black;</pre>

<pre style="-moz-box-shadow: 3px 3px red, -1em 0pt 0.4em olive; -webkit-box-shadow: 3px 3px red, -1em 0 0.4em olive; box-shadow: 3px 3px red, -1em 0 0.4em olive; float: left; margin: 1em;">box-shadow: 3px 3px red, -1em 0 0.4em olive;</pre>

<pre style="-moz-box-shadow: 5em 1em gold inset; -webkit-box-shadow: inset 5em 1em gold; box-shadow: inset 5em 1em gold; float: left; margin: 1em;">box-shadow: inset 5em 1em gold;</pre>

<pre style="-moz-box-shadow: 0 0 1em gold; -webkit-box-shadow: 0 0 1em gold; box-shadow: 0 0 1em gold; float: left; margin: 1em;">box-shadow: 0 0 1em gold;</pre>

<pre style="-moz-box-shadow: 0 0 1em gold inset; -webkit-box-shadow: inset 0 0 1em gold; box-shadow: inset 0 0 1em gold; float: left; margin: 1em;">box-shadow: inset 0 0 1em gold;</pre>

<pre style="-moz-box-shadow: 0 0 1em gold inset, 0 0 1em red; -webkit-box-shadow: inset 0 0 1em gold, 0 0 1em red; box-shadow: inset 0 0 1em gold, 0 0 1em red; float: left; margin: 1em;">box-shadow: inset 0 0 1em gold, 0 0 1em red;</pre>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow')}}</td>
   <td>{{Spec2('CSS3 Backgrounds')}}</td>
   <td>Ursprüngliche Definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>

{{Compat("css.properties.box-shadow")}}