Generador de Sombra de Caja CSS
Diseña sombras de caja CSS con controles visuales. Ajusta desplazamiento, desenfoque, expansión y color.
Shadow Layers
Shadow 1
0px
4px
12px
-2px
20%
CSS
box-shadow: 0px 4px 12px -2px rgba(0, 0, 0, 0.20);
Cómo usar Generador de Sombra de Caja CSS
- 1Ajusta los controles deslizantes de desplazamiento horizontal y vertical.
- 2Establece el radio de desenfoque y la expansión para controlar la forma de la sombra.
- 3Elige un color de sombra y opacidad.
- 4Activa o desactiva la opción de sombra interna.
- 5Copia el código CSS box-shadow generado.
ZenovayAnalytics
Descubre qué hacen de verdad tus visitantes.
- Seguimiento de visitantes en tiempo real
- Privacidad primero, modo sin cookies disponible
- Configurado en dos minutos
Herramientas relacionadas
Generador de Degradados CSS
Crea hermosos degradados CSS con un editor visual. Degradados lineales, radiales y cónicos.Generador de Borde Redondeado CSS
Crea valores de borde redondeado personalizados con controles visuales. Vincula o desvincula las esquinas para ajustes rápidos.Área de Juego CSS Flexbox
Aprende y genera diseños CSS Flexbox visualmente. Ajusta dirección, alineación, envoltura y espaciado en tiempo real.Generador de CSS Grid
Construye diseños CSS Grid con un editor visual. Define columnas, filas, espacios y extiende celdas por áreas.Preguntas frecuentes
¿Cómo funcionan los valores de box shadow?▾
Box shadow toma desplazamiento-x, desplazamiento-y, radio de difuminado, radio de extensión y color. El desplazamiento controla la posición, el difuminado controla la suavidad y la extensión controla el tamaño. Una extensión negativa hace la sombra más pequeña que el elemento.
¿Puedo añadir varias sombras?▾
Sí. Haga clic en "Añadir sombra" para agregar capas de sombra adicionales. Las sombras múltiples son comunes en el diseño moderno para crear efectos de profundidad y elevación.
¿Qué hace la opción inset?▾
La palabra clave inset cambia la sombra de una sombra exterior (sombra paralela) a una sombra interior. Esto crea una apariencia de elemento presionado o rehundido.
¿Puedo controlar la opacidad de la sombra?▾
Sí. Cada capa de sombra tiene un deslizador de opacidad (0-100%). La herramienta genera valores de color rgba() con la opacidad especificada.
¿Puedo usar esta herramienta en mi teléfono?▾
Sí, el generador de sombras de caja funciona en cualquier navegador móvil moderno. Ajuste los parámetros de sombra con los deslizadores y copie el CSS en cualquier dispositivo.
¿El CSS generado funciona con Tailwind CSS?▾
Sí. Puede usar el valor de box-shadow generado con la sintaxis de valor arbitrario de Tailwind como shadow-[valor] o definirlo como una sombra personalizada en su tailwind.config.js.
¿Cuántas capas de sombra puedo añadir?▾
Puede añadir múltiples capas de sombra para crear efectos de profundidad complejos. Cada capa tiene controles independientes para desplazamiento, difuminado, extensión, color, opacidad e inset, lo que permite diseños de elevación realistas.