CSS Gradient
Generator
Genera degradados CSS hermosos — lineales, radiales o cónicos — y copia el código al instante. Vista previa en vivo al ajustar colores y ángulo.
① Elige tipo y ángulo de gradiente ② Elige dos colores ③ Copia el CSS
background: linear-gradient(135deg, #FF6B6B 0%, #4ECDC4 100%);Transición de colores a lo largo de una línea recta definida por un ángulo (0–360°). 0° va de abajo a arriba, 90° de izquierda a derecha.
Los colores irradian desde un punto central hacia el exterior en forma elíptica o circular. Ideal para efectos spotlight y glow.
Los colores rotan alrededor de un punto central como una rueda de color. Perfecto para gráficos circulares y diseños angulares.
Cómo funcionan los degradados CSS — lineal, radial y cónico
Los degradados CSS se generan completamente por el navegador sin archivos de imagen. Un degradado lineal mezcla color stops a lo largo de un eje: linear-gradient(). Uno radial emana desde un punto focal: radial-gradient(). Uno cónico barre colores angularmente: conic-gradient(). Los tres se aplican con la propiedad background o background-image. Las posiciones de stop (0%–100%) controlan dónde comienza y termina cada color.