Generar sombras CSS (box-shadow)

Cómo usar Generador de sombras CSS

1. 1

   Elige una sombra de partida

   Haz clic en un preajuste como Suave, En capas o Elevación 2, o ajusta la capa predeterminada.

2. 2

   Da forma a cada capa

   Selecciona una capa y define su desplazamiento X e Y, desenfoque, expansión, color, opacidad e interior.

3. 3

   Compruébala sobre tu superficie

   Cambia el tamaño de la caja, el radio de esquina y los colores para que coincidan con el elemento que estás diseñando.

4. 4

   Copia el CSS

   Copia la declaración box-shadow o la clase de Tailwind en tu código.

Acerca de Generador de sombras CSS

La propiedad CSS box-shadow admite una lista de capas, cada una con un desplazamiento horizontal y vertical, un radio de desenfoque, una distancia de expansión, un color y la palabra clave opcional inset. Conseguir una profundidad natural exige equilibrar todos esos valores en dos o más capas, algo difícil de lograr editando números en una hoja de estilos. Este editor muestra el resultado en una caja de vista previa en vivo mientras arrastras los controles deslizantes, y te escribe la declaración y una clase de Tailwind shadow-[…].

Añade tantas capas como quieras, oculta una temporalmente para comparar, súbela o bájala (la primera capa de la lista es la que se dibuja encima) o conviértela en interior para botones pulsados y campos de formulario. Los desplazamientos van de −100 a 100 píxeles, el desenfoque llega hasta 200 píxeles y la expansión va de −100 a 100, y cada color tiene su propia opacidad. La expansión negativa es el truco de las sombras suaves modernas: recoge la sombra bajo el elemento para que solo asome un resplandor delicado por debajo.

La caja de vista previa se puede redimensionar y admite cualquier radio de esquina, color de caja y color de fondo, de modo que puedes valorar la sombra sobre la superficie real de tu diseño, incluidos los temas oscuros, donde las sombras necesitan más opacidad o un resplandor de color.

Incluye doce puntos de partida: cuatro niveles de elevación de Material Design, una sombra suave de una sola capa, una sombra difuminada de cinco capas, un desplazamiento nítido neobrutalista, neumorfismo, una sombra interior, un resplandor de color, un anillo de contorno al estilo del foco y una tarjeta flotante. Los degradados están en la otra pestaña; las sombras de texto y el filtro drop-shadow() no se incluyen.

Generador de sombras CSS: preguntas frecuentes