---
title: box-shadow
slug: Web/CSS/box-shadow
tags:
  - Adnotacja
  - CSS
  - CSS3
  - Grafika
  - Referencja
  - Tło CSS
  - Tło CSS3
  - Układ
  - Właściwość CSS
  - sieć
translation_of: Web/CSS/box-shadow
---
<p>{{CSSRef()}}</p>

<p> </p>

<div class="callout-box">
<p><strong>Generator box-shadow</strong></p>

<p><a href="/en-US/docs/Web/CSS/Tools/Box-shadow_generator" title="/en-US/docs/Web/CSS/Tools/Box-shadow_generator">Interaktywne narzędzie</a> pozwalające stworzyć efekt box-shadow.</p>
</div>

<p><span class="seoSummary"><code><font face="Open Sans, sans-serif">Właściwość CSS </font>box-shadow</code> określa jeden lub więcej efektów cieniowych jako przecinkowo-rozdzielaną listę.</span> Pozwala na rzucenie cienia z prawie każdego elementu. Jeśli {{ cssxref("-moz-border-radius") }} jest zadeklarowany na elemencie na którym zadeklarowany jest także <code>box-shadow</code>, właściwość przybiera wartość z {{ cssxref("-moz-border-radius") }} i tworzy zaokrąglony cień. Użycie <code>box-shadow</code> wraz z {{ cssxref("z-index") }} daje taki sam efekt jak wielokrotne użycie <a href="/en-US/CSS/text-shadow" title="text-shadow">cienia tekstu</a> (pierwszy zadeklarowany cień jest wyświetlany ponad wszystkimi).</p>

<ul>
 <li><a href="/pl/docs/Web/CSS/Warto%C5%9B%C4%87_pocz%C4%85tkowa">Wartość początkowa</a>: Szczegóły widoczne poniżej.</li>
 <li>Dotyczy: Każdy element.</li>
 <li><a href="/pl/docs/Web/CSS/dziedziczenie">Dziedziczona</a>: Nie.</li>
 <li><a href="/pl/docs/Web/CSS/@media">@media</a>: Wizualna.</li>
 <li>Wartość wyliczona: Każda długość absolutna; każdy kolor; inaczej jak zapisano poniżej.</li>
 <li>Animowana: Tak, jako lista cieni.</li>
 <li>Porządek kanoniczny: Unikatowy niedwuznaczny porządek określany według formalnej gramatyki. </li>
</ul>

<h2 id="Syntax" name="Syntax">Składnia</h2>

<pre class="syntaxbox">box-shadow: none | [inset? &amp;&amp; [ &lt;offset-x&gt; &lt;offset-y&gt; &lt;blur-radius&gt;? &lt;spread-radius&gt;? &lt;color&gt;? ] ]#</pre>

<h3 id="Values" name="Values">Wartości</h3>

<dl>
 <dt><code>inset</code></dt>
 <dd>Jeśli inset nie zostanie ustalony (domyślnie), cień będzie wyświetlany ponad elementem. Jeśli zostanie użyty <code>inset,</code> cień zawrze się wewnątrz elementu. Cienie wewnętrzne są rysowane wewnątrz elementu (nawet przeźroczyste), ponad tłem, ale poniżej zawartości.</dd>
 <dt><code>&lt;offset-x&gt;</code> <code>&lt;offset-y&gt;</code></dt>
 <dd>Są dwie wartości {{ cssxref("&lt;length&gt;") }}, które określają odległość. <code>&lt;offset-x&gt;</code> oznacza odległość poziomą. Ujemne wartości umieszczają cień na lewo od elementu. <code>&lt;offset-y&gt;</code> wyznacza odległość pionową. Ujemne wartości umiesczają cień ponad elementem. Zobacz {{ cssxref("&lt;length&gt;") }} dla możliwych jednostek.<br>
 Jeśli obydwie wartości przyjmują <code>0</code>, cień jest umiejscowiony za elementem (i może swtorzyć efekt rozmycia jeśli <code>&lt;blur-radius&gt;</code> oraz/lub <code>&lt;spread-radius&gt;</code> jest określony).</dd>
 <dt><code>&lt;blur-radius&gt;</code></dt>
 <dd>To jest trzecia wartość {{ cssxref("&lt;length&gt;") }}. Im większa, tym większe jest rozmycie i w efekcie cień jest większy oraz łagodniejszy. Ujemne wartości są niedozwolone. Jeśli nie ustalona, przyjmuje wartość domyślną <code>0</code> (krawędź cienia jest ostra).</dd>
 <dt><code>&lt;spread-radius&gt;</code></dt>
 <dd>To jest czwarta wartość {{ cssxref("&lt;length&gt;") }}. Nieujemne wartości będą powodować zwiększanie się cienia, a ujemne jego zmniejszanie. Jeśli nie ustalona, domyślnie przyjmuje wartość <code>0</code> (cień będzie tego samego rozmiaru co element).</dd>
 <dt><code>&lt;color&gt;</code></dt>
 <dd>Zobacz {{cssxref("&lt;color&gt;")}} dla możliwych słów kluczowych oraz notacji.<br>
 Jeśli nie ustalona, przyjmuje kolor zależny od przeglądarki - aktualnie jest to wartość {{ cssxref("color") }}, lecz Safari tworzy przeźroczysty cień w tej sytuacji.</dd>
</dl>

