Generador de Degradados CSS
Genera hermosos degradados CSS con vista previa en vivo. Crea degradados lineales, radiales y cónicos con colores personalizados, ángulos y posiciones. Copia CSS listo para usar.
Gradient type
135°
Color stops
#667eea0%
#764ba2100%
Presets
CSS Output
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Cómo usar Generador de Degradados CSS
- 1Elige el tipo de degradado: lineal, radial o cónico.
- 2Añade puntos de color y establece sus posiciones.
- 3Ajusta el ángulo o la dirección para degradados lineales.
- 4Copia el CSS generado para usarlo en tu proyecto.
ZenovayAnalytics
Descubre qué hacen de verdad tus visitantes.
- Seguimiento de visitantes en tiempo real
- Privacidad primero, sin aviso de cookies
- Configurado en dos minutos
Herramientas relacionadas
Generador de Degradados CSS
Crea hermosos degradados CSS con un editor visual. Degradados lineales, radiales y cónicos.Generador de Sombra de Caja CSS
Diseña sombras de caja CSS con controles visuales. Ajusta desplazamiento, desenfoque, expansión y color.Generador de Borde Redondeado CSS
Crea valores de borde redondeado personalizados con controles visuales. Vincula o desvincula las esquinas para ajustes rápidos.Área de Juego CSS Flexbox
Aprende y genera diseños CSS Flexbox visualmente. Ajusta dirección, alineación, envoltura y espaciado en tiempo real.Preguntas frecuentes
¿Qué es un degradado CSS?▾
Un degradado CSS es una transición suave entre dos o más colores, creada sin archivos de imagen. Tipos: linear-gradient() — colores a lo largo de una línea recta en un ángulo especificado; radial-gradient() — colores que irradian hacia afuera desde un punto central; conic-gradient() — colores que se barren alrededor de un punto central (como un gráfico circular, compatible con todos los navegadores modernos); variantes repeating-* que repiten el patrón. Los degradados son valores para la propiedad background-image, no background-color.
¿Cómo funciona linear-gradient?▾
Sintaxis: linear-gradient(dirección, punto-color1, punto-color2, ...). Dirección: ángulo (0deg = abajo hacia arriba, 90deg = izquierda a derecha) o palabra clave (to right, to bottom left). Puntos de color: colores con posiciones opcionales. Ejemplo: linear-gradient(135deg, #ff6b6b 0%, #ffd93d 50%, #6bcb77 100%). Sin posiciones, los puntos se distribuyen uniformemente. Con posiciones: linear-gradient(to right, red 20%, blue 80%) significa 20% rojo, luego transición, luego 80% azul hasta el final.
¿Qué son las sugerencias de color en los degradados?▾
Las sugerencias de color (también llamadas sugerencias de transición o puntos medios) controlan dónde ocurre el punto medio de la transición del degradado. Normalmente, las transiciones son lineales entre paradas — el punto medio está exactamente entre dos colores al 50%. Una sugerencia mueve ese punto medio. Ejemplo: linear-gradient(to right, red, 25%, blue) — el punto medio de la transición rojo-azul está al 25% (más cerca del lado rojo), haciendo que parezca más azul en general.
¿Cuál es la diferencia entre los degradados radiales y cónicos?▾
radial-gradient() irradia desde un punto central hacia afuera en formas elípticas o circulares. Sintaxis: radial-gradient(forma tamaño at posición, colores). Ejemplo: radial-gradient(circle at center, white, black). conic-gradient() barre los colores alrededor de un punto central como una rueda de colores o gráfico circular. Sintaxis: conic-gradient(from ángulo at posición, colores). Ejemplo: conic-gradient(red, yellow, green, blue, red). Ambos admiten puntos de color con posiciones porcentuales.
¿Cómo uso los degradados en Tailwind CSS?▾
Tailwind admite degradados lineales mediante: bg-gradient-to-{dirección} (ej. bg-gradient-to-r) + from-{color} + via-{color} (opcional) + to-{color}. Ejemplo: class="bg-gradient-to-r from-purple-400 via-pink-500 to-red-500". Para degradados radiales/cónicos o degradados personalizados complejos, use la sintaxis de [valor arbitrario]: bg-[radial-gradient(circle,_#ff6b6b,_#4158d0)] o añada un degradado personalizado en tailwind.config.js backgroundImage.