Generador de sombras CSS
Diseñar sombras de caja visualmente.
Cómo usar
Comienza desde un preajuste o una capa, luego agrega capas para profundidad. Activa el inset para efectos presionados/neumórficos. Copia el valor separado por comas en box-shadow.
Preguntas frecuentes
¿Puedo apilar varias sombras?
Sí: añade capas para combinar una sombra ambiental suave con una sombra de contacto definida, o apila brillos de colores. Cada capa tiene su propio desplazamiento, desenfoque, expansión, color y selector inset.
¿Qué hacen los preajustes?
Puntos de partida con un clic: elevación de tarjeta al estilo de Stripe, neumorfismo elevado o presionado, profundidad Material y un brillo suave; ajusta los controles deslizantes después de aplicarlos.
¿Cómo uso el resultado?
Copia la línea box-shadow en tu CSS. Las distintas capas se separan con comas, tal como esperan los navegadores.
Última actualización: