Generador de degradados CSS
Elige el tipo de degradado, mueve las paradas de color y copia el CSS. La vista previa se actualiza al instante y nada sale de tu navegador.
0%
100%
CSS
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
Sobre esta herramienta
Un degradado CSS es una imagen que el navegador pinta a partir de paradas de color, así que se adapta a cualquier tamaño de elemento sin descargar un archivo. El lineal avanza según un ángulo, el radial se expande desde un centro y el cónico gira alrededor de él, útil para anillos tipo tarta y ruedas de color.
Las posiciones de las paradas son porcentajes de ese recorrido. Dos paradas en la misma posición crean un borde neto en lugar de una mezcla: así se construyen las rayas y los fondos partidos. Todos los navegadores lanzados desde 2016 admiten las tres funciones sin prefijos.
Preguntas frecuentes
- ¿Qué significa el ángulo?
- 0deg apunta arriba, 90deg a la derecha y 180deg abajo. Es la dirección hacia la que avanza el degradado, no de la que viene.
- ¿Cómo consigo un borde neto en vez de una mezcla?
- Da la misma posición a dos paradas, por ejemplo rojo 50% y azul 50%. El color cambia sin transición.
- ¿Puedo aplicar un degradado al texto?
- Sí: pon el degradado como background y añade background-clip: text y color: transparent al mismo elemento.