¿Qué es box-shadow y cómo hago una sombra de tarjeta bonita?
box-shadow es una propiedad CSS que añade una sombra alrededor de un elemento. Le das cuatro números (offset X, offset Y, blur, spread), un color y tienes una sombra. En la práctica esos números son difíciles de inventar en tu cabeza, así que ayuda ver el resultado en vivo y jugar con sliders.
Aquí eliges un preset (Material elevation 1-5, neumorphism, brutalist) o construyes el tuyo. Cada elemento puede tener múltiples sombras apiladas como capas (lista a la derecha), lo que te da la profundidad más rica estilo Apple o Material.
Pulsa "Copiar" y pega la regla CSS lista en tu hoja de estilos.
Cómo usar
- Pulsa un preset de la galería (Material 1-5, neumorphism, glow, long shadow) para arrancar desde un efecto funcional.
- A la derecha ves una lista de capas. Pulsa una capa para editarla. El botón más añade una nueva.
- Sliders: X e Y = offset de la sombra, blur = cuán suave es el borde, spread = cuánto se extiende. Color más alpha al lado.
- Activa inset para hacer la sombra interna (parece un hueco, se usa en neumorphism).
- Copia la regla CSS y pégala en tu hoja de estilos o en el prop `style={{}}` de React.
Cuándo ayuda
Las sombras son el detalle más infravalorado que empuja una UI de plana a premium. Tres palabras de mal en UI son "plano sin profundidad":
- Tarjetas de producto en una tienda. Material elevation 2-3 se ve sacado directamente de Google, sin gráficos.
- Modal / dialog. Sombra más fuerte (elevation 4-5) levanta el modal de la página, te da el feel Apple.
- Botones neumórficos. Dos sombras a la vez, una clara arriba-izquierda, una oscura abajo-derecha, hace que el botón parezca relieve.
- Estado hover de tarjeta. Sombra pequeña en reposo, mayor en hover, un `transition: box-shadow 200ms` y tienes la micro-interacción clásica.
- Brutalista (duro, agudo, sin blur). Una sombra negra 8/8/0/0 clava el look retro-cool.
- Glow / neón. Una sombra 0/0/24/4 en un color vivo con alpha hace un botón call-to-action que brilla.
Para elegir un color de sombra, mira conversor de color. Para redondeo de esquinas de tarjeta mira generador border-radius.