How do I create a CSS linear gradient online?
Pick Linear, set angle and color stops in the visual editor, preview live, then click Copy CSS. You get a valid `linear-gradient(...)` declaration ready for your stylesheet.
Build linear, radial, and conic CSS gradients with a visual editor—drag color stops, set angles, adjust opacity, and copy CSS, inline styles, or Tailwind config instantly.
Linear, radial & conic
All major CSS gradient types with live preview and angle control.
HEX · RGB · HSL
Per-stop color formats, opacity, drag stops, presets, and one-click copy.
Browser-only
Design locally—gradients are not uploaded to a server.
Controls
Click bar to add · Drag stops · Arrow keys to nudge
Select a stop on the bar to edit color and opacity
Live preview
Export
background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%)backgroundImage: {
'gradient': 'linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%)'
}A CSS gradient generator lets you design linear, radial, and conic background gradients visually—then copy ready-to-use CSS without hand-writing color-stop syntax.
CSS gradients are smooth transitions between two or more colors using `linear-gradient()`, `radial-gradient()`, or `conic-gradient()`. Linear blends along a line at an angle; radial spreads from a center point; conic sweeps around a center like a color wheel.
This generator provides a visual editor for color stops (HEX, RGB, HSL, opacity), angles, live preview, presets, random/reverse actions, and exports for CSS, inline styles, and Tailwind. Share designs via URL. All editing runs in your browser—nothing is uploaded to a server.
Concise answers for common searches — definitions, steps, and comparisons.
Pick Linear, set angle and color stops in the visual editor, preview live, then click Copy CSS. You get a valid `linear-gradient(...)` declaration ready for your stylesheet.
Copy the Tailwind export to add a custom backgroundImage key, then reference it with `bg-[your-key]` or extended theme config—no manual angle/stop typing.
Linear gradients interpolate colors along a line at a given angle; radial gradients interpolate outward from a center point. Color stops use percentages (e.g. `#3b82f6 0%, #ec4899 100%`). Modern browsers support these in `background` or `background-image` without vendor prefixes.
Select gradient type. Linear and conic use angle controls; radial radiates from the center.
Click the gradient bar to add stops, drag to reposition, and pick colors for each stop. Use presets for quick hero or UI backgrounds.
Switch preview modes (full bleed, card, button) and light/dark backgrounds to see how the gradient reads in real UI contexts.
Copy CSS `background`, inline style, Tailwind `backgroundImage` entry, or the value only. Use Share to copy a URL with your gradient encoded.
Input
Linear 90°, blue → purple → pink stopsOutput
background: linear-gradient(90deg, #0ea5e9 0%, #6366f1 50%, #ec4899 100%);Common landing-page hero: horizontal sweep across the viewport width.
Input
Linear 180°, light gray stopsOutput
background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);Low-contrast vertical gradient for cards and sidebars without flat gray.
Input
Radial circle, dark center to light edgeOutput
background: radial-gradient(circle, #1e293b 0%, #64748b 100%);Radial mode draws attention to center content—avatars, badges, or modals.
Common real-world scenarios where this tool saves time.
Design bold brand gradients for marketing sites and export copy-paste CSS for your stylesheet or component.
Generate `backgroundImage` entries for tailwind.config.js without memorizing arbitrary value syntax.
Test stop positions and angles before committing tokens—share URLs with teammates for quick feedback.
Create base gradients then pair with the glassmorphism generator for frosted overlays and depth.
Step-by-step chains that connect related tools for common tasks.
When to use each type in web design.
| Type | Best for | Syntax example |
|---|---|---|
| Linear | Hero bands, headers, buttons | linear-gradient(90deg, #a, #b) |
| Radial | Spotlights, orbs, circular cards | radial-gradient(circle, #a, #b) |
| Conic | Charts, loaders, color wheels | conic-gradient(from 0deg, #a, #b) |
Use the CSS Gradient Generator when you need multi-stop backgrounds with copy-paste CSS, Tailwind config, or a shareable URL. For palettes, shadows, glass, or layout utilities, use the related tool below—or combine tools in sequence.
| Related tool | Use this tool when | Use related tool when |
|---|---|---|
| Color Palette Generator | You already have hex values and need to build stops, angles, and export linear, radial, or conic gradient CSS. | You are still choosing a harmonious palette and want swatches to paste into gradient stops here. |
| Glassmorphism Generator | You need the base background first—for example a conic sweep behind a frosted card or hero section. | The background exists and you only need blur, border, and transparency on top of it. |
| Box Shadow Generator | Depth should come from color transitions on heroes, buttons, or section backgrounds. | You need card or button elevation with offset, blur, and spread—not a gradient fill. |
| Clip Path Generator | The element stays rectangular and only the background should gradient. | You must mask content to a custom polygon, circle, or blob shape. |
| Typography Scale Generator | You are styling page or component backgrounds—not font sizes or line heights. | You need a modular type scale for headings and body text on your layout. |
Advertisement
Linear blends colors along a straight line (hero backgrounds). Radial spreads from a center point (spotlights). Conic rotates colors around a center (charts, loaders, color wheels). This tool supports all three with the same stop editor.
Linear, radial, and conic gradients with unlimited color stops, per-stop opacity, HEX/RGB/HSL input, angle control, presets, randomize, and reverse.
Click Copy CSS to get `background: linear-gradient(...)` or `background: radial-gradient(...)`. Paste into your CSS file or a styled component. Use Copy All for CSS, inline, Tailwind, and value in one block.
Yes. Copy the Tailwind snippet to add a custom `backgroundImage` key in tailwind.config.js, then use `bg-gradient` (or your chosen key) in markup. Verify against your Tailwind v3/v4 config format.
Click Share to copy the page URL. Your gradient is encoded in the query string so others see the same stops and angle when they open the link.
Yes—no signup, no watermarks, unlimited exports. The tool is free for personal and commercial projects.
No. Stops, preview, and export strings are built in your browser. EverydayTools does not store your palette on a server.
Linear gradients blend colors along a straight line at an angle (e.g. top to bottom). Radial gradients blend outward from a center point—useful for spotlights and circular highlights.
Modern evergreen browsers support standard `linear-gradient` and `radial-gradient` without `-webkit-` prefixes. Test Safari/iOS if you support very old devices.
Gradient editing and preview run entirely in your browser. Color choices and stops are not uploaded for generation.
Preview approximates how gradients render in browsers; extreme stop density may differ slightly by GPU. Always verify in target browsers.
For design prototyping and marketing pages—not a replacement for design-token pipelines in large design systems.
Part of Design & UI Tools
More free tools for the same workflow.
Advertisement
Reviewed by EverydayTools Editorial Team on 2026-06-02.