CSS Gradient Generator Free Online Tool 2026

Last updated March 22, 2026

Gradient Types Reference

• linear-gradient(angle, color1, color2) — straight line transition
• radial-gradient(shape at position, color1, color2) — circular/elliptical
• conic-gradient(from angle at position, color1, color2) — angular sweep
• repeating-linear-gradient() — tiling linear gradient
• repeating-radial-gradient() — tiling radial gradient

The CSS Gradient Generator on TechConverter.me provides a visual interface with draggable color stops, angle controls, and real-time preview. Create any gradient, copy the generated CSS, and paste it directly into your stylesheet.

/* Top to bottom (default) */
.gradient-tb {
  background: linear-gradient(to bottom, #667eea, #764ba2);
}

/* Left to right */
.gradient-lr {
  background: linear-gradient(to right, #f093fb, #f5576c);
}

/* Diagonal */
.gradient-diagonal {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Custom angle */
.gradient-angle {
  background: linear-gradient(72deg, #2563eb, #7c3aed);
}

/* Three-color gradient */
.gradient-3 {
  background: linear-gradient(
    to right,
    #ff6b6b 0%,
    #ffd93d 50%,
    #6bcb77 100%
  );
}

/* Sunset gradient */
.gradient-sunset {
  background: linear-gradient(
    to bottom,
    #1a1a2e 0%,
    #16213e 25%,
    #0f3460 50%,
    #e94560 75%,
    #f5a623 100%
  );
}

/* Rainbow gradient */
.gradient-rainbow {
  background: linear-gradient(
    to right,
    #ff0000, #ff7700, #ffff00,
    #00ff00, #0000ff, #8b00ff
  );
}

/* Centered radial gradient */
.gradient-radial {
  background: radial-gradient(circle, #667eea 0%, #764ba2 100%);
}

/* Spotlight effect */
.spotlight {
  background: radial-gradient(
    circle at 50% 30%,
    rgba(255, 255, 255, 0.3) 0%,
    transparent 60%
  );
}

/* Off-center glow */
.glow {
  background: radial-gradient(
    ellipse at 20% 50%,
    #7c3aed 0%,
    #1a1a2e 70%
  );
}

/* Multiple radial gradients */
.multi-glow {
  background:
    radial-gradient(circle at 20% 30%, rgba(124, 58, 237, 0.4) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(37, 99, 235, 0.4) 0%, transparent 50%),
    #0f172a;
}