Playground de text-shadow en CSS

Combina hasta tres sombras de texto, ajusta sus desplazamientos, desenfoque y color, y genera código listo para copiar.

Presets

Elige una configuración como punto de partida y ajusta después cualquier control.

Contenido y superficie

Texto de ejemplo

color

background-color

Capa 1Las sombras se pintan de delante hacia atrás: la capa 1 queda por encima de las capas 2 y 3.

Usar esta capa

Color de la sombra

Capa 2

Usar esta capa

Capa 3

Usar esta capa

Sombras que dan profundidad al texto

HTML

<h2 class="text-shadow-sample">Sombras que dan profundidad al texto</h2>

Tailwind CSS

Algunas clases con valores arbitrarios pueden sustituirse por clases nativas, según el valor y la configuración de Tailwind CSS.

<h2 class="box-border grid min-h-[18rem] min-w-0 w-full max-w-2xl place-items-center p-6 bg-[#4f46e5] text-[#f8fafc] text-[64px] font-black leading-[1.05] text-center text-balance [overflow-wrap:anywhere] [text-shadow:3px_5px_8px_#17203399]">Sombras que dan profundidad al texto</h2>

CSS

.text-shadow-sample {
  box-sizing: border-box;
  inline-size: min(100%, 42rem);
  min-inline-size: 0;
  min-block-size: 18rem;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background-color: #4f46e5;
  color: #f8fafc;
  font-size: 64px;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: anywhere;
  text-shadow: 3px 5px 8px #17203399;
}