Generador de Sombras
Genere sombras CSS de un vistazo
Ajustes
Vista previa
box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.2);
Acerca de la herramienta
Este generador escribe la propiedad CSS box-shadow a partir de unos ajustes sencillos. Sirve para dar relieve a una tarjeta, un botón o una ventana modal, o para crear un efecto hundido con una sombra interior. La vista previa muestra el resultado sobre un bloque blanco con fondo gris claro, y el código de debajo sigue cada cambio.
Para cada sombra eliges el color, la opacidad en porcentaje, el desplazamiento horizontal y vertical, el desenfoque y la expansión, en píxeles, además de la opción Interior. Puedes superponer hasta diez sombras, que la herramienta reúne en una sola declaración. El color se convierte a rgba() para incluir la opacidad. Un desenfoque negativo, que CSS no admite, se deja en cero.
Cómo usarla
- En Ajustes, elige el Color y la Opacidad (%) de la sombra.
- Ajusta Desplazamiento X, Desplazamiento Y, Desenfoque y Expansión, y marca Interior para una sombra interna.
- Pulsa Agregar Sombra para superponer más sombras, hasta diez.
- Revisa la Vista previa y pulsa Copiar CSS, o Limpiar para volver a la sombra por defecto.
Preguntas frecuentes
¿Cómo se aplica la opacidad?
El selector de color del navegador no admite transparencia, así que la herramienta separa el color y la opacidad y después los combina en un valor rgba(), por ejemplo rgba(0, 0, 0, 0.2) para un negro al 20 %.
¿Para qué combinar varias sombras?
Superponer una sombra corta y nítida con otra amplia y difusa da un relieve más natural que una sola sombra. En box-shadow las sombras van separadas por comas, y la primera de la lista se dibuja encima de las demás.
¿Qué unidades usa el código?
Los desplazamientos, el desenfoque y la expansión se expresan en píxeles. Los desplazamientos y la expansión admiten valores negativos, por ejemplo para subir la sombra o reducirla; el desenfoque siempre es cero o positivo.
¿Se envían mis sombras a un servidor?
No. El código se calcula en tu navegador, sin ninguna petición de red. La lista de sombras solo se guarda en el almacenamiento local del navegador para que la recuperes en tu próxima visita.