01
Separar dirección y centro
En el lineal, 0 grados apunta arriba y 90 a la derecha. El cónico tiene su propio ángulo inicial; el radial se controla con círculo o elipse y un centro.
Herramientas HTML y CSS
generador de degradados CSScon vista previa en vivo
Mueve las paradas y cambia la forma; la vista previa y el CSS se actualizan juntos.
generador de degradados CSS
Paradas de color
Parada 1
Parada 2
Declaración CSS
background-image: linear-gradient(90deg, #6366F1 0%, #EC4899 100%);Los colores y el CSS se procesan en esta pestaña; no se sube nada.
Opciones del degradado
El CSS está listo para copiar.
Cuando un fondo combina varias tonalidades, una línea de código no muestra con claridad dónde se mezclan. El generador de degradados CSS permite colocar cada parada y distinguir una transición suave de un borde abrupto.
Para cabeceras, botones o motivos circulares, el generador de degradados CSS conserva los mismos colores mientras comparas las formas lineal, radial y cónica.
Por qué usar este generador de degradados CSS
Compara tres geometrías con la misma paleta y corrige cada parada a la vista.
Una paleta, tres recorridos
El generador de degradados CSS conserva colores y porcentajes al cambiar de tipo. Solo aparecen los controles de ángulo, forma y centro que afectan al modo elegido.
No copiar código desactualizado
Al mover una parada se regeneran la muestra y la declaración. Un HEX inválido atenúa el resultado anterior e impide copiarlo hasta corregirlo.
Tres detalles que cambian el resultado
02
Situar las paradas con precisión
Arrastra un tirador o escribe su porcentaje. Dos colores en la misma posición forman una línea nítida en lugar de una mezcla gradual.
03
Comprobar si la salida está al día
La generación automática viene activada. Al desactivarla puedes cambiar varios valores y ejecutar con Ctrl/Cmd+Intro; Copiar permanece bloqueado hasta entonces.
Forma, paradas y código en un editor
Lineal, radial y cónico
Prueba un fondo direccional, un brillo central o un anillo de color con las mismas paradas.
De dos a ocho paradas
Cambia el HEX de seis dígitos, la opacidad y la posición de cada color o mueve sus tiradores.
Una declaración CSS estándar
Copia background-image tal como se ve en la muestra; los colores translúcidos se escriben como rgba().
Límites de entrada y salida
- Entre dos y ocho paradas
- No se pueden borrar las dos últimas. Una eliminación muestra antes la vista previa, exige confirmación y permite deshacer una vez.
- Solo colores HEX de seis dígitos
- Introduce #RRGGBB y la opacidad por separado. Un color o porcentaje fuera de rango bloquea Copiar; aquí no se convierten formatos de color.
- Una sola capa
- El generador de degradados CSS produce un background-image estándar. No importa imágenes o CSS, no apila capas ni exporta PNG, Tailwind o prefijos antiguos.
- No calcula el contraste del texto
- El brillo cambia según la zona del fondo. Comprueba la legibilidad donde vaya a aparecer el texto.
Preguntas sobre el generador de degradados CSS
¿Cómo hacer un degradado CSS de varios colores?
Añade paradas y ajusta sus colores y porcentajes. El generador de degradados CSS admite de dos a ocho y muestra cada cambio en la vista previa.
¿Qué diferencia hay entre degradado lineal, radial y cónico?
El lineal avanza en una dirección, el radial sale de un centro y el cónico gira alrededor de él. Las paradas se conservan al cambiar.
¿Cómo cambiar el ángulo de un degradado?
En modo lineal escribe de 0 a 360 grados: 0 apunta arriba y 90 a la derecha. El cónico tiene un ángulo inicial distinto.
¿Cómo añadir una parada de color?
Pulsa Añadir parada. Se coloca en el punto medio del intervalo más amplio; luego puedes arrastrarla o escribir su posición exacta.
¿Dónde pego el código CSS generado?
Copia la línea completa background-image y pégala en la regla del elemento deseado. No necesitas un archivo de imagen.
¿Encontraste un caso sin cubrir?
Prueba el generador de degradados CSS
Vuelve a las paradas, ajusta la forma y copia el CSS cuando la muestra se vea como quieres.