Generador de Sombras

Generador CSS Box Shadow - Crear Efectos de Sombra Impresionantes

Un potente generador de CSS box-shadow que crea hermosos efectos de sombra con vista previa en vivo. Características incluyen múltiples capas de sombra, valores personalizables de blur, spread y offset, control de opacidad y estilos predefinidos.

¿Qué es CSS box-shadow?

CSS box-shadow es una propiedad que agrega efectos de sombra alrededor del marco de un elemento. Crea profundidad e interés visual en diseño web.

Sintaxis:
box-shadow: offset-x offset-y blur spread color;

Componentes:
- offset-x: Posición horizontal de sombra
- offset-y: Posición vertical de sombra
- blur: Radio de desenfoque (suavidad)
- spread: Expansión del tamaño de sombra
- color: Color de sombra (soporta rgba)
- inset: Palabra clave opcional para sombra interior

Ejemplo:
box-shadow: 10px 10px 20px rgba(0,0,0,0.3);

Beneficios:
- No necesita imágenes
- Acelerado por hardware
- Soporta múltiples sombras
- Animable con transiciones CSS

¿Cómo creo múltiples capas de sombra?

Múltiples sombras crean profundidad y realismo:

Método:
1. Haz clic en 'Agregar Sombra'
2. Configura cada capa por separado
3. Las capas se apilan en orden

Ejemplo CSS:
box-shadow:
0 2px 4px rgba(0,0,0,0.1),
0 8px 16px rgba(0,0,0,0.1),
0 16px 32px rgba(0,0,0,0.1);

Consejos para sombras en capas:
- Usa opacidad decreciente
- Aumenta blur con distancia
- Mantén colores consistentes
- 2-4 capas suelen ser suficientes

Técnicas populares:
- Sombras de elevación (Material Design)
- Soft UI (Neumorfismo)
- Efectos de brillo
- Ilusión de profundidad 3D

¿Cuál es la diferencia entre blur y spread?

Blur y spread controlan diferentes aspectos:

Radio de Blur:
- Controla suavidad de sombra
- Valor alto = bordes más suaves
- 0 = sombra nítida
- Afecta gradiente de sombra
- Ajuste más común

Radio de Spread:
- Controla tamaño de sombra
- Positivo = sombra más grande
- Negativo = sombra más pequeña
- 0 = mismo tamaño que elemento
- Expande/contrae uniformemente

Ejemplos:
Sombra nítida: blur: 0, spread: 0
Sombra suave: blur: 20px, spread: 0
Efecto brillo: blur: 20px, spread: 5px
Flotante: blur: 40px, spread: -10px

¿Cuándo debo usar sombras inset?

Las sombras inset aparecen dentro del elemento:

Casos de uso:
- Estados de botón presionado
- Estilo de campos de entrada
- Diseño Neumorfismo
- Efectos de profundidad interior
- Elementos hundidos

Sintaxis:
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);

Consejos de diseño:
- Combina con sombra exterior para 3D
- Usa para estados :active de botones
- Excelente para inputs de formulario
- Crea aspecto 'tallado'

Neumorfismo:
box-shadow:
inset 5px 5px 10px #d1d1d1,
inset -5px -5px 10px #ffffff;

¿Cómo creo efectos de sombra populares?

Estilos de sombra populares:

Material Design Elevation:
- Sombra 1: 0 1px 3px rgba(0,0,0,0.12)
- Sombra 2: 0 1px 2px rgba(0,0,0,0.24)

Tarjeta flotante:
0 20px 40px -10px rgba(0,0,0,0.2)

Brillo Neón:
0 0 20px #ff00ff,
0 0 40px #ff00ff

Sombra suave:
0 10px 30px rgba(0,0,0,0.1)

Sombra dura:
5px 5px 0 #000

Neumorfismo:
box-shadow:
10px 10px 20px #d1d1d1,
-10px -10px 20px #ffffff;

¡Esta herramienta incluye estos presets para uso rápido!

Características Principales

• Vista previa en vivo con actualizaciones instantáneas
• Ajustar desplazamiento horizontal y vertical
• Controlar radio de blur y spread
• Personalizar color de sombra y opacidad
• Alternar sombras inset/outset
• Agregar múltiples capas de sombra
• 8 estilos de sombra predefinidos
• Personalizar color de caja y radio de borde
• Copiar código CSS listo para usar
• Soporte de color RGBA para transparencia
• Presets de sombra Material Design
• Efectos de Neumorfismo y brillo
• Procesamiento 100% del lado del cliente