CSS Box Shadow Generator

CSS Box Shadow Generator ofrece a los diseñadores y desarrolladores un editor visual para CSS box-shadow con vista previa en tiempo real. El panel de vista previa muestra una tarjeta blanca sobre un fondo gris con la sombra actual aplicada y se actualiza instantáneamente cuando cambia cualquier control. Cinco controles deslizantes controlan el desplazamiento horizontal, el desplazamiento vertical, el radio de desenfoque, el radio de extensión y la opacidad de las sombras. El interruptor insertado cambia entre sombras paralelas y sombras interiores. El sistema multicapa es la característica clave: el botón Agregar sombra apila hasta 5 capas de sombra independientes con controles individuales. Se muestran doce ajustes preestablecidos prediseñados como miniaturas de tarjetas para que pueda ver el efecto antes de hacer clic. La sección de resultados muestra el valor completo de la propiedad box-shadow, la regla CSS completa lista para pegar y la clase equivalente de Tailwind, donde exista.

Características clave

• Vista previa en tiempo real

  La vista previa de la tarjeta en vivo se actualiza instantáneamente a medida que cambia cualquier control de sombra.

• Cinco controles deslizantes

  Controles deslizantes de desplazamiento horizontal, desplazamiento vertical, desenfoque, extensión y opacidad por capa de sombra.

• Sombras multicapa

  Apila hasta 5 capas de sombras independientes compuestas en la vista previa.

• Alternar sombra insertada

  Cambia entre sombras paralelas exteriores y sombras interiores insertadas.

• 12 ajustes preestablecidos de diseño

  Los ajustes preestablecidos prediseñados se muestran como miniaturas con la sombra ya aplicada para una carga instantánea.

• Salida de clase de viento de cola

  Muestra el equivalente de Tailwind CSS cuando corresponda.

1. 1

   Ajustar los controles deslizantes

   Arrastre los controles deslizantes de desplazamiento, desenfoque y extensión para dar forma a la sombra. Vea la actualización de la vista previa en tiempo real.

2. 2

   Elige un color

   Haga clic en el selector de color para elegir el color de la sombra y use el control deslizante de opacidad para controlar la transparencia.

3. 3

   Alternar inserción (opcional)

   Habilite Insertar para crear un efecto de sombra interior prensado o en relieve.

4. 4

   Agregar más capas (opcional)

   Haga clic en Agregar sombra para apilar hasta 5 capas y obtener efectos de sombra compuestos complejos.

5. 5

   O cargar un preset

   Haga clic en cualquier miniatura preestablecida para cargar su configuración en el editor.

6. 6

   Copia el CSS

   Haga clic en Copiar para obtener la regla CSS completa o solo el valor de la sombra del cuadro.

Explore these tools that work great alongside CSS Box Shadow Generator: