Generador de gradiente CSS
Diseñe gradientes de fondo CSS sin memorizar la sintaxis. Cambie entre tipos lineales y radiales, establezca un ángulo para degradados lineales (grados) y elige dos paradas de color en 0% y 100%. La vista previa se actualiza instantáneamente; copia la declaración completa de fondo o imagen de fondo en su hoja de estilo. Admite entrada de color HEX con validación.
Ángulo (°)
Color 1
Color 2
CSS
background: linear-gradient(135deg, #6f9b96 0%, #e8c4b8 100%);
¿Cómo crear un degradado
1. Elige un degradado lineal o radial.
2. Para lineal, establezca el ángulo en grados (0 = de abajo hacia arriba, 90 = de izquierda a derecha).
3. Ingrese los colores inicial y final (HEX).
4. Copia el CSS de la tarjeta de resultados en tu proyecto.
Ejemplos de degradados
Banner de héroe lineal (135 grados)
Verde azulado #6F9B96 a melocotón #E8C4B8 a 135°: una diagonal común en los encabezados de las páginas de destino. Úsalo como fondo en una sección de ancho completo.
Foco radial
Tipo radial con centro claro y borde oscuro: simula una viñeta: gradiente radial (círculo, #fff 0%, #333 100%).
Desvanecimiento vertical (180 grados)
Ángulo 180 para Desvanecimiento de arriba a abajo del color de la marca al blanco: útil detrás de las barras de navegación.
¿Cuándo usar esta herramienta
• Cuando crea un prototipo de fondos de interfaz de usuario y quieres comentarios visuales instantáneos.
• Cuando olvida si el ángulo de 90 grados va de izquierda a derecha o de arriba a abajo.
• Cuando necesitas copiar y pegar CSS para CodePen, valores arbitrarios de Tailwind o diseño handoff.
¿Cuándo elegir otra cosa
• Cuando necesites más de dos paradas de color: extienda el CSS copiado manualmente o use una aplicación de diseño.
• Cuando desee gradientes cónicos (barrido), no admitidos aquí.
• Cuando necesites variantes automáticas de modo oscuro: duplique y ajuste los colores por separado.
Detenciones de color en detalle
Una parada es color más posición opcional: #ff0000 0%, #0000ff 50%, #00ff00 100%. El navegador interpola RGB entre paradas. Las paradas intermedias crean puestas de sol con bandas o rayas multimarca. Comience con dos paradas aquí, luego pegue y agregue una tercera parada en devtools hasta que se ve bien.
Ángulos de gradiente lineal
CSS mide los ángulos en el sentido de las agujas del reloj desde “arriba” (0 grados). Eso difiere de la clase de matemáticas donde los ángulos suelen comenzar desde la derecha. Si un degradado se ve mal girado, suma o resta 90 grados. Utilice la edición en vivo de devtools junto con este generador para realizar ajustes finos.
Rendimiento y alternativas
Los gradientes son compatibles con GPU en los navegadores modernos. Para clientes muy antiguos, establezca un color de fondo sólido alternativo al color de parada más claro antes de la línea de degradado.
Preguntas frecuentes
¿Cuál es la sintaxis de CSS? ¿para un degradado lineal?
fondo: gradiente lineal (ángulo, color1 0%, color2 100%); El ángulo está en grados; los colores son paradas a lo largo de la línea.
¿Cómo funcionan las paradas de color?
Las paradas marcan dónde se ubica cada color en la línea de degradado. 0% es el comienzo, 100% el final. Esta herramienta repara dos topes; agregue más en su editor si es necesario.
¿Lineal vs. radial?
Combinaciones lineales a lo largo de una línea recta. El radial se fusiona hacia afuera desde un punto central: bueno para círculos y puntos débiles.
¿Qué valores de ángulo son comunes?
0 grados hacia arriba, 90 grados hacia la derecha, 180 grados hacia abajo, 135 grados en diagonal: común para cartas y héroes.
¿Establece fondo o imagen de fondo?
La salida usa el fondo taquigrafía adecuada para la mayoría de los divs; puedes dividirlo en una imagen de fondo si anulas otras capas.
¿Se envían los colores a un servidor?
No. La vista previa se renderiza localmente.
¿Es gratis?
Sí, no se necesitas cuenta.