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

<p><span class="seoSummary">O <strong><code>box-shadow</code></strong> é uma propriedade do CSS, é utilizado para adicionar efeitos de sombra em volta de um elemento. Você pode especificar mais de um efeito, os separando com virgulas.</span> Uma box-shadow é descrita pelo deslocamentos (offset) X e Y em relação ao elemento, desfoco e propagação do raio e cor.</p>

<pre class="brush: css no-line-numbers notranslate">/* 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;

/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* Global keywords */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;
</pre>

<pre class="brush: css no-line-numbers notranslate" style="">box-shadow: 60px -16px teal;</pre>

<pre class="brush: css no-line-numbers notranslate" style="box-shadow: 10px 5px 5px black; float: left; margin: 1em;">box-shadow: 10px 5px 5px black;</pre>

<pre class="brush: css no-line-numbers notranslate" style="">box-shadow: 3px 3px red, -1em 0 0.4em olive;</pre>

<pre class="brush: css no-line-numbers notranslate" style="box-shadow: inset 5em 1em gold; float: left; margin: 1em;">box-shadow: inset 5em 1em gold;</pre>

<pre class="brush: css no-line-numbers notranslate" style="box-shadow: 0 0 1em gold; float: left; margin: 1em;">box-shadow: 0 0 1em gold;</pre>

<pre class="brush: css no-line-numbers notranslate" style="box-shadow: inset 0 0 1em gold; float: left; margin: 1em;">box-shadow: inset 0 0 1em gold;</pre>

<pre class="brush: css no-line-numbers notranslate" style="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>

<div class="cleared"></div>

<p>A propriedade box-shadow permite que você adicione uma sombra em quase qualquer elemento. Se um {{cssxref ("border-radius")}} for especificado no elemento com uma box-shadow, a sombra assume os mesmos cantos arredondados. O comando z-ordering de múltiplas box-shadows é o mesmo que múltiplas <a href="/en-US/CSS/text-shadow">text shadows</a> (a primeira sombra especificada está na parte superior).</p>

<p><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator">Box-shadow generator</a> é uma ferrament interativa qu permite a criação de <code>box-shadow</code>.</p>

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

<h2 id="Sintaxe">Sintaxe</h2>

<p>Especificando uma única box-shadow usando:</p>

<ul>
 <li>Dois, três ou quatro valores para <code><a href="/en-US/docs/Web/CSS/length">&lt;length&gt;</a></code>.

  <ul>
   <li>Se apenas dois valores forem definidos, eles serão interpretados como valores de <code><a href="#&lt;offset-x> &lt;offset-y>">&lt;offset-x&gt;&lt;offset-y&gt;</a></code>.</li>
   <li>Se o terceiro valor for dados, é interpretado como <code><a href="#&lt;blur-radius>">&lt;blur-radius&gt;</a></code>.</li>
   <li>Se o quarto valor for dados, é interpretado como <code><a href="#&lt;spread-radius>">&lt;spread-radius&gt;</a></code>.</li>
  </ul>
 </li>
 <li>Opcionalmente, o atributo <code><a href="#inset">inset</a></code>.</li>
 <li>Opcionalmente, o valor <code><a href="#&lt;color>">&lt;color&gt;</a></code>.</li>
</ul>

<p>Para especificar mais de uma sombra, separe-as com virgula.</p>

<h3 id="Valores">Valores</h3>

<dl>
 <dt><a id="inset" name="inset"><code>inset</code></a></dt>
 <dd>Se não for especificado, a sombra ganha o efeito de como se a caixa fosse aumentada acima do conteúdo).<br>
 A presença da palavra-chave <code>inset</code> muda a sombra para dentro da moldura (como se o conteúdo estivesse pressionado dentro da caixa). As sombras de inserção são desenhadas dentro da borda (mesmo as transparentes), acima do plano de fundo, mas abaixo do conteúdo.</dd>
 <dt><a id="&lt;offset-x> &lt;offset-y>" name="&lt;offset-x> &lt;offset-y>"><code>&lt;offset-x&gt;</code> <code>&lt;offset-y&gt;</code></a></dt>
 <dd>Existem dois valores {{cssxref("&lt;length&gt;")}}  para configurar o desvio (offset) da sombra:</dd>
 <dd><code>&lt;offset-x&gt;</code> especifica a distância horizontal. Valores negativos colocarão a sombra à esquerda do elemento.</dd>
 <dd><code>&lt;offset-y&gt;</code> especifca a distância vertical. Valores negativos colocam a sombra acima do elemento.</dd>
 <dd>Consulte {{cssxref("&lt;length&gt;")}} para as unidades disponíveis.</dd>
 <dd>Se ambos os valores forem <code>0</code>, a sombra será posicionada atrás do elemento (e poderá gerar um efeito de desfocagem caso <code>&lt;blur-radius&gt;</code> e/ou <code>&lt;spread-radius&gt;</code> estiverem configurados).</dd>
 <dt><a id="&lt;blur-radius>" name="&lt;blur-radius>"><code>&lt;blur-radius&gt;</code></a></dt>
 <dd>Este é um terceiro valor para {{cssxref("&lt;length&gt;")}}. Quanto maior for este valor, maior o efeito de desfocagem, desta forma a sombra se tornará maior e mais clara. Valores negativos não são permitidos. Se não for especificado, o valor padrão é <code>0</code> (os limites da sombra serão retos). A especificação não inclui um algoritmo exato de como o raio de esmaecimento deve ser calculado, no entanto, descreve o seguinte:</dd>
 <dd>
 <blockquote>...para uma sombra com bordas longas e retas, deverá ser criada uma transição de cor do comprimento da distância de desfocagem que é perpendicular e centralizada com as bordas da sombra, e isto deve variar da cor total da sombra do seu ponto central até totalmente transparente no ponto final fora dela.</blockquote>
 </dd>
 <dt><a id="&lt;spread-radius>" name="&lt;spread-radius>"><code>&lt;spread-radius&gt;</code></a></dt>
 <dd>Este é um quarto valor de {{cssxref("&lt;length&gt;")}}. Valores positivos farão com que a sombra expanda e cresça maior, valores negativos farão com que a sombra encolha. Se não for especificado, o valor padrão é <code>0</code> (a sombra terá o mesmo tamanho do elemento)</dd>
 <dt><a id="&lt;color>" name="&lt;color>"><code>&lt;color&gt;</code></a></dt>
 <dd>Consulte {{cssxref("&lt;color&gt;")}} para possiveis palavras-chave e notações. Se não for especificada, a cor que será utilizada vai depender do navegador - geralmente é o valor da propriedade {{cssxref("color")}}, mas tenha em mente que o Safari atualmente imprime uma sombra transparente neste caso.</dd>
