Sombras CSS

box-shadow con vista previa

Sin base de datos: AIMRAN no guarda tus archivos, textos ni resultados

¿Qué es Sombras CSS?

Este generador te ayuda a diseñar sombras para botones, tarjetas y ventanas de tu web sin escribir código a mano. Mueve los deslizadores y verás cómo cambia la sombra al momento.

Puedes combinar varias capas para lograr sombras más realistas, partir de estilos ya preparados y copiar el resultado en CSS o como clase de Tailwind.

Cómo se usa

  1. Elige un estilo de partida: Suave, Elevada, Nítida, Capas, Interior o Brillo.
  2. Selecciona una capa y ajusta desplazamiento X e Y, desenfoque, extensión, color y opacidad.
  3. Añade más capas o activa «Interior (inset)».
  4. Cambia el radio de las esquinas y el fondo claro u oscuro de la vista previa.
  5. Copia el CSS o la clase de Tailwind.

Ventajas

Detalles técnicos

Genera la propiedad box-shadow de CSS con la sintaxis [inset] desplazamiento-x desplazamiento-y desenfoque extensión color, en píxeles y con el color convertido a rgba() según la opacidad. Las capas se separan por comas y se pintan en orden, la primera encima. La salida para Tailwind CSS usa un valor arbitrario shadow-[…] con los espacios sustituidos por guiones bajos. La vista previa aplica además border-radius ajustable de 0 a 60 px. Los estilos predefinidos combinan sombras de contacto y de ambiente de baja opacidad, o capas que se duplican en desplazamiento y desenfoque para un efecto de elevación natural.

Preguntas frecuentes

¿Cómo se pone una sombra en CSS?

Con la propiedad box-shadow, por ejemplo box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); que indica desplazamiento horizontal, vertical, desenfoque y color.

¿Qué es una sombra inset?

Es una sombra interior: se dibuja dentro del elemento en lugar de fuera, como si estuviera hundido. Se activa con la palabra clave inset.

¿Se pueden poner varias sombras a un elemento?

Sí, separándolas con comas en box-shadow. Combinar varias capas suaves da un aspecto más realista que una sola sombra fuerte.

¿Cómo uso la sombra en Tailwind?

Copia la clase de la sección Tailwind, del tipo shadow-[0px_4px_12px_0px_rgba(0,0,0,0.04)], y pégala en el atributo class del elemento.

¿Qué diferencia hay entre desenfoque y extensión?

El desenfoque (blur) difumina el borde de la sombra. La extensión (spread) la agranda o la encoge antes de difuminarla.

Más herramientas de Desarrolladores