Generador de Sombras CSS (Box Shadow)
Ajusta una sombra (box-shadow) con controles deslizantes y copia el CSS exacto, con vista previa en vivo.
box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.25);
Cómo usar Generador de Sombras CSS (Box Shadow)
- Arrastra los controles de desplazamiento, difuminado y expansión para dar forma a la sombra.
- Establece el color y la opacidad de la sombra, y activa el modo interior si lo necesitas.
- Copia el CSS de box-shadow generado en tu hoja de estilos.
Acerca de Generador de Sombras CSS (Box Shadow)
Diseña una box-shadow de CSS con controles deslizantes y copia la línea exacta cuando se vea bien. Controlas el desplazamiento horizontal y vertical, que mueven la sombra a izquierda o derecha y hacia arriba o abajo; el radio de difuminado, que suaviza su borde; y la expansión, que agranda o reduce la sombra en relación con la caja. Una vista previa en vivo se actualiza mientras arrastras, así que ves cada cambio de inmediato.
Para el color, eliges un color de sombra y ajustas un control deslizante de opacidad por separado, y la herramienta combina ambos en un único valor rgba(), de modo que una sombra gris suave al 20 por ciento de opacidad se ve natural en lugar de un bloque sólido. Un interruptor de modo interior cambia la sombra de estar fuera de la caja a estar recortada dentro de ella, que es como consigues que un campo se vea hundido o un botón se vea presionado.
La vista previa se muestra sobre un fondo a cuadros, y eso es intencional: te permite juzgar con honestidad una sombra suave y semitransparente, tal como caería sobre cualquier página real. Algo que debes saber: genera una sola capa de sombra, no varias sombras separadas por comas apiladas entre sí, y la vista previa muestra el efecto sobre una única caja simple. Combínalo con el generador de degradados CSS para además darle estilo al fondo de la caja.
Preguntas frecuentes
¿Qué controlan el desplazamiento, el difuminado y la expansión?
El desplazamiento mueve la sombra horizontal y verticalmente alejándola de la caja. El difuminado suaviza su borde, así que un difuminado mayor da una sombra más difusa. La expansión cambia el tamaño de la sombra, haciéndola más grande o más pequeña que la caja antes de aplicar el difuminado.
¿Cómo se establece el color de la sombra?
Eliges un color y ajustas un control deslizante de opacidad, y la herramienta los combina en un único valor rgba(). Eso significa que controlas tanto el tono como la transparencia de la sombra, que es lo que hace que una sombra se vea suave y natural en lugar de un bloque duro.
¿Qué hace la opción de interior (inset)?
Mueve la sombra al interior de la caja en lugar de al exterior. Una sombra exterior hace que un elemento parezca elevarse de la página; una sombra interior hace que parezca hundido o presionado, lo cual es útil para campos de entrada, hendiduras y botones presionados.
¿Puedo crear más de una sombra a la vez?
No. Esta herramienta genera una sola capa de sombra. CSS sí permite varias sombras separadas por comas en un mismo elemento, pero tendrías que combinarlas tú mismo; el generador produce una línea de box-shadow limpia a la vez.
¿Por qué la vista previa está sobre un fondo a cuadros?
El fondo a cuadros facilita juzgar una sombra suave o semitransparente, porque puedes ver cuánto se transparenta el fondo. Una sombra que se ve bien sobre blanco podría ser demasiado intensa en otro lugar, y el patrón lo revela.