Crea hermosas sombras CSS con un editor visual en tiempo real. Ajusta desplazamiento, desenfoque, expansión y color — copia código CSS listo para usar al instante. 100% gratuito y del lado del cliente.
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15);El Generador de Sombras CSS es una herramienta visual para crear hermosas sombras proyectadas alrededor de elementos HTML. A diferencia de las bibliotecas de sombras estáticas, esta herramienta te permite ajustar cada parámetro — desplazamiento horizontal, desplazamiento vertical, radio de desenfoque, radio de expansión y color — en tiempo real. Genera sintaxis CSS estándar compatible con todos los navegadores modernos. Todo el procesamiento ocurre en tu navegador — no se envían datos a ningún servidor.
Una sombra CSS es un efecto visual que añade una sombra alrededor del marco de un elemento HTML. Se define con la propiedad box-shadow y consta de desplazamiento horizontal, desplazamiento vertical, radio de desenfoque, radio de expansión y color. Las sombras crean profundidad, elevación y jerarquía visual en diseños web.
El radio de expansión controla el tamaño de la sombra. Un valor positivo expande la sombra, haciéndola más grande que el elemento. Un valor negativo la reduce. Es el parámetro clave para crear sombras duras y definidas versus sombras suaves y difusas.
Una sombra interior aparece dentro del borde del elemento, creando la ilusión de profundidad o un bisel interior. Se usa comúnmente para efectos de botón presionado, grabado en tarjetas y brillos interiores. Activa la opción "Sombra Interior" para cambiar entre sombras exteriores e interiores.
Sí. La sintaxis box-shadow generada sigue el estándar CSS y funciona en todos los navegadores modernos incluyendo Chrome, Firefox, Safari, Edge y navegadores móviles. No se necesitan prefijos de proveedor en versiones actuales.