Generador de degradados y sombras CSS
Crea degradados y sombras de caja con vista previa y copia el código CSS.
Degradado
Puedes usar de 2 a 5 paradas, y se generan ordenadas por posición de menor a mayor.
Vista previa
CSS generado
Sombra de caja
Puedes usar hasta 4 capas de sombra.
Vista previa
CSS generado
Cómo usar el generador de degradados y sombras CSS
La vista previa y el código CSS se actualizan en cuanto cambias un valor. Cuando te guste el resultado, pulsa Copiar CSS y pégalo en tu hoja de estilos.
Límites
- Los colores solo admiten hexadecimal en la forma #RGB, #RGBA, #RRGGBB o #RRGGBBAA, y el # inicial puede omitirse.
- Los números fuera de rango se ajustan al valor permitido más cercano. El ángulo es 0–360, la posición y la opacidad son 0–100, los desplazamientos y la expansión van de -200 a 200 y el desenfoque es 0–200.
- Los números se usan con hasta 2 decimales.
- Los degradados radiales son siempre círculos que se expanden desde el centro.
Preguntas frecuentes
¿Mi entrada se envía a un servidor?
No. Todo se calcula dentro de este navegador y tus datos y resultados no se guardan ni se suben. Al recargar se vuelve a los valores iniciales.
¿Cambiar el orden de las paradas cambia el resultado?
El CSS generado siempre se ordena desde la posición más baja. Las paradas en la misma posición conservan el orden que introdujiste.
¿Cómo se aplica la opacidad?
Si el color de la sombra tiene un alfa en un hexadecimal de 8 dígitos, se multiplica por la opacidad (%) y se genera como rgba(). Si no es transparente, se genera como hexadecimal de 6 dígitos.