Generador de Sombras CSS: Box Shadow y Text Shadow Simplificados

31 de marzo, 2026 · 12 min de lectura

Entendiendo las Sombras CSS

¿Alguna vez notaste cómo algunos elementos web parecen "saltar" de la pantalla mientras otros se sienten planos y sin vida? Esa magia visual a menudo se reduce a una poderosa característica de CSS: las sombras. Le dan a elementos como botones, tarjetas y encabezados un toque de profundidad que transforma una interfaz bidimensional en algo que se siente tangible e interactivo.

Las sombras CSS no son solo adornos decorativos. Sirven propósitos funcionales críticos en el diseño web moderno. Las sombras crean jerarquía visual, guían la atención del usuario, indican interactividad y establecen relaciones espaciales entre elementos. Cuando un botón tiene una sombra sutil, los usuarios entienden instintivamente que es clicable. Cuando esa sombra cambia al pasar el cursor, confirma que el elemento es interactivo.

La psicología detrás de las sombras está arraigada en cómo percibimos el mundo físico. En la vida real, los objetos proyectan sombras según su distancia de una superficie y la fuente de luz. Al imitar estos fenómenos naturales en el diseño web, creamos interfaces que se sienten familiares e intuitivas. Una tarjeta con una sombra suave parece flotar sobre la página, mientras que un botón presionado con una sombra interior se ve hundido en la superficie.

CSS proporciona dos propiedades principales de sombra: box-shadow para contenedores de elementos y text-shadow para tipografía. Aunque comparten patrones de sintaxis similares, cada una sirve propósitos distintos y ofrece posibilidades creativas únicas. Entender ambas te permite crear efectos visuales sofisticados que elevan todo tu sistema de diseño.

Box Shadows: Fundamentos y Sintaxis

Las box shadows son los caballos de batalla de los efectos de profundidad CSS. Se aplican a todo el modelo de caja de un elemento, creando sombras alrededor de botones, tarjetas, imágenes, contenedores y prácticamente cualquier elemento HTML. La propiedad box-shadow es notablemente flexible, soportando desde sutiles indicios de elevación hasta efectos de iluminación dramáticos.

Aquí está la sintaxis completa para box shadows:

element {
  box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;
}

Desglosemos cada componente en detalle:

Aquí hay un ejemplo práctico de un botón moderno con una sombra de elevación sutil:

.button-primary {
  background: #6366f1;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.button-primary:hover {
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}

Esto crea un botón que parece ligeramente elevado de la página. Al pasar el cursor, la sombra se vuelve más grande y suave, creando la ilusión de que el botón se está levantando más cerca del usuario. Esta interacción sutil proporciona retroalimentación visual inmediata de que el elemento es interactivo.

Entendiendo los Valores de Desplazamiento

Los valores de desplazamiento (offset-x y offset-y) determinan dónde aparece tu sombra en relación con el elemento. Estos valores simulan la posición de una fuente de luz:

• Offset-x positivo: La sombra aparece a la derecha (fuente de luz desde la izquierda)
• Offset-x negativo: La sombra aparece a la izquierda (fuente de luz desde la derecha)
• Offset-y positivo: La sombra aparece debajo (fuente de luz desde arriba)
• Offset-y negativo: La sombra aparece arriba (fuente de luz desde abajo)
• Ambos en cero: La sombra aparece uniformemente alrededor del elemento (fuente de luz centrada)

Las sombras de aspecto más natural usan valores positivos de offset-y porque estamos acostumbrados a que la luz venga desde arriba en el mundo físico. Un patrón común es 0 2px para elevación sutil o 0 8px para profundidad más pronunciada.

Radio de Desenfoque y Radio de Expansión

El radio de desenfoque controla la suavidad de la sombra. Un valor de 0 crea una sombra de bordes duros, mientras que valores más grandes crean sombras cada vez más suaves y difusas. Para la mayoría de los elementos de UI, los valores de desenfoque entre 4px y 20px funcionan bien.

El radio de expansión a menudo se malinterpreta. Expande o contrae la sombra antes de que se aplique el desenfoque. Una expansión positiva hace que la sombra sea más grande que el elemento, mientras que una expansión negativa la hace más pequeña. Esto es útil para crear sombras que no se extienden tanto como el elemento mismo.

Técnicas Avanzadas de Box Shadow

Una vez que hayas dominado las box shadows básicas, puedes explorar técnicas avanzadas que crean efectos visuales sofisticados. Estos métodos son utilizados por los principales sistemas de diseño y aplicaciones web modernas para lograr interfaces pulidas y profesionales.

Sombras en Capas para Profundidad Realista

Las sombras del mundo real no son uniformes. Tienen componentes tanto nítidos como suaves. Puedes apilar múltiples sombras en un solo elemento separándolas con comas:

.card-elevated {
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
}

.card-floating {
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.15),
    0 3px 6px rgba(0, 0, 0, 0.10);
}

Esta técnica, popularizada por Material Design, crea sombras más realistas al combinar una sombra más grande y suave con una más pequeña y nítida. El resultado imita cómo se comporta la luz en el mundo físico, donde las sombras tienen tanto umbra (núcleo oscuro) como penumbra (bordes suaves).

Sombras Interiores para Profundidad y Textura

La palabra clave inset invierte la sombra para que aparezca dentro del elemento en lugar de fuera. Esto crea la apariencia de profundidad, recesión o textura:

.input-field {
  background: white;
  border: 1px solid #e5e7eb;
  padding: 10px 15px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

.pressed-button {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

Las sombras interiores son perfectas para campos de formulario, dándoles una apariencia sutil de recesión que sugiere que están "tallados en" la página. También son excelentes para estados de botones activos/presionados, creando retroalimentación táctil.

Sombras Coloreadas para Identidad de Marca

¿Quién dice que las sombras deben ser negras o grises? Las sombras coloreadas pueden reforzar la identidad de marca y crear estilos visuales distintivos:

.brand-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(99, 102, 241, 0.2);
}

.success-button {
  background: #10b981;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

Usar el color de tu marca en las sombras con baja opacidad crea diseños cohesivos y memorables. Esta técnica es particularmente efectiva para botones de llamada a la acción y tarjetas de contenido destacado.

Neumorfismo y Soft UI

El neumorfismo crea interfaces que parecen extruirse o hundirse en el fondo. Esto requiere combinar sombras claras y oscuras:

.neumorphic-card {
  background: #e0e5ec;
  border-radius: 20px;
  box-shadow:
    9px 9px 16px rgba(163, 177, 198, 0.6),
    -9px -9px 16px rgba(255, 255, 255, 0.5);
}

Aunque el neumorfismo tuvo un momento de popularidad, úsalo con moderación. Puede crear problemas de accesibilidad debido al bajo contraste y funciona mejor para elementos decorativos en lugar de componentes críticos de UI.

Text Shadows Explicadas

Las text shadows se aplican específicamente al contenido de texto, creando profundidad, énfasis o efectos decorativos en la tipografía. La propiedad text-shadow usa una sintaxis más simple que las box shadows pero ofrece posibilidades creativas igualmente poderosas.

Aquí está la sintaxis básica:

element {
  text-shadow: offset-x offset-y blur-radius color;
}

Nota que las text shadows no incluyen radio de expansión ni la palabra clave inset. La propiedad se enfoca en tres valores clave:

Aquí hay un ejemplo práctico para un encabezado hero:

h1.hero-title {
  font-size: 48px;
  font-weigh