Generador de degradados CSS lineales y radiales gratis
Gratis, sin registro, funciona en tu navegador. Diseña un degradado lineal, radial o cónico con hasta 8 paradas de color, míralo en vivo y copia el CSS. Descárgalo como fondo PNG en tamaños comunes.
Paradas de color
CSS
background: #ff7ac6; background: linear-gradient(135deg, #ff7ac6 0%, #ffe14d 100%);
La primera línea es un color sólido para dispositivos muy antiguos que no pueden mostrar degradados.
Empieza con un ajuste predefinido
Creado en tu dispositivo.
Por qué usar Generador de degradados CSS
- 100% gratis
- Úsala todas las veces que quieras. Sin registro, sin marca de agua, sin instalar nada.
- Privada por diseño
- Lo que escribes se queda en tu navegador y nunca se nos envía.
- Funciona en cualquier dispositivo
- Funciona en tu navegador en Windows, Mac, Linux, Android y iPhone. No necesitas ninguna app.
Cómo usar Generador de degradados CSS
- Elige lineal, radial o cónico, y define la dirección.
- Elige los colores y arrastra cada parada a su lugar.
- Copia el CSS o descarga el degradado como imagen.
Preguntas frecuentes
- ¿Cómo uso el CSS?
- Pégalo en la regla del elemento que quieres colorear. La primera línea es un color sólido de respaldo; la segunda es el degradado.
- ¿Cuál es la diferencia entre lineal, radial y cónico?
- El lineal mezcla los colores a lo largo de una línea recta, el radial se expande desde el centro y el cónico gira alrededor del centro como un círculo cromático.
- ¿Puedo usar transparencia?
- Sí. Escribe un color como rgba(47, 91, 255, 0.5) en una parada.
- ¿Se sube algo?
- No. Los degradados se crean en tu dispositivo.
- ¿Generador de degradados CSS es gratis?
- Sí. Es gratis, sin registro y sin instalar nada.
Herramientas relacionadas
- Generador de paletas de coloresGenera paletas de colores con solo presionar una tecla, bloquea los colores que te gusten o crea una a partir de un color base con armonías análogas, complementarias o triádicas. Exporta como variables CSS, Tailwind o JSON.
- Convertir color HEX a RGBConvierte un color entre HEX, RGB, HSL, HSV y CMYK en un solo paso, incluida la transparencia. Pega un código en cualquier formato o elige un color, luego copia el formato que necesitas y revisa su contraste con el texto.
- Verificador de contraste de colorComprueba si el texto se lee bien sobre su fondo con la relación de contraste WCAG, mira los resultados AA y AAA para texto normal, texto grande y controles, y obtén el color más cercano que sí cumple.