Cómo crear un gradiente CSS (lineal, radial o cónico)
Publicado el 14 de septiembre de 2026 · 2 min de lectura
Los gradientes CSS admiten varias formas y cualquier número de puntos de color, pero visualizar el resultado exacto solo a partir del código es difícil. Esta herramienta te da una vista previa en vivo mientras eliges colores, ángulo y tipo de gradiente.
Probar Generador de degradados CSSPasos
- 1
Abre el Generador de gradientes CSS
Ve al generador de gradientes.
- 2
Elige un tipo de gradiente
Elige lineal, radial o cónico.
- 3
Ajusta tus colores y ángulo
Elige un color inicial y final, un color intermedio opcional, y el ángulo para gradientes lineales o cónicos.
- 4
Copia el CSS
Pega la regla de fondo generada directamente en tu hoja de estilos.
Preguntas frecuentes
Sí — añade un punto de color intermedio para un gradiente de tres colores, junto con los colores inicial y final.
El lineal transiciona a lo largo de un ángulo recto, el radial se expande hacia afuera desde un punto central, y el cónico barre alrededor de un punto central como una rueda de color — cada uno da un efecto visual claramente diferente.
Sí — renderiza el CSS generado real, así que la vista previa es exactamente lo que verás una vez que copies el código en tu proyecto.
Como ves el gradiente real renderizado en vivo, no hay conjeturas al traducir una imagen mental a la sintaxis CSS correcta.