Tinker Tools

CSS Gradient Generator Visual Editor

Create beautiful linear, radial, and conic CSS gradients with a visual editor. Adjust colors, stops, and direction — then copy the code. All generated locally in your browser.

Previewlinear gradient
CSS Code
background: linear-gradient(to right, #6366F1 0%, #EC4899 100%);

How it works

1. Choose Type

Select between linear, radial, or conic gradient. Each type offers unique visual effects for your designs.

3 Gradient Types

2. Add Colors

Pick colors and set their stop positions. Add up to 8 color stops and adjust direction or angle for the perfect blend.

Real-time Preview

3. Copy CSS

Copy the generated CSS with one click. The standard syntax works in all modern browsers without vendor prefixes.

Standard CSS

What is a CSS Gradient Generator?

A CSS gradient generator is a visual tool that helps you create smooth color transitions — gradients — and outputs the exact CSS code to reproduce them in a browser. CSS gradients were introduced in the CSS Image Values and Replaced Content Module Level 3 specification and are supported by every modern browser since 2012. Instead of loading a bitmap image for a colorful background, you write a single CSS declaration like linear-gradient(135deg, #667eea, #764ba2) and the browser renders the transition on the fly. The result is resolution-independent, scales perfectly to any screen size, and adds zero HTTP requests to your page load. A gradient declaration is typically 50-120 bytes of CSS text — compared to the 5-50 KB a rasterized background image would cost.

There are three main gradient types in CSS. Linear gradients transition along a straight line defined by an angle or direction keyword. Radial gradients transition outward from a center point in an elliptical or circular shape. Conic gradients — added in CSS Image Values Level 4 and supported since Chrome 69 and Safari 12.1 — sweep around a center point like the hands of a clock, producing pie-chart-like effects and color wheels. Each type accepts a list of color stops — pairs of color values and positions — that define where each color starts and ends along the gradient line. The browser interpolates between stops using the color space of the specified or default interpolation method.

This tool gives you a visual canvas where you can drag color stops, adjust angles, switch between gradient types, and see the result update in real time. When you have the gradient you want, copy the CSS with one click. The code includes vendor prefixes if you need them — though in practice, unprefixed syntax has worked in all major browsers for over a decade. Everything runs client-side, so there is no server involved and no latency between your adjustments and the preview.

Key Features and Benefits

  • Linear gradient builder — Set the direction using a degree input (0-360) or a keyword like 'to right' or 'to bottom left.' Add up to 10 color stops and drag them along the gradient bar to control the transition points. The tool translates your visual arrangement into a standard linear-gradient() CSS function. A 0-degree angle points upward, 90 degrees points right, and 180 degrees points downward — matching the CSS specification's coordinate system, which differs from the mathematical convention where 0 degrees points right.
  • Radial gradient builder — Choose between a circle and an ellipse shape, set the center position as a percentage of the container, and define the size using keywords — closest-side, farthest-corner, or explicit pixel values. Radial gradients are ideal for spotlight effects, glowing buttons, and vignette overlays. The tool renders the gradient in a resizable preview so you can see how it behaves at different aspect ratios.
  • Conic gradient builder — Define the starting angle and center position for a conic sweep. Conic gradients are the newest CSS gradient type and produce effects that linear and radial gradients cannot — color wheels, pie charts, and starburst patterns. The tool lets you place color stops around the 360-degree arc. Setting two stops at 0 and 50% with a hard transition creates a clean half-and-half split, useful for loading indicators or decorative dividers.
  • Repeating gradient support — Toggle repeating mode to turn any gradient into a pattern. A repeating-linear-gradient with two stops 20 pixels apart creates evenly spaced stripes. A repeating-conic-gradient produces a pinwheel. Repeating gradients are a powerful alternative to tiled background images — they are infinitely scalable, take zero network requests, and can be animated with CSS transitions or @keyframes for dynamic visual effects.
  • Color space interpolation — CSS Color Level 4 introduced the 'in' keyword for gradient interpolation — for example, linear-gradient(in oklch, red, blue) interpolates through the OKLCH perceptual color space instead of the default sRGB. This avoids the muddy gray zone that sRGB interpolation produces when transitioning between complementary colors. The tool lets you switch between sRGB, OKLCH, and HSL interpolation and see the difference side by side. OKLCH produces noticeably richer, more vibrant mid-tones.
  • One-click CSS copy — Every gradient you build is immediately available as a CSS declaration you can paste into your stylesheet. The output includes the background or background-image property with the full gradient function. If you are targeting older browsers, the tool optionally includes -webkit-prefixed syntax, though this is rarely needed today given that all browsers have supported unprefixed gradients since at least 2015.

How to Create CSS Gradients Online

  1. 1

    Choose a gradient type

    Select linear, radial, or conic from the type picker. Linear is the most common and works for hero sections, card backgrounds, and button hover states. Radial is useful for spotlight effects and circular highlights. Conic is specialized — reach for it when you need a color wheel, a gauge indicator, or a decorative sweep. If you are unsure, start with linear at 135 degrees — a diagonal gradient from top-left to bottom-right — which is the most popular direction across the web.

  2. 2

    Add and position color stops

    Click the gradient bar to add a new color stop. Drag existing stops to reposition them. Each stop has a color value and a percentage position along the gradient line. Two stops create a simple two-tone transition. Three or more stops let you build complex multi-color fades. To create a hard edge instead of a smooth transition, place two different-colored stops at the same percentage — the browser renders an instant jump between the colors with no interpolation.

  3. 3

    Adjust the angle or center

    For linear gradients, type a degree value or drag the angle control. For radial and conic gradients, drag the center point to reposition the origin. The preview updates in real time so you can see exactly how each adjustment affects the output. Small angle changes — even 5 to 10 degrees — can dramatically shift the feel of a gradient, so fine-tune with care.

  4. 4

    Pick a color space

    Try switching the interpolation from sRGB to OKLCH. Compare the two side by side. If your gradient transitions between distant hues — blue to yellow, red to green — OKLCH will produce richer intermediate colors without the desaturated midpoint that plagues sRGB interpolation. For transitions between similar hues — light blue to dark blue — the difference is subtle and sRGB is fine.

  5. 5

    Copy the CSS code

    Click the copy button to grab the full CSS declaration. Paste it into your stylesheet as a background-image property value. The generated code is production-ready — no editing needed. If you want to save the gradient for later, bookmark the URL: the tool encodes your gradient configuration in the URL hash so you can share it with teammates or return to it next week.

Expert Tips for CSS Gradients

Use gradients as overlays, not just backgrounds. A semi-transparent linear-gradient layered on top of a photograph can darken the bottom half of a hero image so that white text remains readable. The CSS is simple: background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.7)), url('hero.jpg'). This eliminates the need to edit the photo in an image editor and lets you adjust the darkness level directly in code. The same technique works for color-tinting photos — overlay a semi-transparent gradient in your brand color to create a unified visual treatment across images with wildly different palettes.

