🌫️

generador sombra CSS

Crea valores CSS box-shadow visualmente. Ajusta desplazamiento, desenfoque, propagación, color y opacidad con vista previa en vivo. Apila varias capas y copia el CSS final.

Herramientas de generación Se ejecuta localmente No se envían datos
cssbox-shadowgeneradordiseño
Capas
Desplazamiento X4px
Desplazamiento Y4px
Desenfoque8px
Expansión0px
%
Interior

¿Qué es el generador sombra CSS?

El generador sombra CSS te permite crear visualmente valores de box-shadow y copiar el CSS al instante. Ajusta desplazamientos, desenfoque, expansión, color y opacidad con vista previa en vivo.

Cómo usar el generador sombra CSS

  1. Ajusta los controles deslizantes de desplazamiento X/Y, desenfoque y expansión.
  2. Elige un color de sombra y establece la opacidad.
  3. Activa Interior para un efecto de sombra interna.
  4. Añade más capas para sombras complejas.
  5. Copia el CSS y pégalo en tu proyecto.

Herramientas relacionadas

🌈
generador gradientes CSS
Crea degradados CSS lineales y radiales
🖌️
selector de color
Selecciona y convierte colores entre formatos
🎨
Formateador CSS
Formatear y embellecer código CSS
Más información▾
Parámetros de box-shadow
  • Desplazamiento X/Y —desplaza la sombra horizontal y verticalmente
  • Desenfoque —cuán suave/difuminado es el borde de la sombra
  • Expansión —expande o contrae el tamaño de la sombra
  • Interior —renderiza la sombra dentro del elemento
Preguntas frecuentes
¿Puedo añadir varias sombras?

Sí. Haz clic en 'Añadir capa' para apilar varios valores de box-shadow, combinados con comas en el CSS generado.

¿Cómo uso el CSS generado?

Haz clic en 'Copiar CSS' y pega la propiedad box-shadow directamente en tu archivo CSS o bloque de estilos.