Todo se ejecuta localmente en tu navegador. Nada se sube.

Generador de sombras CSS

Usa esta herramienta para crear sombras CSS apiladas con vista previa. Los resultados se actualizan al instante y permanecen en tu dispositivo.

Todo se ejecuta localmente en tu navegador. Nada se sube.

Crea sombras CSS apiladas

Elemento 1

Vista previa de sombra

Generador de sombras CSS

Usa esta herramienta para crear sombras CSS apiladas con vista previa.

El procesamiento ocurre en JavaScript dentro del navegador, así que puedes probar datos privados sin enviarlos a un servicio externo.

Cómo usar esta herramienta

  1. Ajustar la primera sombra.

    Establezca la opción desplazamiento x, desplazamiento y, desenfoque, extensión, color, alfa y inset.

  2. Apila más sombras

    Agrega sombras adicionales y reordenalas para crear profundidad en capas.

  3. Copia el CSS

    Obtenga una vista previa del resultado y copie la declaración box-shadow generada en su hoja de estilo.

FAQ

¿Este generador de sombras de caja sube algo?

No. El CSS se genera localmente en su navegador.

¿Puedo crear múltiples sombras?

Sí. Agregue sombras apiladas y reordenelas antes de copiar el CSS final.

¿Admite sombras inset?

Sí. Cada sombra tiene su propia palanca inset.

¿Qué CSS genera?

El resultado es una declaración box-shadow que se puede pegar en CSS.