Understand how color stop positions control the transition zone. If you place a blue stop at 30% and a red stop at 70%, the smooth transition happens only in the 30-70% range — the first 30% is solid blue and the last 30% is solid red. Tightening the gap — blue at 45%, red at 55% — creates a faster, more dramatic shift. Overlapping stops — blue at 50%, red at 50% — creates a hard line with no transition at all. Mastering stop positioning is the key to creating professional gradients. Most gradients that look amateurish suffer from transitions that are too wide, too centered, or too evenly spaced. Asymmetry often looks more natural and intentional.

Repeating gradients unlock a world of CSS-only patterns. A repeating-linear-gradient with alternating colored and transparent stripes creates a striped background without any image file. Lea Verou's CSS patterns gallery demonstrates dozens of complex patterns — checkerboards, polka dots, zigzags, hexagonal grids — built entirely from layered repeating gradients. The technique relies on stacking multiple gradient backgrounds and carefully aligning their sizes with the background-size property. A single element can have 3-5 layered gradients that combine into surprisingly intricate patterns, all at zero network cost and infinite resolution.

Be aware of gradient rendering performance. On most hardware, CSS gradients are composited by the GPU and render at native display resolution with negligible performance cost. Problems arise when you animate gradient properties — changing colors, angles, or stop positions — because the browser must repaint the gradient on every frame. CSS transitions on gradient values are not hardware-accelerated; the browser recalculates and redraws the pixel data each frame, which can cause jank on complex layouts. If you need animated gradients, consider using CSS Houdini's Paint API for custom rendering, or animate a pseudo-element's transform (which is GPU-accelerated) to move a static gradient across the viewport. Moving pixels is cheap; recomputing pixels is expensive.

Mesh gradients — smooth color fields with multiple focal points — are not yet part of the CSS specification, but you can approximate them by layering several radial gradients with different center positions and semi-transparent colors. Place a warm radial in the top-left corner, a cool radial in the bottom-right, and a neutral radial in the center. Adjust the opacity and spread of each layer until the colors blend into a smooth, organic field. The result mimics the mesh gradient tools found in Figma and Illustrator. Apple's iOS wallpaper gradients use a similar technique. While the CSS is verbose — three or four background-image layers with precise sizing and positioning — the visual impact is striking and the file cost is zero compared to rasterized mesh images that can easily reach 100-300 KB.

Related Tools

Color Palette Generator

Generate harmonious color sets to use as gradient stops for visually balanced transitions

Color Converter

Convert gradient stop colors between HEX, RGB, HSL, and OKLCH for precise control

CSS Minifier

Minify your stylesheet after adding gradients to reduce the CSS file size for production

Gradients are one of the most efficient tools in a web developer's visual toolkit — they add color, depth, and personality with a few lines of CSS and zero additional HTTP requests. But a gradient is only as good as the colors it transitions between. Using a palette generator to select harmonious stop colors ensures your gradient looks intentional rather than random. Converting those colors to the right format — OKLCH for perceptual smoothness, HEX for compatibility — gives you precision where it matters. And minifying the final CSS strips whitespace and shorthand-optimizes the declarations, shaving bytes from a file that might contain dozens of gradient rules across media queries and component variants. Together, these tools turn a simple color transition into a polished, performant, production-ready design element.

Frequently Asked Questions

Recommended Tools

Image Resizer

Resize images instantly in your browser. Adjust width, height, and format with aspect ratio lock.

Image Compressor

Compress images with adjustable quality. Reduce file size while preserving visual quality.

Color Converter

Convert colors between HEX, RGB, HSL, and HSB formats with a live color preview.