Generador de gradientes CSS
Crea un gradiente a ojo y copia el CSS.
Arrastra un tirador para mover un punto, o haz clic en la barra para añadir uno. Los tiradores también se mueven con las flechas del teclado.
Puntos de color
- %
- %
- %
Funciona en tu navegador. Nada de lo que escribes se envía a ningún sitio.
- Arrastra para colocar puntos
- Lineal, radial y cónico
- 8 preajustes listos para usar
Cómo hacer un gradiente CSS
- Elige un preajuste, o fija el color de cada punto.
- Arrastra los tiradores en la barra, y haz clic en la barra para añadir un punto.
- Copia el CSS y pégalo en tu hoja de estilos.
Comparativa de tipos de gradiente
| Tipo | Cómo se extiende | Función CSS |
|---|---|---|
| Lineal | A lo largo de una línea recta con un ángulo | linear-gradient() |
| Radial | Hacia afuera desde un punto central | radial-gradient() |
| Cónico | Alrededor de un punto central, como una rueda de color | conic-gradient() |
Compatibilidad de navegador por tipo de gradiente
| Tipo de gradiente | Necesita al menos |
|---|---|
| Lineal y radial | Cualquier navegador actual, hasta IE10 con un prefijo |
| Cónico | Chrome 69, Firefox 83, Safari 12.1 |
El CSS que da esta página siempre empieza con una línea background-color simple primero, así que un navegador que no pueda dibujar el gradiente muestra igualmente el color del primer punto en lugar de una caja en blanco.
Consejos para gradientes más suaves
- Añade un tercer punto en el medio para que el gradiente se lea como dos colores mezclándose a través de un tercero, en lugar de un degradado plano de dos tonos.
- Para un borde nítido en lugar de una mezcla, da a dos puntos vecinos la misma posición.
- 0deg va de abajo hacia arriba y 90deg de izquierda a derecha. Suma 180 a cualquier ángulo para invertir la dirección de un gradiente sin volver a escribir cada punto.
- Ajusta la forma radial a la caja: círculo para elementos cuadrados, elipse para los anchos, así el gradiente no se ve estirado.
Preguntas frecuentes sobre Generador de gradientes CSS
¿Cómo hago un gradiente en CSS?
Fija la propiedad background a una función de gradiente, como background: linear-gradient(90deg, #ff7e5f, #feb47b). El primer valor es la dirección, y luego vienen los colores, cada uno con una posición opcional.
¿Cuál es la diferencia entre gradientes lineales, radiales y cónicos?
Un gradiente lineal cambia de color a lo largo de una línea recta, uno radial se extiende desde un punto central, y uno cónico gira alrededor de un punto central como una rueda de color o un gráfico circular.
¿Hacia dónde apunta el ángulo?
0deg va de abajo hacia arriba, 90deg de izquierda a derecha, 180deg de arriba hacia abajo y 270deg de derecha a izquierda. En los gradientes cónicos, el ángulo fija dónde empieza el giro.
¿Cómo consigo una línea nítida entre dos colores?
Da a dos puntos vecinos la misma posición, como rojo 50% y azul 50%. El color cambia de golpe en ese punto en lugar de mezclarse.
¿Funcionan los gradientes CSS en todos los navegadores?
Los gradientes lineales y radiales funcionan en cualquier navegador actual. Los gradientes cónicos necesitan Chrome 69, Firefox 83 o Safari 12.1 en adelante. El CSS de aquí empieza con una línea de color sólido como alternativa.
¿Puedo animar un gradiente CSS?
Puedes animar background-position o background-size en un gradiente de mayor tamaño para un efecto de movimiento. Animar los colores de los puntos en sí necesita la regla CSS @property o un pequeño script, ya que los navegadores no pueden interpolar por sí solos entre dos valores de gradiente completos.
¿Se puede usar un gradiente como color de texto?
Sí. Copia el CSS del gradiente de aquí en un fondo, y luego añade background-clip: text y color: transparent al elemento de texto para que el gradiente se vea a través de las letras en lugar de rellenar una caja.