About

CSS gradients require precise color stop coordination. A poorly chosen gradient creates visual noise, reduces text legibility, and increases bounce rates. This tool generates production-ready CSS gradient code using randomized color stops with configurable parameters: gradient type (linear, radial, conic), rotation angle θ from 0° to 360°, and 2 to 5 color stops. Each generated gradient outputs valid CSS that can be pasted directly into a stylesheet. The tool approximates aesthetic harmony by constraining HSL saturation and lightness ranges when the "Pastel" mode is active.

Limitation: conic gradients lack support in IE11 and older browsers. The generated code does not include vendor prefixes. For production use in legacy environments, run the output through an autoprefixer. History is stored locally in your browser and will persist across sessions up to 50 entries.

Formulas

Random color generation uses the HSL color model to ensure perceptual uniformity. The hue H is sampled uniformly across the full spectrum.

H = random(0, 360)°

S = random(S_min, S_max)%

L = random(L_min, L_max)%

For pastel mode: S_min = 40, S_max = 80, L_min = 65, L_max = 80. For vibrant mode: S_min = 60, S_max = 100, L_min = 45, L_max = 65.

HSL to Hex conversion follows the standard algorithm. First convert HSL to RGB:

C = (1 − |2L − 1|) × S

X = C × (1 − |(H ÷ 60) mod 2 − 1|)

m = L − C2

Where C = chroma, X = secondary component, m = lightness adjustment. The RGB channels are then computed based on the hue sector and converted to hexadecimal notation #RRGGBB.

The gradient CSS string is assembled as:

gradient-type(θdeg, color₁ pos₁%, color₂ pos₂%, …)

Where θ is the angle for linear/conic gradients, and each color stop is a hex value at a percentage position along the gradient axis.

Reference Data

Gradient Type	CSS Function	Direction/Shape	Browser Support	Common Use Case
Linear	`linear-gradient()`	Angle or keyword (to right, to bottom-left)	IE10+, all modern	Hero sections, buttons, overlays
Radial	`radial-gradient()`	Circle or ellipse from center/corner	IE10+, all modern	Spotlight effects, card backgrounds
Conic	`conic-gradient()`	Angle from center point	Chrome 69+, FF 83+, Safari 12.1+	Pie charts, color wheels, decorative rings
Repeating Linear	`repeating-linear-gradient()`	Same as linear, tiled	IE10+, all modern	Striped patterns, progress bars
Repeating Radial	`repeating-radial-gradient()`	Same as radial, tiled	IE10+, all modern	Bullseye patterns, texture fills
Repeating Conic	`repeating-conic-gradient()`	Same as conic, tiled	Chrome 69+, FF 83+	Starburst effects, loading spinners

Color Harmony	Rule	Angle Offset	Typical Feel
Complementary	2 colors opposite on wheel	180°	High contrast, vibrant
Analogous	2 - 3 adjacent colors	30° apart	Harmonious, calm
Triadic	3 colors equally spaced	120° apart	Balanced, colorful
Split-Complementary	1 base + 2 adjacent to complement	150° & 210°	Contrast with less tension
Tetradic	4 colors, two complementary pairs	90° apart	Rich, complex
Monochromatic	1 hue, varying S/L	0°	Elegant, subtle

CSS Property	Value Example	Description
`background`	`linear-gradient(135deg, #ff6b8a, #7c83fd)`	Shorthand for gradient background
`background-size`	`400% 400%`	Oversized for animation panning
`background-attachment`	`fixed`	Parallax scroll effect
`background-blend-mode`	`overlay`	Blend gradient with image
`mix-blend-mode`	`multiply`	Blend element with backdrop

Frequently Asked Questions

Pastel mode restricts HSL saturation to 40 - 80% and lightness to 65 - 80%, producing muted, soft tones. Vibrant mode uses saturation 60 - 100% and lightness 45 - 65%, yielding high-intensity colors. The hue range remains 0 - 360° in both modes.

When color stops span opposite sides of the color wheel, the intermediate blend passes through desaturated (grayish-brown) tones. This is inherent to RGB interpolation in CSS. To avoid it, use analogous colors (hues within 60° of each other) or reduce the number of stops to 2. The tool's pastel mode helps mitigate this by keeping lightness elevated.

Conic gradients (conic-gradient()) are supported in Chrome 69+, Firefox 83+, Safari 12.1+, and Edge 79+. They are not supported in Internet Explorer or older mobile browsers. If your audience includes legacy browsers, use a linear-gradient fallback. The generated code does not include fallbacks automatically.

CSS gradients cannot be directly transitioned via the transition property. The standard technique is to set background-size: 400% 400% and animate background-position using @keyframes. This creates a panning effect across an oversized gradient. The tool provides the gradient value; the animation wrapper must be added manually.

The tool renders the gradient onto an HTML5 <canvas> element using the Canvas 2D API's createLinearGradient(), createRadialGradient(), or createConicGradient() methods. The canvas is then converted to a PNG data URL via canvas.toBlob() and triggered as a download. All processing occurs client-side with zero server calls.

The input is validated against the pattern /^#[0-9A-Fa-f]{6}$/. If the value fails validation, the tool rejects the input and displays a toast notification. The previous valid color is retained. Partial inputs like 3-character shorthand (#FFF) are automatically expanded to 6-character form (#FFFFFF).