Generador de sombras de caja CSS
Crea visualmente los valores de la sombra de caja CSS: ajusta el desplazamiento, el desenfoque, la extensión y el color con una vista previa en tiempo real.
Salida CSS
box-shadow: 0px 4px 12px 0px #00000026;¿Por qué usar el generador de sombras de cajas PixConvert?
Editor visual de sombras de cajas: no hay que adivinar valores, solo arrastrar y previsualizar.
Vista previa en vivo
Visualiza tu sombra en una vista previa realista de la tarjeta; se actualiza instantáneamente con cada cambio de los controles deslizantes.
Múltiples capas de sombra
Superpón varias capas de sombras para lograr efectos de profundidad avanzados. Cada capa se controla de forma independiente.
Sombras insertadas
Activa el modo de inserción para efectos de botón pulsado y estilos de brillo interior.
Color + Opacidad
Selecciona cualquier color de sombra con un control deslizante de opacidad independiente. La salida utiliza RGBA para una transparencia precisa.
Salida CSS lista
El resultado es una cadena de valor CSS válida para box-shadow; péguela directamente en su hoja de estilos o token de diseño.
100% privado
Completamente del lado del cliente: sin servidor, sin recopilación de datos.
Casos de uso de la sombra de la caja
Las sombras crean profundidad y jerarquía en el diseño de interfaces de usuario.
Elevación de la tarjeta
Crea sombras de elevación al estilo Material Design para tarjetas, ventanas modales y paneles.
- Escalas de sombra de elevación 1-24
- Sombras flotantes de los botones de acción
- Sombras superpuestas de diálogo
Profundidad del botón
Añade sutiles sombras paralelas y efectos de pulsación incrustados a los botones para darles profundidad 3D.
- Sombra sutil al pasar el cursor.
- Sombra insertada para el estado pulsado
- Efectos de brillo de colores
Neumorfismo
Crea componentes de interfaz de usuario neumórficos utilizando sombras claras y oscuras en capas.
- Capas de luz y sombra oscura
- Elementos elevados de Soft UI
- Controles cóncavos insertados
Cómo crear una sombra de caja
Ajusta el desplazamiento en X, el desplazamiento en Y, el radio de desenfoque y la dispersión con los controles deslizantes. Elige un color y una opacidad para la sombra.
Vea la actualización de la vista previa en vivo al instante. Copie el valor CSS y péguelo en su hoja de estilos.
Activa o desactiva las sombras internas o apila varias sombras para crear efectos por capas; el resultado está separado por comas y listo para pegar.
Explora más herramientas
Descubre otras herramientas gratuitas que funcionan de maravilla junto con esta.
Generador de degradados CSS
Crea degradados CSS personalizados de forma visual.
Comprobador de contraste
Compruebe las relaciones de contraste de color para cumplir con las WCAG.
Convertidor de color
Convierta instantáneamente los códigos de color HEX, RGB y HSL.
Extractor de paleta de colores
Extrae los colores dominantes de cualquier imagen.
Formateador JSON
Formatee, valide y minimice JSON al instante.
Probador de expresiones regulares
Prueba y depura expresiones regulares en tiempo real.
Preguntas frecuentes
Explicación de la función box-shadow de CSS.
¿Cuáles son los parámetros de la sombra de la caja?
box-shadow: [inset] x-offset y-offset blur-radius spread-radius color. X/Y offset: posición de la sombra. Blur: suavidad (0 = borde duro). Spread: expansión del tamaño (negativo = más pequeño). Inset: dibuja la sombra dentro del elemento.
¿Cómo puedo crear una sombra suave?
Aumenta el radio de desenfoque (20-40 px), mantén la dispersión cerca de 0 y usa un color de baja opacidad (rgba(0,0,0,0.1-0.2)). Desplaza ligeramente (y: 4-8 px). Esto crea la moderna «sombra suave» común en los sistemas de diseño.
¿Puedo superponer varias sombras?
Sí. CSS acepta varios valores de sombra separados por comas: box-shadow: shadow1, shadow2, shadow3. Usa el botón "Añadir capa de sombra" para crear efectos de capas como neumorfismo o brillos multicolores.
¿Cuál es la diferencia entre desenfoque y dispersión?
El desenfoque controla la suavidad del borde de la sombra: a mayor desenfoque, mayor difusividad. La dispersión controla el tamaño de la sombra: una dispersión positiva hace que la sombra sea más grande que el elemento, mientras que una dispersión negativa la hace más pequeña. La dispersión no afecta al desenfoque.
¿Afecta la sombra de la caja al diseño?
No. La sombra de la caja se renderiza fuera del modelo de caja y no afecta el tamaño, la posición ni el flujo del documento del elemento. Si necesita espacio alrededor del elemento para la sombra, utilice margen o relleno.