Los resultados se ofrecen solo con fines informativos y pueden contener errores. Verifica la información importante de forma independiente. El uso de esta herramienta es bajo tu propia responsabilidad.
Qué hace esta herramienta
El Generador de Sombras CSS construye un box-shadow con controles deslizantes para el desplazamiento horizontal, el desplazamiento vertical, el desenfoque, la extensión, el color y la opacidad. La caja de vista previa se actualiza mientras arrastras y la línea de salida queda lista para copiar. Empieza con una sombra suave 10px por debajo de la caja, 20px de desenfoque y negro al 25 %.
Las cuatro longitudes se escriben en el orden de CSS: desplazamiento x, desplazamiento y, radio de desenfoque, radio de extensión. Los desplazamientos positivos mueven la sombra a la derecha y hacia abajo; los negativos, a la izquierda y hacia arriba. El desenfoque suaviza el borde, y la extensión agranda o reduce la sombra antes de desenfocarla. El color se escribe como rgba(), así que la opacidad va incluida y la sombra se funde con cualquier fondo.
Cuándo usarla
- Dar profundidad a tarjetas, modales y desplegables en un diseño plano.
- Replicar los niveles de elevación de un sistema de diseño como Material Design.
- Añadir un efecto sutil de foco o de hover a los botones.
- Crear un resplandor de color usando un desplazamiento cero y un color vivo.
Ejemplo práctico
Entrada
X 0, Y 10, desenfoque 20, extensión 0, color #000000, opacidad 25 %Salida
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);Preguntas sobre esta herramienta
¿Cómo hago una sombra interior?
Añade la palabra clave inset al principio del valor: box-shadow: inset 0px 2px 6px 0px rgba(0, 0, 0, 0.25);. Así la sombra se dibuja dentro de la caja, lo que va bien para botones pulsados y campos de formulario.
¿Puedo combinar varias sombras?
Sí, sepáralas con comas. Una elevación realista suele usar dos: una sombra pequeña y nítida para el borde y otra grande y suave para la profundidad, por ejemplo 0 1px 2px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.12).
¿Por qué mi sombra se ve gris y sucia sobre un fondo de color?
El negro puro con poca opacidad desatura los colores que tiene debajo. Para un resultado más limpio, usa un tono más oscuro del color de fondo en lugar de negro.
¿Las sombras ralentizan la página?
Las sombras estáticas apenas cuestan. Animar una sombra grande y desenfocada puede hacer perder fotogramas en dispositivos lentos; en su lugar, anima la opacity de un pseudoelemento que lleve la sombra.
¿Esta herramienta es gratuita?
Sí, es gratis. Sin registro ni correo electrónico. Obtén el resultado en esta página.
¿Cómo obtengo el resultado?
Usa la herramienta en esta página. El resultado aparece aquí, sin envío por correo electrónico.