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!

¿Cómo convierto esta sombra a Tailwind o React?

Usa el selector de formato sobre el cuadro de código para alternar entre CSS, Tailwind y React. El botón Copiar copia el formato activo.

Tailwind (valor arbitrario):
Tailwind no permite espacios dentro de valores arbitrarios, así que los espacios dentro de una capa se convierten en guiones bajos y las comas mantienen unidas las múltiples capas:
shadow-[0_10px_30px_rgba(0,0,0,0.2)]
La herramienta también genera las clases bg-[...] y rounded-[...] correspondientes.

React / JSX (objeto de estilo en línea):
JSX necesita una clave camelCase y un valor de cadena entre comillas:
style={{ boxShadow: '0 10px 30px rgba(0,0,0,0.2)', backgroundColor: '#ffffff', borderRadius: 8 }}

Las sombras multicapa e inset se serializan correctamente en los tres formatos.

¿Por qué mi sombra se ve diferente entre navegadores o en pantallas retina?

Las pequeñas diferencias de renderizado son normales:

- Redondeo subpíxel: el blur y el spread se rasterizan distinto en cada motor. En pantallas retina (2x/3x) una sombra de 1px puede verse más suave; ajusta el blur o usa offsets en píxeles enteros para mantener la nitidez.
- Espacios de color: rgba() se interpreta en sRGB en todas partes, así que prefiere rgba/hex sobre nombres de color.
- box-shadow vs filter: drop-shadow(): box-shadow sigue el border-box rectangular del elemento. Para formas no rectangulares (PNG con transparencia, clip-path, iconos SVG) usa filter: drop-shadow(), que traza el contorno alfa real.

Accesibilidad: las sombras son decorativas. Nunca dependas solo de una sombra para indicar estado (foco, error); combínala con un borde o cambio de color visible y mantén suficiente contraste.

Rendimiento: los radios de blur muy grandes son costosos de repintar, sobre todo al animar. Evita animar box-shadow directamente en elementos grandes; anima la opacidad de un pseudo-elemento o usa will-change: transform solo en los pocos elementos que lo necesiten.

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