Saltar al contenido principal

Generador de Sombras CSS

Herramienta gratuita en línea para crear visualmente CSS box-shadow y text-shadow y copiar el código.

Box Shadow

Tipo de sombra

Capas de sombra

Capa 1
10%

Código CSS

box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);

Sombras predefinidas

Características Principales​

  • 2 Tipos: Box Shadow, Text Shadow
  • Vista Previa en Tiempo Real: Ver cambios instantáneamente
  • Múltiples Capas: Agregar hasta 5 capas de sombra
  • Control Fino: Desplazamiento X/Y, desenfoque, expansión, color, opacidad
  • Soporte Inset: Efecto de sombra interior
  • Ajustes Preestablecidos: 6 sombras predefinidas
  • Copiar con Un Clic: Copiar código CSS instantáneamente

Tipos de Sombras​

1. Box Shadow​

box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1);

Añade efectos de sombra fuera o dentro de elementos.

Casos de Uso:

  • Sombras de tarjetas
  • Profundidad de botones
  • Fondos de modales
  • Efectos de borde de imagen

2. Text Shadow​

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

Añade efectos de sombra al texto.

Casos de Uso:

  • Títulos de encabezado
  • Texto de logo
  • Efectos neón
  • Texto 3D

Compatibilidad del Navegador​

Box Shadow​

  • ✅ Chrome 10+
  • ✅ Firefox 4+
  • ✅ Safari 5.1+
  • ✅ Edge 12+
  • ✅ IE 9+
  • ✅ Todos los navegadores móviles

Text Shadow​

  • ✅ Chrome 4+
  • ✅ Firefox 3.5+
  • ✅ Safari 4+
  • ✅ Edge 12+
  • ✅ IE 10+
  • ✅ Todos los navegadores móviles

Herramientas Relacionadas​