Generador de box-shadow
Compón sombras por capas con vista previa en vivo: elevación suave, desplazamientos nítidos, sombras interiores y preajustes listos para usar.
Cómo funciona el generador de box-shadow
Diseña sombras CSS por capas con controles para cada capa y vista previa en vivo, y copia CSS listo para producción.
Sombras por capas
En el mundo real, la elevación rara vez es una sola sombra. Apila hasta seis capas (una sombra de contacto ajustada y otras ambientales más amplias) para lograr una profundidad natural en lugar de un efecto sucio.
Control total
Cada capa tiene desplazamiento X/Y, desenfoque, expansión, color y opacidad, además de un interruptor inset para sombras interiores. Todo se actualiza en la vista previa en vivo mientras arrastras.
Vista previa en claro y oscuro
Las sombras se perciben de otra forma sobre superficies oscuras. Cambia el fondo de la vista previa para comprobar ambos temas antes de publicar.
Preajustes para empezar
Los preajustes “Suave”, “Por capas”, “Nítida”, “Flotante” e “Interior” te dan un buen punto de partida: ajústalos a tu gusto y copia el CSS final en un clic.
Preguntas frecuentes
offset-x offset-y blur spread. Los desplazamientos mueven la sombra, blur suaviza su borde y spread la agranda o la encoge antes del desenfoque. Un color (idealmente con canal alfa) completa el valor.
Un único desenfoque grande se ve plano y gris. Combinar una sombra pequeña y nítida (de contacto), una mediana (luz principal) y una grande y suave (ambiental) imita cómo funciona la luz de verdad y mantiene los bordes definidos.
inset dibuja la sombra dentro del elemento: se usa para botones presionados, campos de entrada hundidos y la mitad oscura de las superficies neumórficas.
Animar box-shadow obliga a repintar cada fotograma. Para una elevación suave al pasar el cursor, anima mejor la opacity de un pseudoelemento que ya tenga la sombra final.