Generador de degradados CSS
Añade dos o más puntos de color para generar al instante código CSS de linear-gradient o radial-gradient con vista previa en vivo. Ajusta el ángulo y las posiciones libremente y copia el código con un clic.
Consejos de uso
- Puedes añadir hasta 6 puntos de color y ajustar libremente el color y la posición (%) de cada uno para crear degradados complejos con varios colores.
- En un degradado lineal, 0 grados apunta de abajo hacia arriba y 90 grados de izquierda a derecha; usa el control deslizante para ajustarlo de forma intuitiva.
- Los degradados radiales no tienen ángulo: los colores se irradian hacia afuera desde el centro en forma circular.
- Pulsa "Copiar CSS" para copiar el código generado directamente al portapapeles y pegarlo en tu hoja de estilos.
Preguntas frecuentes
A propósito — por qué los degradados CSS reemplazaron a las imágenes
Antes de CSS3, los fondos con degradado en la web solían crearse como imágenes PNG o JPEG hechas en un editor de imágenes. Ese enfoque tenía inconvenientes reales: peticiones adicionales que ralentizaban la carga de la página, resultados borrosos al estirar la imagen en diseños responsivos, y la necesidad de reexportar toda la imagen solo para ajustar un color.
Cuando los navegadores implementaron la sintaxis de linear-gradient y radial-gradient a principios de la década de 2010, esos problemas prácticamente desaparecieron. Al describirse por completo en texto, los degradados son ligeros, se mantienen nítidos a cualquier tamaño y pueden recolorearse editando solo unos valores en la hoja de estilos.
Las primeras implementaciones requerían distintos prefijos de proveedor (-webkit-, -moz-, -o-, etc.) y una sintaxis ligeramente distinta según el navegador, por lo que había que escribir varias versiones con prefijo de la misma regla. Ahora que el W3C ha estandarizado la sintaxis, la versión sin prefijo funciona de forma consistente en todos los navegadores principales.