Parámetros
X: 0, Y: 4, Blur: 6, Spread: -1, rgba(0,0,0,0.1)
CSS
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
Herramientas de diseño
Generador de box-shadow CSS — Controles visuales
Ajusta visualmente el desplazamiento, el desenfoque, la propagación, el color, la opacidad y el inset. Previsualiza en vivo y genera el CSS de box-shadow para tarjetas, botones y superposiciones.
CSSSombrabox-shadow
Añadir esta herramienta a favoritos
No se ha seleccionado un modo de almacenamiento de favoritos.
Acciones rápidas
Copia la URL de esta herramienta o abre la hoja de compartir del sistema en un dispositivo compatible.
设计配色
Generador de box-shadow CSS
水平偏移 (X) 0px
垂直偏移 (Y) 10px
模糊半径 (Blur) 20px
扩散程度 (Spread) -5px
透明度 10%
预览
Casos de uso
- Añade una sombra exterior a un botón o tarjeta
- Depura sombras de superposición y de contorno de borde duro
- Activa inset para estilos de control hundidos
Cómo usar
- Usa los deslizadores para el desplazamiento X/Y, el desenfoque y la propagación
- Define el color y la opacidad de la sombra; activa inset si lo necesitas
- Previsualiza y luego copia el CSS generado
Entrada y salida de ejemplo
FAQ
¿Admite sombras inset?
Sí. Activa Inset para generar un box-shadow con la palabra clave inset y actualiza la vista previa en vivo.
¿Puedo crear sombras por capas?
La interfaz genera una capa cada vez. Para varias capas, ajusta más de una vez y une los valores de box-shadow con comas.
Herramientas
Herramientas relacionadas
Continúa con otra herramienta traducida para una tarea cercana.
Generador de degradados CSS
Generador de degradados CSS — Lineal, radial, cónico
Crea visualmente degradados CSS lineales, radiales y cónicos. Ajusta el ángulo y las posiciones de parada, añade varias paradas y copia el CSS para fondos, botones y transiciones de marca.
CSS Degradado Fondo
Conversor de color
Conversor de color — HEX, RGB y HSL en línea
Convierte colores entre HEX, RGB, HSL, HWB, CMYK y variables CSS en tu navegador. Incluye un selector de color y un generador de colores aleatorios para entregas de diseño, trabajo con hojas de estilos y alineación de colores de marca.
Color HEX RGB
Generador de glassmorphism
Generador de glassmorphism — backdrop-filter CSS
Ajusta visualmente el desenfoque, la opacidad, el color de fondo y la opacidad del borde para generar CSS de cristal esmerilado con prefijo -webkit. Útil para tarjetas, barras de navegación y capas de modal.
CSS Glassmorphism backdrop-filter