text-shadow
===========

Sumário
-------

A propriedade `text-shadow` acrescenta sombras ao texto. Ela aceita uma lista de sombras separadas por vírgula que serão aplicados ao texto e ao `text-decorations` do elemento.

Cada sombra é especificada como um deslocamento do texto, juntamente com valores opcionais de cor e raio de desfoque.

Multiplas sombras são aplicadas de frente-para-trás, com a primeira sombra especificada no topo.

Esta propriedade se aplica a ambos `::first-line` e `::first-letter` pseudo-elements.

|  |  |
| --- | --- |
| Initial value | `none` |
| Aplica-se a | all elements. It also applies to `::first-letter` and `::first-line`. |
| Inherited | yes |
| Computed value | a color plus three absolute lengths |
| Animation type | a shadow list |

Sintaxe
-------


```css
/\* deslocamento-x | deslocamento-y | raio-de-desfoque | cor \*/
text-shadow: 1px 1px 2px black;

/\* cor | deslocamento-x | deslocamento-y | raio-de-desfoque \*/
text-shadow: #ccc 1px 0 10px;

/\* deslocamento-x | deslogamento-y | cor \*/
text-shadow: 5px 5px #558abb;

/\* cor | deslocamento-x | deslocamento-y \*/
text-shadow: white 2px 5px;

/\* deslocamento-x | deslocamento-y
/\* Usa o padrão para cor e raio-de-desfoque \*/
text-shadow: 5px 10px;

/\* Valores globais \*/
text-shadow: inherit;
text-shadow: initial;
text-shadow: unset;
```

### Valores

<cor>

Opcional. Pode ser especificado tanto antes quanto depois dos valores de deslocamento. Se a cor não é especificada, uma cor UA-chosen será usada.

**Nota:** Se voce quer garantir a consistência entre os navegadores, especifique explicitamente uma cor.

<offset-x> <offset-y>

 Obrigatório. These `<length>` values specify the shadow's offset from the text. `<offset-x>` specifies the horizontal distance; a negative value places the shadow to the left of the text. `<offset-y>` specifies the vertical distance; a negative value places the shadow above the text. If both values are `0`, then the shadow is placed behind the text (and may generate a blur effect when `<blur-radius>` is set).
 To find out what units you can use, see `<length>` (en-US).


<blur-radius>

Opcional. This is a `<length>` (en-US) value. If not specified, it defaults to `0`. The higher this value, the bigger the blur; the shadow becomes wider and lighter.

### Formal syntax
```

text-shadow =   
  none                            | (en-US)  
  [ (en-US) <color>? (en-US) && (en-US) <length> (en-US){2,3} (en-US) ] (en-US)# (en-US)    
  
```

Exemplos
--------


```css
.red-text-shadow {
  text-shadow: red 0 -2px;
}
```



```html
<p class="red-text-shadow">
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
  doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
  veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>
```



```css
.white-with-blue-shadow {
  text-shadow:
    1px 1px 2px black,
    0 0 1em blue,
    0 0 0.2em blue;
  color: white;
  font:
    1.5em Georgia,
    "Bitstream Charter",
    "URW Bookman L",
    "Century Schoolbook L",
    serif;
}
```



```html
<p class="white-with-blue-shadow">
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
  doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
  veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>
```



```css
.gold-on-gold {
  text-shadow:
    rgba(0, 0, 0, 0.1) -1px 0,
    rgba(0, 0, 0, 0.1) 0 -1px,
    rgba(255, 255, 255, 0.1) 1px 0,
    rgba(255, 255, 255, 0.1) 0 1px,
    rgba(0, 0, 0, 0.1) -1px -1px,
    rgba(255, 255, 255, 0.1) 1px 1px;
  color: gold;
  background: gold;
}
```



```html
<p class="gold-on-gold">
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
  doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
  veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>
```

Especificações
--------------

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-shadow-property |

Compatibilidade do navegador
----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `box-shadow`