Generador de degradados CSS
Crea degradados CSS lineales, radiales y cónicos con todas las paradas de color que quieras. Vista previa en vivo, ajustes predefinidos e ideas aleatorias, exporta CSS, SCSS, SVG o PNG.
Cargando Generador de degradados CSS…
Tus archivos nunca salen de tu dispositivo
Cómo usar Generador de degradados CSS
- 1
Abre Generador de degradados CSS en esta página. Se carga directamente en tu navegador.
- 2
Añade tu archivo, texto o valores y ajusta la configuración.
- 3
Copia o descarga el resultado. No se sube ni se guarda nada.
Acerca de esta herramienta
Este generador de degradados CSS te permite diseñar fondos degradados de forma visual y copiar el código. Elige el tipo de degradado, añade colores, arrastra las paradas a su sitio y ajusta el ángulo: la vista previa y el CSS se actualizan mientras trabajas. Cuando te guste, copia el CSS o expórtalo como SCSS, SVG o imagen PNG.
Cómo hacer un degradado
- Elige lineal, radial o cónico.
- Define los colores y añade tantas paradas de color como necesites.
- Arrastra las paradas o escribe su posición exacta en porcentaje.
- En los degradados lineales y cónicos, ajusta el ángulo (90° va de izquierda a derecha, 180° de arriba abajo).
- Copia el código generado o expórtalo.
¿Sin ideas? Empieza con un ajuste predefinido o haz clic en Random para una combinación nueva al instante, y guarda los degradados que te gusten para más tarde.
Tipos de degradado
- Lineal: los colores se mezclan a lo largo de una línea recta con un ángulo.
linear-gradient(90deg, #6366f1, #ec4899) - Radial: los colores se extienden desde un punto central, en círculo o elipse.
radial-gradient(circle, #fde68a, #f97316) - Cónico: los colores giran alrededor de un centro, como un círculo cromático o un gráfico circular.
conic-gradient(from 0deg, red, yellow, lime, aqua, blue, magenta, red)
Formatos de exportación
- CSS: una propiedad background lista para pegar.
- SCSS: el degradado como variable para tu hoja de estilos.
- SVG: un archivo vectorial para herramientas de diseño e ilustraciones.
- Imagen PNG: para lugares que no aceptan CSS, como diapositivas y publicaciones en redes.
Consejos para buenos degradados
- Usa colores vecinos para mezclas suaves. Colores opuestos como rojo y verde pueden volverse gris sucio en el centro; añade una parada intermedia para evitarlo.
- Mantén el texto legible: comprueba el contraste en la parte más clara y la más oscura detrás del texto.
- Paradas duras: pon dos paradas en la misma posición para lograr un borde nítido, útil para rayas.
- Lo sutil es profesional: dos tonos cercanos del mismo color se ven más tranquilos que un arcoíris.
Todos los navegadores modernos admiten degradados lineales, radiales y cónicos sin prefijos. ¿Creas un esquema de color completo? Usa el generador de paletas de colores y añade profundidad con el generador de sombras CSS.
Preguntas frecuentes
¿Cómo creo un degradado CSS?
Elige un tipo, al menos dos colores, ajusta las paradas y el ángulo, y copia el CSS generado en tu hoja de estilos como fondo.
¿Qué diferencia hay entre degradados lineales, radiales y cónicos?
El lineal mezcla a lo largo de una línea recta, el radial se extiende desde un punto central y el cónico gira los colores alrededor de un centro como un círculo cromático.
¿Cómo hago un degradado con un borde nítido?
Pon dos paradas de color en la misma posición. Los colores cambian de golpe en ese punto en lugar de mezclarse.
¿Puedo descargar un degradado como imagen?
Sí. Expórtalo como imagen PNG, o como SVG si necesitas un archivo vectorial.
¿Los degradados CSS funcionan en todos los navegadores?
Sí. Los degradados lineales, radiales y cónicos funcionan en todas las versiones actuales de Chrome, Edge, Firefox y Safari sin prefijos.
¿Puedo guardar mis degradados?
Sí. Guarda tus degradados favoritos y vuelve a abrirlos más tarde en el mismo navegador.