CSS

HTML

COMPONENTS

CODE HUB

Generador de Sombra de Texto CSS

Configuración

Color

#000000

Desplazamiento Horizontal

Desplazamiento Vertical

Blur

Clase

Vista previa

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

Código

ReadyTools Academy

Lerne HTML, CSS und JavaScript kostenlos mit der ReadyTools Academy.

Verfolge deinen Fortschritt, lerne in deinem eigenen Tempo und habe Spaß dabei! 🎯

Comenzar

Generador de Sombra de Texto CSS

En CSS, la propiedad text-shadow se utiliza para agregar sombras al texto de un elemento HTML. Esta propiedad permite crear varios efectos de sombra en el texto, mejorando la apariencia visual de los elementos de texto en tu página web.

La propiedad text-shadow acepta múltiples valores, especificando el desplazamiento horizontal y vertical de la sombra, su radio de difuminado y su color. La sintaxis básica es la siguiente:

.text-shadow-element { text-shadow: [horizontal-offset] [vertical-offset] [blur-radius] [color]; }

En este ejemplo:

  • [horizontal-offset]: Especifica el desplazamiento horizontal de la sombra. Un valor positivo mueve la sombra hacia la derecha, mientras que un valor negativo la mueve hacia la izquierda.
  • [vertical-offset]: Especifica el desplazamiento vertical de la sombra. Un valor positivo mueve la sombra hacia abajo, mientras que un valor negativo la mueve hacia arriba.
  • [blur-radius]: Establece el radio de difuminado de la sombra, creando un efecto más o menos difuso.
  • [color]: Especifica el color de la sombra utilizando nombres de colores, códigos hexadecimales, valores RGB, etc.

Aquí tienes un ejemplo de cómo usar la propiedad text-shadow para agregar una sombra al texto:

.text-shadow-element { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); }

En este ejemplo:

  • La clase .text-shadow-element aplica una sombra de texto al texto dentro del elemento.
  • 2px especifica un desplazamiento horizontal de 2 píxeles.
  • 2px especifica un desplazamiento vertical de 2 píxeles.
  • 4px establece el radio de difuminado a 4 píxeles.
  • rgba(0, 0, 0, 0.5) especifica el color de la sombra.

La propiedad text-shadow se usa con frecuencia para crear efectos decorativos y visualmente atractivos en encabezados, pancartas u otros elementos de texto para hacerlos resaltar y agregar profundidad al diseño de una página web.