Efectos de sombra CSS

Tabla de contenido

    Mostrar tabla de contenidos
Norway

Shadows

With CSS you can create shadow effects!

Hover over me!

Efectos de sombra CSS

Con CSS puedes agregar sombras al texto y a los elementos.

En estos capítulos aprenderá sobre las siguientes propiedades:

text-shadow
box-shadow

Sombra de texto CSS

La propiedad CSS text-shadow aplica sombra al texto.

En su uso más simple, solo especificas la sombra horizontal (2px) y la sombra vertical (2px):

Text shadow effect!

Ejemplo

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

Pruébelo usted mismo →

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

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

</body>
</html>

Luego, agrega un color a la sombra:

Text shadow effect!

Ejemplo

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

Pruébelo usted mismo →

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

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

</body>
</html>

Luego, agrega un efecto de desenfoque a la sombra:

Text shadow effect!

Ejemplo

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

Pruébelo usted mismo →

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

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

</body>
</html>

El siguiente ejemplo muestra un texto blanco con una sombra negra:

Text shadow effect!

Ejemplo

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

Pruébelo usted mismo →

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

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

</body>
</html>

El siguiente ejemplo muestra una sombra con un brillo de neón rojo:

Text shadow effect!

Ejemplo

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

Pruébelo usted mismo →

<!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últiples sombras

Para agregar más de una sombra al texto, puede agregar una lista de sombras separadas por comas.

El siguiente ejemplo muestra una sombra luminosa de neón roja y azul:

Text shadow effect!

Ejemplo

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

Pruébelo usted mismo →

<!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>

El siguiente ejemplo muestra un texto blanco con una sombra negra, azul y azul oscuro:

Text shadow effect!

Ejemplo

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

Pruébelo usted mismo →

<!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>

También puedes usar la propiedad text-shadow para crear un borde plano alrededor de algún texto (sin sombras):

Border around text!

Ejemplo

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

Pruébelo usted mismo →

<!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>