freeCodeCamp/guide/portuguese/css/css3-shadow-effects/index.md

title	localeTitle
CSS3 Shadow Effects	Efeitos de sombra CSS3

Efeitos de sombra CSS3

Com CSS3 você pode criar dois tipos de sombras: text-shadow (adiciona sombra ao texto) e box-shadow (adiciona sombra a outros elementos).

Sombra de Texto CSS3

A propriedade text-shadow pode levar até quatro valores:

• a sombra horizontal
• a sombra vertical
• o efeito de borrão
• a cor

Exemplos:

• Sombra de texto normal

h1 { 
    text-shadow: 2px 2px 5px crimson; 
 } 

• Efeito de texto brilhante

h1 { 
    text-shadow: 0 0 4px #00FF9C; 
 } 

Múltiplas Sombras

Para conseguir isso, você simplesmente adiciona uma vírgula entre dois (ou mais) conjuntos de valores:

h1 { 
    color: white; 
    text-shadow: 0 0 3px #F10D58, 0 0 7px #4578D5; 
 } 

Sombra de Caixa CSS3

A propriedade box-shadow pode levar até seis valores:

• (opcional) a palavra-chave inset (altera a sombra para uma dentro do quadro)
• a sombra horizontal
• a sombra vertical
• o efeito de borrão
• a propagação
• a cor

Exemplos:

.first-div { 
    box-shadow: 1px 1px 5px 3px grey; 
 } 
 
 .second-div { 
    box-shadow: 0 0 5px 1px lightgrey; 
 } 
 
 .third-div { 
    box-shadow: inset 0 0 15px 5px rgba(0,0,0,0.75); 
 } 

Mais Informações:

• MDN web docs
• Verificar o suporte do navegador
• Gerador de sombra de caixa CSS (sinta-se livre para experimentar com sombras de caixa)