Por FreeWebTools Editorial Team Actualizado el 23 de agosto de 2026

🔲

Generador de Box Shadow

Crea sombras CSS visualmente con nuestro generador. Ajusta desenfoque, extensión, color y desplazamiento. Copia el código.

Vista previa

Capas ()

Preajustes

Layer

Desplazamiento horizontal: px

Desplazamiento vertical: px

Radio de difuminado: px

Radio de expansión: px

Color de sombra

Opacidad: %

Interior

Código CSS

Incrustar esta herramienta en tu sitio web

× px

Tema

Color

Fondo

Borde

Color del borde

Radio de borde

Mostrar marca Permitir pantalla completa Modo compacto Activar animaciones Fondo transparente

👁️ Vista Previa

💡 Consejo de integración

Copie el código de incrustación y péguelo en el HTML de su sitio web. La versión responsive se adapta automáticamente a todos los tamaños de pantalla.

0 valoraciones

Califica esta herramienta

✓

Acerca de Generador de Box Shadow

Diseña sombras CSS con un editor visual. Ajusta desenfoque, extensión, desplazamiento y color.

Casos de uso

Agregando profundidad a tarjetas y contenedores

Creando efectos hover para botones

Disenando elementos UI modernos

Haciendo que elementos resalten del fondo

Experimentando con estilos de sombra

Cómo usar

Ajusta desplazamiento horizontal y vertical

Configura radio de desenfoque y extensión

Elige color de sombra y opacidad

Copia el código CSS generado

Consejos Pro

Sombras sutiles se ven más naturales (baja opacidad, poco desenfoque)
Usa multiples sombras para profundidad
Las sombras internas crean efectos de presion

Preguntas frecuentes

Extensión expande o contrae el tamaño de la sombra más allá del elemento.

Que tan suaves o definidos aparecen los bordes. Mayor = más suave.

Si! Apila multiples valores box-shadow separados por comas.

Herramientas populares

No hay más herramientas

Explorar todas las herramientas