CSS Gradient Generator
Design linear, radial and conic CSS gradients visually.
About the CSS Gradient Generator
The CSS Gradient Generator produces ready-to-paste background declarations for the three CSS gradient types: linear, radial, and conic. Pick colors, adjust the angle, and the tool emits valid CSS you can drop into any stylesheet, inline style, or Tailwind utility class.
Gradients are the workhorse of modern web design. They appear in hero backgrounds, button fills, hover states, progress bars, badges, scroll-driven animations, and image overlays. CSS gradients are vector: they render at the native resolution of every display, scale infinitely without pixelation, and add zero bytes to your image payload (a complex gradient is one line of CSS versus a 100 KB WebP).
The three gradient types serve different design needs. Linear is the default — a smooth color transition along a straight line at any angle. Radial radiates from a center point outward, useful for spotlight effects, vignettes, and circular focus areas. Conic sweeps around a center point like a pie chart, used for color wheels, loading spinners, and ring-shaped progress indicators.
How It Works
The generator builds a CSS linear-gradient(), radial-gradient(), or conic-gradient() function call from your inputs and wraps it in a background: declaration. Each function has its own parameter syntax:
- Linear:
linear-gradient(angle, color1, color2, ...). The angle is in degrees from the top (0deg) clockwise, so 90deg points right and 180deg points down.to top,to right,to bottom rightkeywords also work. - Radial:
radial-gradient(shape size at position, color1, color2, ...). The default iscircle at center; you can also specifyellipse,closest-side,farthest-corner, or pixel/em positions likeat 30% 70%. - Conic:
conic-gradient(from angle at position, color1, color2, ..., color1). The angle is the starting rotation; the position is the center. To produce a seamless loop, the first and last colors must match — the generator does this automatically.
Colors can be any valid CSS color: hex (#667eea), shorthand hex (#abc), rgb(), rgba(), hsl(), hsla(), named colors (rebeccapurple), or CSS variables (var(--brand)). The generator accepts hex strings without validation beyond checking that they are non-empty — if you enter an invalid color, the browser will reject the entire declaration and the preview will be blank.
The optional third color lets you create three-stop gradients, which are common for sunset effects, brand-color transitions, and iridescent surfaces. The mid-color blends both endpoints, so it should be a color that exists in both color spaces (typically a hue between the two outer colors).
Browsers render gradients natively in the GPU compositor, which means they are essentially free — no paint cost, no decode cost, no memory pressure. A 4K hero section with a gradient background uses the same GPU resources as a 100×100 button. This is why gradients have largely replaced background images for hero sections, banners, and feature card backgrounds.
Worked Examples
The default settings produce a 135-degree linear gradient from #667eea (indigo) to #764ba2 (purple) — a popular hero-section background used by Stripe, Linear, and many SaaS landing pages. The CSS output is background: linear-gradient(135deg, #667eea, #764ba2); — one line that renders crisply on any display.
Switching to radial with colors #ff6b6b (coral) and #556270 (slate) produces a circular spotlight effect, useful for focusing attention on a hero CTA. The CSS becomes background: radial-gradient(circle at center, #ff6b6b, #556270);.
Adding a third color #4ecdc4 (mint) between two existing colors creates a three-stop sunset gradient. Linear with angle 90deg, colors #ff6b6b, #4ecdc4, #556270 produces a horizontal transition through coral, mint, and slate — a popular aesthetic for health and wellness apps.
Conic gradients are less common but powerful. Setting type conic with colors #ff6b6b, #4ecdc4, and angle 0deg produces a pie-chart-like sweep that loops back to the starting color. This is the basis of color wheels, ring-shaped loading spinners, and pie-chart-style progress indicators.
When to Use This Tool
- Generating hero-section backgrounds for SaaS landing pages without importing a background image.
- Styling call-to-action buttons with subtle linear gradients that respond to hover.
- Building progress bars, loading spinners, and conic-gradient ring indicators.
- Creating vignettes and spotlight effects over photography backgrounds.
- Designing badges, chips, and pill-shaped labels with brand-color transitions.
- Prototyping color schemes before committing to a brand palette.
- Demoing CSS gradient syntax in frontend training and tutorials.
Limitations & Disclaimer
This generator outputs the most common gradient syntax (single or triple color stops) and does not support advanced features like hard color stops, repeating gradients (repeating-linear-gradient), multi-position stops, or CSS color-mix expressions. Conic gradients require modern browsers (Chrome 69+, Firefox 83+, Safari 12.1+); older browsers will fall back to a solid background color. The tool performs minimal color validation — invalid hex codes will produce a blank preview because the browser rejects the entire declaration. For complex multi-stop gradients, hand-edit the generated CSS. See our disclaimer for full terms.
Frequently Asked Questions
What is the difference between linear, radial, and conic gradients?
Linear transitions along a straight line at any angle. Radial radiates from a center point outward in concentric circles (or ellipses). Conic sweeps around a center point like a pie chart, transitioning through all angles. Linear is most common for backgrounds; radial for spotlight effects; conic for color wheels and ring indicators.
Can I use more than three colors?
Yes. The CSS spec allows any number of color stops — common production gradients use 5-10 stops for complex effects. This tool limits you to three for simplicity; for more, hand-edit the generated CSS. Each additional stop adds one comma-separated color value, optionally with a position like <code>#ff6b6b 25%</code>.
How do I add color stop positions?
Append a percentage or length after the color, e.g., <code>linear-gradient(90deg, red 0%, blue 50%, green 100%)</code>. Hard transitions are created by placing two colors at the same position: <code>red 50%, blue 50%</code> produces a sharp line at the 50% mark, useful for striped patterns.
Why does my gradient look banded on some displays?
Color banding occurs when the display cannot represent enough intermediate colors (typically on 8-bit displays with low bit depth). Add a tiny dithering noise via SVG filter or add intermediate color stops (every 5-10%) to break up the banding. Modern browsers also support <code>color-interpolation: linearRGB</code> for more perceptually uniform gradients.
Are CSS gradients GPU-accelerated?
Yes. Browsers render gradients in the compositor thread, which means they are essentially free — no paint cost, no decode cost, no memory pressure. A 4K hero section with a gradient uses the same GPU resources as a 100×100 button. This is why gradients have largely replaced background images for hero sections.
How do I make a gradient text effect?
Set <code>background: linear-gradient(...)</code> on the text element, then <code>-webkit-background-clip: text; color: transparent;</code>. The gradient will show through the text shapes. This is widely supported but requires the <code>-webkit-</code> prefix in Safari; Firefox and Chrome support the unprefixed property.
Last updated: July 21, 2026 · Author: HT99 Tools Editorial Team · Reviewed by: HT99 Tools Editorial Team