Generador de Degradados CSS
Crea hermosos degradados CSS visualmente. Elige tipo lineal, radial o cónico, agrega paradas de color, ajusta el ángulo y obtén una vista previa en vivo. Copia el CSS listo para usar con un clic.
Paradas de color
Vista previa
CSS
Todo funciona en tu navegador — no se envían datos.
Cómo usar el generador de degradados
- Elige el tipo de degradado — lineal, radial o cónico.
- Establece tus colores y posiciones con los selectores de color y controles de parada.
- Ajusta el ángulo (lineal) o la forma (radial), luego copia el CSS.
Degradados CSS Explicados
Los degradados CSS son renderizados por el navegador usando matemáticas, no píxeles — son infinitamente escalables y se cargan al instante.
Los degradados lineales son los más comunes. Con múltiples paradas, puedes crear efectos complejos como cielos de amanecer o degradados de marca.
Los degradados cónicos rotan los colores alrededor de un punto central — perfectos para gráficos circulares, ruedas de color y patrones de estrella.
Preguntas frecuentes
¿Qué es un degradado CSS? ▼
Una transición de color suave generada en CSS con linear-gradient(), radial-gradient() o conic-gradient() — sin archivo de imagen.
¿Diferencia entre lineal, radial y cónico? ▼
Lineal: a lo largo de una línea recta. Radial: desde un punto central hacia afuera. Cónico: girando alrededor de un punto central.
¿Cómo cambio el ángulo de un degradado lineal? ▼
Usa el campo de ángulo (0–360°). A 90deg el degradado va de izquierda a derecha; a 180deg de arriba abajo.
¿Qué son las paradas de color? ▼
Cada parada define un color y su posición (0%–100%). Múltiples paradas crean degradados multicolor.
¿Cómo creo un degradado transparente? ▼
Establece el alfa de cualquier parada de color a 0 usando rgba() o la palabra clave CSS transparent.
¿Compatibilidad de navegadores? ▼
Todos los navegadores modernos admiten degradados lineales, radiales y cónicos sin prefijos de proveedor.
¿Puedo usar degradados como relleno de texto? ▼
Sí: establece el fondo en tu degradado, luego aplica background-clip: text y color: transparent.
¿Cómo creo un degradado repetitivo? ▼
Usa repeating-linear-gradient() o repeating-radial-gradient() con paradas de color definidas.
Herramientas relacionadas
Generador de Sombras CSS
Diseña sombras box-shadow visualmente con vista previa en vivo. Ajusta desplazamiento, desenfoque, extensión y color, luego copia el CSS listo para usar al instante.
Generador de Glassmorfismo
Genera efectos CSS de glassmorfismo con controles de desenfoque y transparencia. Vista previa en vivo y CSS listo para copiar para diseños de vidrio esmerilado.
Generador de Triángulos CSS
Crea triángulos CSS puros usando la técnica del border hack. Elige dirección, tamaño y color con vista previa y CSS listo para copiar.