<h2 id="Live_examples" name="Live_examples">Przykłady</h2>

<ul>
 <li><a class="external" href="http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html" title="http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html">Test box-shadow</a></li>
 <li><a class="external" href="http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/" title="http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/">Kurs oraz przykłady box-shadow</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 class="cleared" id="Specifications" name="Specifications">Specyfikacja</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specyfikacja</th>
   <th scope="col">Status</th>
   <th scope="col">Komentarz</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow') }}</td>
   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Zgodność z przeglądarkami</h2>

<p>{{ CompatibilityTable }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Właściwość</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Podstawowa obsługa</td>
   <td>10.0<br>
    1.0{{ property_prefix("-webkit") }}</td>
   <td>{{ CompatGeckoDesktop("2.0") }}<br>
    {{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}</td>
   <td>9.0 (Zobacz notatki)</td>
   <td>10.5</td>
   <td>5.1 (WebKit 534)<br>
    3.0 (WebKit 522){{ property_prefix("-webkit") }}</td>
  </tr>
  <tr>
   <td>Wielokrotne cienie</td>
   <td>10.0<br>
    1.0{{ property_prefix("-webkit") }}</td>
   <td>{{ CompatGeckoDesktop("2.0") }}<br>
    {{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}</td>
   <td>9.0</td>
   <td>10.5</td>
   <td>5.1 (WebKit 534)<br>
    3.0 (WebKit 522){{ property_prefix("-webkit") }}</td>
  </tr>
  <tr>
   <td>Wartość<code> inset</code></td>
   <td>10.0<br>
    4.0{{ property_prefix("-webkit") }}</td>
   <td>{{ CompatGeckoDesktop("2.0") }}<br>
    {{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}</td>
   <td>9.0</td>
   <td>10.5</td>
   <td>5.1 (WebKit 534)<br>
    5.0 (WebKit 533){{ property_prefix("-webkit") }}</td>
  </tr>
  <tr>
   <td><code>spread-radius</code></td>
   <td>10.0<br>
    4.0{{ property_prefix("-webkit") }}</td>
   <td>{{ CompatGeckoDesktop("2.0") }}<br>
    {{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}</td>
   <td>9.0</td>
   <td>10.5</td>
   <td>5.1 (WebKit 534)<br>
    5.0 (WebKit 533){{ property_prefix("-webkit") }}</td>
  </tr>
 </tbody>
</table>

<p> </p>

<p> </p>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Właściwość</th>
   <th>iOS Safari</th>
   <th>Opera Mini</th>
   <th>Opera Mobile</th>
   <th>Android Browser</th>
  </tr>
  <tr>
   <td>Podstawowa obsługa</td>
   <td>
    <p>5.0<br>
     {{ CompatVersionUnknown }}{{ property_prefix("-webkit") }}</p>
   </td>
   <td>{{ CompatUnknown }}</td>
   <td>Obsługuje</td>
   <td>Obsługuje (2.2 tested) {{ property_prefix("-webkit") }}</td>
  </tr>
  <tr>
   <td>Wielokrotne cienie</td>
   <td>5.0<br>
    {{ CompatVersionUnknown }}{{ property_prefix("-webkit") }}</td>
   <td>{{ CompatUnknown }}</td>
   <td>{{ CompatUnknown }}</td>
   <td>{{ CompatUnknown }}</td>
  </tr>
  <tr>
   <td>Wartość <code>inset</code></td>
   <td>5.0<br>
    {{ CompatVersionUnknown }}{{ property_prefix("-webkit") }}</td>
   <td>{{ CompatUnknown }}</td>
   <td>{{ CompatUnknown }}</td>
   <td>{{ CompatUnknown }}</td>
  </tr>
  <tr>
   <td><code>spread-radius</code></td>
   <td>5.0<br>
    {{ CompatVersionUnknown }}{{ property_prefix("-webkit") }}</td>
   <td>{{ CompatUnknown }}</td>
   <td>{{ CompatUnknown }}</td>
   <td>{{ CompatUnknown }}</td>
  </tr>
 </tbody>
</table>
</div>

<h3 id="Notatki">Notatki</h3>

<ul>
 <li>Od wersji 5.5, Internet Explorer obsługuje Microsoft's <a class="external" href="http://msdn.microsoft.com/en-us/library/ms532985%28VS.85,loband%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms532985(VS.85,loband).aspx">DropShadow</a> i filtr <a class="external" href="http://msdn.microsoft.com/en-us/library/ms533086%28VS.85,loband%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms533086(VS.85,loband).aspx">Shadow</a>. Możesz użyć tych rozszerzeń aby stworzyć cień (chociaż składnia oraz efekt różnią się od CSS3).</li>
 <li>Cienie mają wpły na układ w starszych silnikach Gecko, Presto i WebKit; np. jeśli utworzomy zewnętrzny cień to przy elemencie z <code>width: 100%</code> zobaczysz pasek przewijania.</li>
 <li>W Gecko 13 (Firefox 13) zostało usunięte wsparcie dla <code>-moz-box-shadow</code>. Od tego czasu, tylko wersja bez <code>-moz- jest wspierana</code>.</li>
 <li>Aby uzyskać efekt <code>box-shadow</code> w IE9 lub późniejszych, musisz ustawić {{ cssxref("border-collapse") }} na <code>separate</code>.</li>
</ul>