Generador de sombras de caja
Sombras de caja CSS en capas con vista previa en vivo: configura desplazamiento, desenfoque, expansión, color y opacidad, apila múltiples sombras y copia el CSS.
CSS generado
CSS
box-shadow: none;
Sombras activas
Aún no hay sombras. Ajusta los controles deslizantes y haz clic en Agregar a la pila de sombras.
Cómo funciona
Este generador de sombras de caja te permite crear, apilar y previsualizar visualmente múltiples capas de sombra de caja en CSS: configura el desplazamiento X e Y, desenfoque, expansión, color, opacidad y sombra interior, luego agrega cada capa a una pila que se combina en una sola declaración separada por comas.
- Formar una sombra
Configura el desplazamiento, desenfoque, expansión, color y opacidad, y activa la palabra clave inset si es necesario.
- Agregar a la pila
Repite para superponer varias sombras en el mismo elemento y lograr mayor profundidad.
- Copia el CSS
Cada capa de la pila se combina en una sola declaración box-shadow.
Sintaxis de box-shadow
Cada capa de sombra acepta hasta cinco valores, con el color al final:
box-shadow: offset-x offset-y blur-radius spread-radius color;
Agrega la palabra clave inset antes de los desplazamientos para dibujar la sombra dentro del cuadro delimitador del elemento en lugar de fuera de él. Separa las capas múltiples con comas; la primera capa listada se renderiza encima.
Desenfoque versus expansión
- Radio de desenfoque: qué tan suave es el borde de la sombra. Valores más altos crean un brillo más difuso; 0 produce un borde duro.
- Radio de expansión: expande o contrae la forma de la sombra antes de aplicar el desenfoque. Una expansión positiva hace que la sombra sea más grande que el elemento; una negativa la reduce, lo cual es común para un efecto flotante suave y recogido.
Superposición de sombras para dar profundidad
Una sola sombra grande suele verse plana. Las sombras de interfaces reales generalmente tienen dos o tres capas: una sombra ajustada, oscura y de baja opacidad cerca del elemento para simular contacto, y una sombra más grande, suave y de menor opacidad más alejada para dar profundidad ambiental. El ajuste predefinido Flotante demuestra esto con dos capas superpuestas.
Nota sobre rendimiento
box-shadow sigue el border-radius del elemento al que se aplica, no la forma de ningún elemento hijo. Muchas sombras grandes y desenfocadas superpuestas en elementos con desplazamiento pueden ser lentas de redibujar en celulares de gama baja; filter: drop-shadow() es una alternativa compuesta por GPU que vale la pena probar para sombras en imágenes o SVG.
Preguntas frecuentes
¿Cómo genero una sombra de caja CSS con desplazamiento y desenfoque personalizados?
Usa los controles deslizantes para configurar el desplazamiento X, el desplazamiento Y, el desenfoque y la expansión en píxeles, elige un color y una opacidad para la sombra, y luego haz clic en Agregar a la pila de sombras. El código CSS se actualiza inmediatamente abajo. Por ejemplo, una sombra suave para tarjeta podría verse así: box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0,25);
¿Cuál es la diferencia entre desenfoque y expansión en box-shadow?
El desenfoque controla la suavidad del borde de la sombra; valores más altos crean un resplandor más difuso. La expansión agranda o reduce la sombra antes de aplicar el desenfoque: una expansión positiva hace que la sombra sea más grande que el elemento, mientras que una negativa la encoge. Una sombra con 30 px de desenfoque y -10 px de expansión produce un efecto flotante realista con el borde duro retraído.
¿Cómo creo una sombra interior para que un elemento parezca presionado?
Activa el interruptor de Sombra interior antes de hacer clic en Agregar a la pila de sombras. Una sombra interior se dibuja dentro del cuadro de borde del elemento, haciendo que parezca hundido o presionado. El CSS incluye la palabra clave inset: box-shadow: inset 0px 2px 8px 0px rgba(0, 0, 0, 0,30);
¿Puedo apilar múltiples sombras de caja en un solo elemento?
Sí. Agrega cada capa de sombra individualmente; la herramienta mantiene una lista y las combina con comas en el resultado. Apilar sombras es una función estándar de CSS: box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 20px 40px -10px rgba(0,0,0,.3); Varias capas crean una profundidad más rica que una sola sombra.
¿Cuál es una limitación de box-shadow?
box-shadow no respeta el border-radius de un elemento secundario; solo sigue el border-radius del elemento al que se aplica la propiedad. Valores de desenfoque muy altos en muchas sombras apiladas también pueden ralentizar el desplazamiento en celulares de baja potencia, por lo que vale la pena probar filter: drop-shadow() como una alternativa más ligera para sombras en imágenes o SVG.