</dl>

<h3 id="Interpolação">Interpolação</h3>

<p>Each shadow in the list (treating <code>none</code> as a 0-length list) is interpolated via the color (as color) component, and x, y, blur, and (when appropriate) spread (as length) components. For each shadow, if both input shadows are or are not <code>inset</code>, then the interpolated shadow must match the input shadows in that regard. If any pair of input shadows has one <code>inset</code> and the other not <code>inset</code>, the entire shadow list is uninterpolable. If the lists of shadows have different lengths, then the shorter list is padded at the end with shadows whose color is <code>transparent</code>, all lengths are <code>0</code>, and whose <code>inset</code> (or not) matches the longer list.</p>

<h3 id="Formal_syntax">Formal syntax</h3>

{{csssyntax}}

<h2 id="Live_examples">Live examples</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 and examples</a></li>
 <li><a href="https://cssgenerator.org/box-shadow-css-generator.html">Box Shadow CSS Generator</a></li>
</ul>

<h2 class="cleared" id="Specifications">Specifications</h2>

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

<h2 id="Browser_compatibility">Browser compatibility</h2>

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

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>10.0<sup>[1]</sup><br>
    1.0{{property_prefix("-webkit")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("2.0")}}<sup>[3]</sup><br>
    {{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}</td>
   <td>9.0<sup>[2]</sup></td>
   <td>10.5<sup>[1]</sup></td>
   <td>5.1<sup>[1]</sup><br>
    3.0 {{property_prefix("-webkit")}}</td>
  </tr>
  <tr>
   <td>Multiple shadows</td>
   <td>10.0<br>
    1.0{{property_prefix("-webkit")}}</td>
   <td>{{CompatVersionUnknown}}</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<br>
    3.0 {{property_prefix("-webkit")}}</td>
  </tr>
  <tr>
   <td><code>inset</code> keyword</td>
   <td>10.0<br>
    4.0{{property_prefix("-webkit")}}</td>
   <td>{{CompatVersionUnknown}}</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<br>
    5.0 {{property_prefix("-webkit")}}</td>
  </tr>
  <tr>
   <td>Spread radius</td>
   <td>10.0<br>
    4.0{{property_prefix("-webkit")}}</td>
   <td>{{CompatVersionUnknown}}</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<br>
    5.0 {{property_prefix("-webkit")}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Edge</th>
   <th>Safari Mobile</th>
   <th>Opera Mini</th>
   <th>Opera Mobile</th>
   <th>Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>
    <p>5.0<sup>[1]</sup><br>
     {{CompatVersionUnknown }}{{ property_prefix("-webkit")}}</p>
   </td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown }}<sup>[1]</sup></td>
   <td>{{CompatVersionUnknown }}{{property_prefix("-webkit")}}<sup>[1]</sup></td>
  </tr>
  <tr>
   <td>Multiple shadows</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>5.0<br>
    {{CompatVersionUnknown }}{{ property_prefix("-webkit")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>inset</code> keyword</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>5.0<br>
    {{CompatVersionUnknown }}{{ property_prefix("-webkit")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>Spread radius</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>5.0<br>
    {{CompatVersionUnknown }}{{ property_prefix("-webkit")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Shadows affect layout in older Gecko, Presto, and WebKit; e.g. if you cast an outer shadow to a box with a <code>width</code> of <code>100%</code>, you'll see a scrollbar.</p>

<p>[2] Since version 5.5, Internet Explorer supports Microsoft's <a href="http://msdn.microsoft.com/en-us/library/ms532985%28VS.85,loband%29.aspx">DropShadow</a> and <a href="http://msdn.microsoft.com/en-us/library/ms533086%28VS.85,loband%29.aspx">Shadow</a> Filter. You can use this proprietary extension to cast a drop shadow (though the syntax and the effect are different from CSS3). In order to get <code>box-shadow</code> in IE9 or later, you need to set {{cssxref("border-collapse")}} to <code>separate</code>.</p>

<p>[3] Gecko 13 {{geckoRelease(13)}} removed support for <code>-moz-box-shadow</code>. Since then, only the unprefixed version is supported. Shadows affect layout in older Gecko, Presto, and WebKit; e.g. if you cast an outer shadow to a box with a <code>width</code> of <code>100%</code>, you'll see a scrollbar.</p>

<p>In addition to the unprefixed support, Gecko 44.0 {{geckoRelease("44.0")}} added support for a <code>-webkit</code> prefixed version of the property for web compatibility reasons behind the preference <code>layout.css.prefixes.webkit</code>, defaulting to <code>false</code>. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to <code>true</code>.</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>The {{cssxref("&lt;color&gt;")}} data type</li>
 <li>Other color-related properties: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}}</li>
 <li><a href="/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></li>
</ul>