Generador de degradados CSS
Crea un degradado CSS lineal o radial con hasta seis paradas de color, míralo en vivo y copia la regla background-image lista para usar. Sin registro y sin salir de tu navegador.
Controles del degradado
CSS generado
background-image: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%);Qué es un degradado CSS
Un degradado CSS es una imagen que el navegador genera a partir de una lista de paradas de color, así que no necesita ningún archivo y se mantiene nítida en cualquier tamaño. linear-gradient() avanza en línea recta y radial-gradient() se expande desde un punto central.
Este generador escribe el degradado por ti: elige el tipo y mueve las paradas, y tanto la vista previa como la regla background-image que copias salen de la misma cadena.
Cómo crear un degradado CSS
- Elige Lineal o Radial.
- Ajusta el ángulo si el degradado es lineal; en radial no hace falta.
- Edita cada parada de color: elige un color, escribe un código hex o arrastra el control de posición. Con Añadir parada llegas hasta seis.
- Copia la regla background-image y pégala en tu hoja de estilos.
Ejemplos de degradados CSS
Degradado lineal de dos colores
lineal, 90deg, #3B82F6 a #8B5CF6
linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%)
Degradado radial
radial, circle, #FDE047 a #EF4444
radial-gradient(circle, #FDE047 0%, #EF4444 100%)
Tres paradas de color
lineal, 90deg, #0EA5E9 a #22D3EE a #A7F3D0
linear-gradient(90deg, #0EA5E9 0%, #22D3EE 50%, #A7F3D0 100%)
UrsaKit frente a otros generadores de degradados
| Criterio | UrsaKit | cssgradient.io | css-gradient.com | ColorGradient.dev |
|---|---|---|---|---|
| Precio | Gratis | Gratis con anuncios | Gratis | Gratis |
| Lineal y radial | Sí | Sí | Sí | Sí |
| Paradas arrastrables | Sí | Sí | Parcial | Sí |
| Copia una regla CSS completa | Sí | Sí | Parcial | Sí |
| Requiere cuenta | No | No | No | No |
| Sube algún dato | No | No | No | No |
Preguntas frecuentes
¿Qué diferencia hay entre un degradado lineal y uno radial?
El lineal avanza en línea recta según su ángulo; el radial se expande desde un punto central, ideal para focos y viñetas.
¿Cómo se mide el ángulo?
Igual que en la especificación CSS: 0deg apunta arriba, 90deg a la derecha, 180deg abajo y 270deg a la izquierda.
¿Cuántas paradas de color puedo usar?
Aquí entre dos y seis. CSS admite cualquier número, pero dos o tres cubren casi todos los degradados reales.
¿Puedo pegar el resultado directamente en mi CSS?
Sí. La salida es una declaración background-image completa, lista para una clase, un estilo en línea o un design token.
¿El generador sube mis colores?
No. El degradado se construye y se previsualiza en tu navegador y no se envía nada a un servidor.
¿Por qué la vista previa coincide con el código copiado?
Ambas leen la misma cadena generada, así que lo que ves es exactamente lo que copias.