⭐ 0
🔍
Text Image PDF & Docs Audio Music Electronics Time Utilities Validators Esoteric Games

CSS Linear Gradient Generator

Build CSS gradients visually: linear, radial or conic type, angle slider and up to six color stops with a live full-width preview and copyable code.

90°
Processing... 0%

Result

This page opens the gradient generator with the linear type already selected. Drag the angle slider to rotate the fade, adjust the color stops, and the full-width preview plus the CSS line update on every input.

linear-gradient() paints colors along a straight line — the most used gradient in CSS by far. 90deg runs left to right, 180deg top to bottom, and any angle in between gives a diagonal; the stop positions in percent decide where each color band starts blending into the next.

When the preview looks right, copy the background line into your stylesheet. If you want a starting point instead of a blank slate, the sunset, ocean and pastel preset pages open this same tool with proven color pairs already loaded.

🛡️
Executed in Browser

Your files and inputs never leave this device. Processing runs completely offline. 100% Secure.

Accepted Formats & Rules

  • Gradient type select (linear, radial, conic) with an angle slider for linear and conic modes.
  • Color stop list: two stops to start, add or remove up to six, each with its own color picker and position in percent.
  • Copyable background CSS line plus ready-made preset pages for sunset, ocean and pastel gradients.

Key Benefits

✓ The full-width preview repaints on every change — type, angle and each color stop — so the CSS you copy is exactly what you saw.
✓ Up to six color stops with individual positions cover everything from a simple two-color fade to complex multi-band backgrounds.
✓ One declaration, three engines: switch between linear, radial and conic without rebuilding your stops.

Use Cases

  • • Compose a hero-section background by dragging the angle and color stops instead of hand-editing linear-gradient() and reloading.
  • • Compare the same color stops as linear, radial and conic gradients with one switch — the stops carry over between types.
  • • Grab a proven combination from the sunset, ocean or pastel preset page and tweak it into your brand colors.