Efeitos de sombra CSS

Índice

    Mostrar índice
Norway

Shadows

With CSS you can create shadow effects!

Hover over me!

Efeitos de sombra CSS

Com CSS você pode adicionar sombra ao texto e aos elementos.

Nestes capítulos você aprenderá sobre as seguintes propriedades:

text-shadow
box-shadow

Sombra de texto CSS

A propriedade CSS text-shadow aplica sombra ao texto.

Na sua utilização mais simples, você especifica apenas a sombra horizontal (2px) e a sombra vertical (2px):

Text shadow effect!

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>

Em seguida, adicione uma cor à sombra:

Text shadow effect!

Exemplo

  h1
{
  text-shadow: 2px 2px red;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px red;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>

Em seguida, adicione um efeito de desfoque à sombra:

Text shadow effect!

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px 5px red;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>

O exemplo a seguir mostra um texto branco com sombra preta:

Text shadow effect!

Exemplo

   h1
{
  color: white;
  text-shadow: 2px 2px 4px #000000;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>

O exemplo a seguir mostra uma sombra brilhante neon vermelha:

Text shadow effect!

Exemplo

  h1
{
  text-shadow: 0 0 3px #FF0000;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 0 0 3px #FF0000;
}
</style>
</head>
<body>

<h1>Text-shadow with red neon glow!</h1>

</body>
</html>

Múltiplas Sombras

Para adicionar mais de uma sombra ao texto, você pode adicionar uma lista de sombras separadas por vírgulas.

O exemplo a seguir mostra uma sombra brilhante neon vermelha e azul:

Text shadow effect!

Exemplo

   h1
{
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
</style>
</head>
<body>

<h1>Text-shadow with red and blue neon glow!</h1>

</body>
</html>

O exemplo a seguir mostra um texto branco com sombra preta, azul e azul escuro:

Text shadow effect!

Exemplo

   h1
{
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>

Você também pode usar a propriedade text-shadow para criar uma borda simples ao redor de algum texto (sem sombras):

Border around text!

Exemplo

   h1
{
  color: coral;
  text-shadow: -1px 0 black, 0 1px 
    black, 1px 0 black, 0 -1px black;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: coral;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
</style>
</head>
<body>

<h1>Border around text!</h1>

</body>
</html>