2026topopentools

CSS Gradient Generator

Design linear and radial CSS gradients visually. Pick your colors, drag the angle and stop positions, watch the live preview update, and copy the ready-to-use CSS — all in your browser.

Gradient type
Color stops
%
%
background: linear-gradient(90deg, #16a34a 0%, #2563eb 100%);

Everything runs in your browser — nothing is uploaded. Paste the CSS straight into your stylesheet.

Understanding the CSS Gradient Generator

The CSS Gradient Generator is a free, fully client-side tool for designing linear and radial CSS gradients visually. Choose a gradient type, set the direction with a 0–360° angle slider, and build a palette of color stops — each with its own color picker, hex value, and position percentage. A large live preview shows exactly how the gradient renders as you tweak it, and the matching CSS is generated in real time. When you are happy, copy the complete background declaration with one click and paste it straight into your stylesheet. Nothing is uploaded; everything runs in your browser, so it is fast, private, and works offline once loaded.

How it works

Pick Linear or Radial. For linear gradients, drag the angle slider to set the direction in degrees (0° points up, 90° points right). Add color stops with the Add color stop button — each stop has a color picker, an editable hex field, and a position from 0% to 100%. Drag the sliders or type exact values to fine-tune. The tool sorts your stops by position and assembles a CSS string like linear-gradient(90deg, #16a34a 0%, #2563eb 100%) or radial-gradient(circle, …). The preview box uses that value as its background, so what you see is what you get. Click Copy CSS to grab the full background: line.

Worked example

Starting with two stops — #16a34a at 0% and #2563eb at 100% — and an angle of 90° produces background: linear-gradient(90deg, #16a34a 0%, #2563eb 100%);. Add a third stop, #f59e0b at 50%, and the output becomes background: linear-gradient(90deg, #16a34a 0%, #f59e0b 50%, #2563eb 100%);. Switch to Radial and the same colors give background: radial-gradient(circle, #16a34a 0%, #f59e0b 50%, #2563eb 100%);, spreading from the center outward instead of across an angle.

Tips & common mistakes

  • For smooth two-tone backgrounds, keep the first stop at 0% and the last at 100% so the colors fill the whole element.
  • Use a 135° angle for the classic diagonal look that reads well in hero sections and cards.
  • Add a stop in the middle with the same color as a neighbor to create a soft band or hold a color longer.
  • Radial gradients ignore the angle — they radiate from the center, so use them for spotlight or glow effects.
  • Paste the copied value into a background property; you can also drop it into a style attribute for quick prototyping.
  • Subtle gradients (two close hues) age better in UI than high-contrast ones, which can clash with text.

Related tools

JSON Formatter & ValidatorFormat, beautify, minify, and validate JSON with clear error messages.Base64 Encode / DecodeEncode text to Base64 or decode Base64 back to text, with full Unicode support.URL Encode / DecodePercent-encode or decode text for safe use in URLs and query strings.Hash GeneratorGenerate MD5, SHA-1, SHA-256, and SHA-512 hashes from any text.

Frequently Asked Questions

Does it support radial gradients?

Yes. Switch between Linear and Radial with one click. Linear gradients use the angle slider for direction, while radial gradients spread out from a central circle. The live preview and copied CSS update instantly for either type.

Can I add more than two colors?

Yes. Start with two color stops and add as many as you like — up to eight. Each stop has its own color picker and position percentage, and stops are automatically sorted by position in the generated CSS.

Can I copy the generated CSS?

Yes. The full background declaration, including the background: line, is shown in a code block with a one-click copy button. Paste it straight into your stylesheet or a style attribute — no sign-up needed.