Desarrollador / CSS
Generador de gradientes CSS
Diseña un gradiente lineal, radial o cónico con vista previa en directo, tantos puntos de color como necesites y ajustes predefinidos; después, copia el CSS.
Generador de gradientes CSS: El generador escribe la declaración background que necesita el navegador para crear el gradiente que ves: linear-gradient con un ángulo, radial-gradient con un círculo o una elipse desde el centro, o conic-gradient trazado alrededor desde un ángulo inicial, cada uno con sus puntos de color en orden. Primero se incluye un color sólido como alternativa para los navegadores demasiado antiguos para dibujar gradientes. El nuevo color se añade en el intervalo más amplio y se mezcla a partir de los colores vecinos, para que el gradiente no presente saltos. Funciona al 100 % en tu navegador, sin subir archivos a ningún servidor.
- Categoría
- Herramientas de desarrollo
- Se ejecuta
- En tu navegador
- Coste
- Gratis · sin registro
- Disponibilidad
- Lista para usar
Funciona por completo en tu navegador
CSS
background: #ff7e5f; background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
La primera línea es un color sólido para navegadores muy antiguos; todos los navegadores actuales usan el gradiente de la segunda línea.
Preajustes
Degradados de aspecto uniforme
Una mezcla entre dos tonos muy diferentes, como del azul al amarillo, pasa por un gris apagado en el centro. Añadir un punto intermedio con un color más brillante lo mantiene vivo. Los degradados entre tonos cercanos, como del naranja al rosa, rara vez necesitan ayuda.
Elige o comprueba los colores con el convertidor de color y añade profundidad a una tarjeta con el generador de sombras de caja.
Texto sobre un degradado
Comprueba que el texto siga siendo legible en ambos extremos del degradado, no solo en el centro. Un degradado más oscuro con texto blanco, o uno sutil detrás de texto oscuro, es más seguro que un arcoíris brillante.
Cómo se usa
- Elige un ajuste predefinido o selecciona lineal, radial o cónico.
- Define el ángulo y ajusta los colores y sus posiciones; añade un color para incluir más puntos.
- Copia el CSS en tu hoja de estilos.
Privacidad y límites
Todo se ejecuta en tu navegador; tu último gradiente solo se guarda en este navegador.
Herramientas relacionadas
Preguntas frecuentes
¿Qué significa el ángulo en un gradiente lineal?
0deg va de abajo arriba, 90deg de izquierda a derecha, 180deg de arriba abajo y 270deg de derecha a izquierda. El gradiente se dibuja en esa dirección, por lo que 135deg va de la esquina superior izquierda a la esquina inferior derecha.
¿Qué es un punto de color?
Es un color y la posición, entre 0% y 100% del gradiente, en la que se alcanza exactamente. Entre dos puntos, los colores se mezclan; colocar dos puntos en la misma posición crea un borde definido en lugar de una mezcla, que es como se forman las franjas.
¿En qué se diferencia un gradiente cónico de uno radial?
Un gradiente radial cambia de color hacia fuera desde el centro, formando anillos. Un gradiente cónico cambia de color alrededor del centro, como las manecillas de un reloj, por lo que resulta útil para ruedas de color y gráficos circulares.
¿Todavía necesito prefijos -webkit-?
No. Todos los navegadores actuales admiten linear-gradient y radial-gradient sin prefijo, y conic-gradient funciona en todos ellos desde 2021. El color alternativo de la primera línea solo sirve para navegadores mucho más antiguos.
Herramienta gratuita · se ejecuta en tu navegador · sin cuenta