Sobre la herramienta: Generador de degradados CSS
Un degradado CSS (gradient) une dos o más colores de forma suave usando solo CSS, sin archivos de imagen. Se usa en botones, banners y fondos de tarjetas: pesa menos que una imagen y se ve nítido en cualquier tamaño de pantalla.
En este generador, al arrastrar el dial de ángulo o las paradas de color cambian a la vez la vista previa y el código linear-gradient, radial-gradient o conic-gradient.
Cómo se usa
- Elige el tipo de degradado: Lineal, Radial o Cónico.
- En los lineales y cónicos, gira el dial o usa el control deslizante o el número para fijar el ángulo. En los radiales, elige la forma y la posición del centro.
- Arrastra los círculos de la barra de color para mover los colores y toca un hueco o + Color para añadir más. También puedes escribir el color y la posición (%) exactos en la lista.
- Cuando te guste el resultado, toca Copiar CSS y pégalo en tu hoja de estilos.
Tipos de degradado y sintaxis
| Tipo | Código de ejemplo |
|---|---|
| Lineal | linear-gradient(90deg, #4f46e5 0%, #22c1c3 100%) |
| Radial | radial-gradient(circle at center, #fff 0%, #000 100%) |
| Cónico | conic-gradient(from 0deg at center, red, yellow, red) |
En un degradado lineal, 0deg va de abajo arriba (↑), 90deg de izquierda a derecha (→) y 180deg de arriba abajo (↓). El porcentaje tras un color es el punto donde ese color aparece puro. Si pones dos colores en la misma posición, obtienes un borde nítido, que es como se crean las rayas.
Consejos de diseño
- Dos colores complementarios muy saturados suelen dar un gris apagado en el centro. Usa colores cercanos en el círculo cromático o añade un color más claro entre ambos.
- Si pones texto sobre un degradado, comprueba que se lee bien en la parte más clara y en la más oscura. El comprobador de contraste del conversor de colores te ayuda.
- La primera línea, background: color sólido;, es un color de respaldo para navegadores muy antiguos.
Preguntas frecuentes
¿Funciona en todos los navegadores?
linear-gradient y radial-gradient funcionan sin el prefijo -webkit- en todos los navegadores actuales. conic-gradient es compatible desde Chrome 69, Safari 12.1 y Firefox 83.
¿Puedo aplicar un degradado al texto?
Sí. Combina el código background copiado con background-clip: text; -webkit-background-clip: text; color: transparent; y el texto tomará el degradado.
¿Cuántos colores puedo añadir?
Esta herramienta admite hasta 12 paradas de color. CSS en sí no tiene límite.