Mis mejores utilidades, ahora en tu móvil.
Accede a todas mis herramientas y proyectos de forma rápida, optimizada y en un solo lugar.
# Diseña sombras CSS visualmente en vez de adivinar valores
Ajustar box-shadow a mano es tedioso. Offset X, offset Y, blur, spread, color, opacidad e inset interactúan de formas sutiles. Este generador visual te permite apilar múltiples sombras, previsualizarlas en vivo y copiar CSS listo para producción. 5 Capas de sombra por elemento
En vivo Previsualización con cada cambio
5 Presets rápidos
# Apila múltiples sombras para profundidad realista
Las sombras del mundo real rara vez son un blur uniforme. Apilar una sombra ajustada cerca del elemento con otra más suave y amplia crea profundidad natural. Usa el botón + para añadir capas y las pestañas para cambiar entre ellas.# Entender cada control
| Control | Valor CSS | Efecto |
|---|---|---|
| Offset X | Primera longitud | Desplazamiento horizontal. Positivo mueve la sombra a la derecha. |
| Offset Y | Segunda longitud | Desplazamiento vertical. Positivo mueve la sombra hacia abajo. |
| Desenfoque | Tercera longitud | Radio de blur. Más grande crea sombras más suaves. |
| Expansión | Cuarta longitud | Expande o encoge la sombra. Negativo encoge. |
| Color y Opacidad | rgba() | Color de sombra con control de opacidad independiente. |
| Interior | inset | Renderiza la sombra dentro del borde del elemento. |
Usa una cuadrícula de fondo sutil
La vista previa muestra una cuadrícula de puntos para ver cómo se extiende la sombra. Usa un spread negativo para mantenerla cerca del elemento.Flujo de trabajo recomendado
Empieza con un preset que coincida con tu dirección de diseño.
Añade capas para construir profundidad realista.
Usa spread negativo en la sombra suave para un efecto de tarjeta flotante.
Copia el CSS generado y pégalo en tu stylesheet.