CSS Box-Shadow Builder
Understand CSS Box-Shadow Builder
Construye declaraciones CSS box-shadow a partir de controles de desplazamiento, desenfoque, expansión, color e inset, con soporte para apilar varias capas.
How it works
La sintaxis es `box-shadow: [inset] desplazamiento-x desplazamiento-y desenfoque expansión color`. Los desplazamientos mueven una copia de la caja del elemento; la expansión agranda o encoge esa copia antes de desenfocarla; el desenfoque suaviza después el borde a lo largo de aproximadamente la distancia indicada, centrado en el borde, de modo que alrededor de la mitad cae dentro de la forma y la otra mitad fuera. Varias sombras se separan por comas y se pintan de delante hacia atrás, así que la primera de la lista queda encima, y por eso una profundidad realista se consigue apilando una sombra pequeña y cerrada sobre otra grande y difusa en lugar de con un único desenfoque grande.
When to use it
- Construir una escala de elevación para un sistema de diseño, donde cada nivel es un par consistente de sombras apiladas
- Crear una sombra interior para un botón pulsado, un hueco o un campo de formulario
- Dibujar un borde de un píxel con una sombra de expansión y desenfoque cero, que no afecta a la maquetación como sí lo hace un borde real
- Reproducir una sombra de un archivo de diseño sin descifrar a mano sus valores de desplazamiento y desenfoque
Watch out for
- box-shadow sigue la caja de borde y su border-radius, no el dibujo que hay dentro. Para un PNG transparente o un icono SVG lo que quiere es `filter: drop-shadow()`, que sigue la silueta del canal alfa.
- Las sombras inset se dibujan dentro de la caja de relleno y las recorta el borde. Una sombra interior en un elemento sin relleno puede quedar casi por completo oculta tras su propio contenido.
- Los radios de desenfoque grandes son caros de pintar y se recalculan en cada repintado. Una docena de sombras de 60 px en una lista con desplazamiento tiene un coste medible en la tasa de fotogramas de dispositivos modestos.
- Una sombra en un elemento recortado desaparece. Tanto clip-path como `overflow: hidden` en un ancestro recortan la sombra, porque una sombra se pinta fuera de la caja del elemento.
Frequently Asked Questions
¿Cómo se aplica una sombra de caja en CSS?
Añada box-shadow: desplazamiento-x desplazamiento-y radio-de-desenfoque color a cualquier elemento. Ejemplo: box-shadow: 0 4px 12px rgba(0,0,0,0.15) crea una sombra suave. Use el constructor para ajustar los deslizadores y copiar la propiedad CSS exacta, sin memorizar la sintaxis.
¿Cómo se crea una box-shadow en CSS?
La sintaxis es: box-shadow: desplazamiento-horizontal desplazamiento-vertical radio-de-desenfoque radio-de-expansión color. Un desplazamiento vertical positivo proyecta la sombra por debajo del elemento; uno negativo, por encima. El radio de desenfoque controla la suavidad (0 = borde duro). Añada la palabra clave "inset" delante de los desplazamientos para una sombra interior.
¿Puedo superponer varias sombras de caja?
Sí: separe por comas varios valores de box-shadow: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.08). Las sombras se dibujan de delante hacia atrás (la primera queda encima). Superponer una sombra pequeña y nítida con otra grande y difusa produce una profundidad material realista.
How to Use CSS Box-Shadow Builder
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.