CSS Gradient Generator
Design linear, radial, and conic CSS gradients with live preview.
About the CSS Gradient Generator
The CSS Gradient Generator builds linear-gradient, radial-gradient, and conic-gradient declarations that you can paste directly into your stylesheet. The output is W3C CSS Images Module Level 4 compliant and works in every modern browser; the legacy -webkit- prefix is included for older Safari versions.
Gradients replaced image-based backgrounds for buttons, hero sections, cards, and dividers — they download instantly (no HTTP request), scale to any resolution without artifacts, and can be animated by transitioning the angle or color stops. A 200-byte CSS gradient replaces a 50-KB PNG with no visual loss, which is why every modern design system ships gradients as CSS rather than image assets.
Linear gradients blend colors along a straight line at a specified angle (0deg points up, 90deg points right, 180deg points down). Radial gradients blend outward from a center point in circular or elliptical shape. Conic gradients sweep colors around a central point — useful for pie charts, color wheels, and angular backgrounds that change with rotation.
How It Works
The generator builds a CSS declaration of the form linear-gradient(90deg, #0A4F3A, #FAF7F0). The angle (0–360 degrees) sets the gradient direction: 0deg points up, 90deg points right, 180deg points down, 270deg points left, matching the W3C convention where the angle is measured clockwise from straight up. CSS also accepts keyword directions (to top, to right) but numeric degrees give finer control.
Color stops can be hex (3 or 6 digit), rgb(), rgba(), hsl(), hsla(), named colors (rebeccapurple), or transparent. Each stop optionally takes a position like 0%, 50%, or 100% to control where the color anchor sits. Without explicit positions, stops are distributed evenly.
Radial gradients take a shape (circle or ellipse) and a position (at center, at top left, at 50% 50%). The default is circle at center, which produces a circular blend. Conic gradients take from <angle> at <position> — from 0deg at 50% 50% starts the sweep at the top of the center point.
The generator outputs both the standard syntax and a -webkit- prefixed version for legacy Safari 6 and earlier. Modern Safari 14+ supports the standard syntax, so the prefix is only needed if you support very old devices.
Worked Examples
A linear gradient linear-gradient(135deg, #0A4F3A, #FAF7F0) blends the HT99 emerald into cream along a 135-degree diagonal — ideal for hero-section backgrounds with text overlay. The angle 135deg points to the bottom-right, so the emerald starts in the top-left and the cream ends in the bottom-right.
A radial gradient radial-gradient(circle at center, #0A4F3A, #FAF7F0) blends outward from the center — useful for focus effects behind buttons or modal overlays. The blend is circular regardless of the container’s aspect ratio.
A conic gradient conic-gradient(from 0deg at 50% 50%, #0A4F3A, #FAF7F0, #0A4F3A) sweeps around the center point, useful for pie charts and color wheels. Repeating the first color as the last stop creates a seamless loop suitable for animations via the animation property with a rotate() keyframe.
When to Use This Tool
- Hero-section backgrounds with text overlay — use a linear gradient from brand color to neutral.
- Button hover states that fade from primary to slightly darker shade.
- Modal overlays with a radial gradient fading to transparent at the edges.
- Pie chart segments using a conic gradient as a quick CSS-only chart.
- Section dividers that blend two color themes without a hard edge.
- Loading spinners that rotate a conic gradient via
@keyframes spin { to { transform: rotate(360deg); } }. - Color wheels for picker UIs — conic gradient around hue, radial for saturation/lightness.
Limitations & Disclaimer
This tool generates W3C CSS Images Module Level 4 gradient declarations. It supports 2- and 3-stop linear, radial, and conic gradients. For more complex gradients (4+ stops, hard color transitions, repeating gradients, or gradient meshes), edit the CSS manually. CSS gradients cannot be animated directly via transition — use background-position animation or CSS Houdini @property for animated gradients. Color banding on large displays is a browser quantization artifact, not a tool limitation. See our disclaimer for full terms.
Frequently Asked Questions
What is the difference between linear, radial, and conic gradients?
Linear blends colors along a straight line at a specified angle. Radial blends outward from a center point in a circle or ellipse. Conic sweeps colors around a central point like a pie chart. Use linear for backgrounds and dividers, radial for focus effects and overlays, conic for pie charts and color wheels.
Why do I need the -webkit- prefix?
Modern browsers (Chrome, Edge, Firefox, Safari 14+) support the standard syntax without prefixes. The <code>-webkit-</code> prefix is needed only for Safari 6 and earlier and very old Android browsers. If you do not need to support those, you can omit the prefixed version — the standard syntax is universally supported as of 2023.
What is the difference between hex and rgb / hsl color stops?
Functionally nothing — all three formats produce the same color. Hex is shortest and most common in design tooling (Figma, Sketch). <code>rgb()</code> is more readable when working with alpha channels. <code>hsl()</code> is best for generating color variations (rotate hue, adjust saturation) because the parameters align with human color perception.
Can I animate a CSS gradient?
Not directly — CSS does not interpolate between gradient definitions. Workarounds include transitioning the <code>background-position</code> of a larger repeating gradient, or using <code>@property</code> (CSS Houdini) to register custom properties that the browser can animate. For complex gradient animations, a CSS conic-gradient rotated via <code>transform: rotate()</code> gives a sweeping effect.
How do I add a third color stop?
Use the optional Color 3 field. The generator inserts it between the first and second stops, producing <code>linear-gradient(90deg, #0A4F3A, #ffffff, #FAF7F0)</code>. For more than three stops, edit the CSS manually and add comma-separated stops with optional positions like <code>#0A4F3A 0%, #ffffff 50%, #FAF7F0 100%</code>.
Why does my gradient look banded on large screens?
CSS gradients can show color banding on high-resolution displays when blending between similar colors. Fix by adding a third stop with an intermediate color, or by overlaying a subtle noise texture (1% opacity SVG turbulence) via <code>background-blend-mode: overlay</code>. The browser’s color quantization is the root cause; the noise dithering breaks up the bands.
Last updated: September 9, 2026 · Author: HT99 Tools Editorial Team