Generador de Sombras CSS
Crea box-shadow y text-shadow personalizados de forma visual. Múltiples capas, presets y código listo para usar.
¿Cómo usar el generador?
- Selecciona el tipo de sombra (box-shadow o text-shadow)
- Usa los presets para inspiración rápida o empieza desde cero
- Ajusta los valores con los sliders (X, Y, blur, spread)
- Selecciona el color de la sombra con el selector
- Añade múltiples capas de sombras para efectos complejos
- Activa "inset" para sombras internas
- Copia el código CSS o Tailwind generado
Tipos de Sombra
Box Shadow
Sombras para elementos de caja (divs, botones, tarjetas).
Parámetros: offset-x, offset-y, blur-radius, spread-radius, color, inset.
Text Shadow
Sombras para texto y tipografía.
Parámetros: offset-x, offset-y, blur-radius, color (sin spread ni inset).
Características
- Box-shadow y text-shadow
- Múltiples capas de sombras
- Sombras internas (inset) para box-shadow
- Presets predefinidos (neumorphism, elevación, etc.)
- Control total de X, Y, blur y spread
- Selector de color con transparencia (RGBA)
- Vista previa en tiempo real
- Código CSS y Tailwind listo para copiar
- Interfaz intuitiva con sliders
- Gestión de capas (añadir, eliminar, reordenar)
Presets Incluidos
Elevación Suave
Sombra sutil para tarjetas y elementos flotantes
Elevación Media
Sombra moderada para botones y componentes
Elevación Alta
Sombra pronunciada para modales y overlays
Neumorphism
Efecto 3D moderno con sombras duales
Inset
Sombra interna para efectos hundidos
Texto con Relieve
Sombra de texto para efecto 3D
Casos de uso
- Crear profundidad en interfaces de usuario
- Diseñar botones con efecto de elevación
- Aplicar efectos neumorphism modernos
- Destacar tarjetas y componentes importantes
- Crear efectos de texto 3D y relieve
- Diseñar modales y overlays con profundidad
- Simular elementos físicos en UI
- Mejorar la jerarquía visual de elementos
Consejos de Diseño
- Usa sombras sutiles para un diseño profesional
- Las sombras más grandes indican mayor elevación
- Combina múltiples capas para efectos realistas
- El neumorphism funciona mejor con fondos claros
- Usa blur alto para sombras suaves y difusas
- El spread negativo crea sombras más pequeñas que el elemento
- Las sombras inset son ideales para inputs y campos
- Mantén consistencia en las sombras de tu diseño
Parámetros Explicados
Offset X (Horizontal)
Desplazamiento horizontal. Positivo = derecha, Negativo = izquierda.
Offset Y (Vertical)
Desplazamiento vertical. Positivo = abajo, Negativo = arriba.
Blur Radius
Difuminado de la sombra. Mayor valor = sombra más suave y difusa.
Spread Radius (solo box-shadow)
Expansión de la sombra. Positivo = más grande, Negativo = más pequeña.
Inset (solo box-shadow)
Convierte la sombra externa en interna, creando efecto hundido.