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%.
¿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.
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.
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.