Generador de Sombras CSS Gratuito en Línea
Construye sombras CSS visualmente con controles de desplazamiento, desenfoque, extensión y color.
Who uses the Generador de Sombras CSS?
- Desarrolladores de UI generando sombras de tarjetas y botones que coincidan con las especificaciones de su sistema de diseño.
- Estudiantes de CSS explorando propiedades de sombra a través de una interfaz visual con retroalimentación instantánea.
- Diseñadores creando y probando efectos de sombra para maquetas antes de entregarlas a desarrolladores.
How the Generador de Sombras CSS works
Ajusta los controles deslizantes de desplazamiento X, desplazamiento Y, radio de desenfoque y radio de expansión para dar forma a tu sombra.
Haz clic en la muestra de color para elegir un color de sombra, y usa el control deslizante de opacidad junto a él.
Activa Inset para un efecto de sombra interior.
Copia el CSS desde el panel de salida de código.
Tips & tricks
- Esta herramienta genera una sola capa de sombra — para un efecto multicapa (como la elevación de Material Design), genera cada capa aquí por separado y combínalas con comas manualmente.
- Una expansión negativa con mayor desenfoque crea una sombra suave y difusa que se percibe más «flotante» que una sombra con expansión positiva ajustada.
- Las sombras internas funcionan bien para estados de botón presionado — prueba un desenfoque pequeño con un color oscuro de baja opacidad.
- El control deslizante de opacidad controla el canal alfa del color de la sombra, no la opacidad del propio elemento.
Frequently Asked Questions
¿Cuál es la sintaxis CSS de box-shadow?
box-shadow: [inset] desplazamiento-X desplazamiento-Y radio-desenfoque radio-expansión color. Ejemplo: box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1). Varias sombras se separan por comas.
¿Qué hace el radio de expansión?
El radio de expansión agranda o contrae la sombra antes del desenfoque. Valores positivos hacen que la sombra crezca más grande que el elemento; valores negativos la reducen. Una expansión de -4px con un desenfoque de 8px crea una sombra enfocada y direccional.
¿Qué es una sombra interior (inset)?
Marcar la casilla Inset hace que la sombra aparezca dentro del borde del elemento en lugar de fuera. Las sombras internas crean estados de botón presionado/hundido, efectos de tarjeta incrustada y brillos internos.
¿Puede esta herramienta generar varias capas de sombra apiladas, como la elevación de Material Design?
No — esta herramienta genera una capa de sombra a la vez. Para un efecto en capas como la elevación de Material Design (box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0px rgba(0,0,0,0.14), 0 1px 10px 0px rgba(0,0,0,0.12)), genera cada capa aquí por separado y combina los valores separados por comas manualmente.
¿box-shadow afecta el diseño y ocupa espacio?
No. A diferencia de margin o padding, box-shadow no afecta el diseño — los elementos con sombras no empujan a los elementos vecinos. Esto hace que las sombras sean seguras de añadir sin alterar el diseño de la página.
Is my data safe when using the Generador de Sombras CSS?
Completely safe. The Generador de Sombras CSS processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the Generador de Sombras CSS output in commercial projects?
Yes. The Generador de Sombras CSS is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the Generador de Sombras CSS follow official standards?
Yes. The Generador de Sombras CSS is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.