What's the difference between linear, radial, and conic gradients?

A linear gradient transitions colors along a straight line at a chosen angle, a radial gradient radiates outward from a center point, and a conic gradient sweeps colors around a center point like a color wheel.

Can I add more than two colors to a gradient?

Yes, you can add as many color stops as needed, positioning each one at a specific percentage along the gradient to control where transitions occur.

Does this tool generate CSS that works in all modern browsers?

Yes, the generated linear-gradient, radial-gradient, and conic-gradient syntax is standard CSS supported by all current major browsers.

Can I use transparency in my gradient?

Yes, individual color stops can include an alpha value, which is especially useful for building overlay gradients that fade into transparency over an image.

Is my gradient design uploaded anywhere while I build it?

No, the entire builder runs locally in your browser, so the colors and settings you choose are never sent to a server.

Why does my gradient look banded instead of smooth?

This usually happens when color stops are placed too close together or when adjacent colors differ too sharply in brightness; spacing stops further apart often produces a smoother blend.

Can I use the generated gradient as a text or border effect?

The generated CSS can be applied to background-related properties generally, including being combined with background-clip for text effects, though that combination requires applying the gradient as you would any background value.

Does changing the angle of a linear gradient also work for radial gradients?

No, radial gradients use a center point and shape rather than an angle, so adjusting direction for a radial gradient means repositioning its center rather than changing a degree value.

CSS Gradient Generator Guide

CSS Gradient Generator lets you visually build linear, radial, and conic gradients with multiple color stops, instantly previewing the result and copying the finished CSS code from your browser.

Gradients are one of the simplest ways to add visual depth to a website, but writing the CSS for one by hand quickly turns into a guessing game. The syntax for linear-gradient, radial-gradient, and conic-gradient each accepts angles, color stops, and positioning keywords in slightly different ways, and small changes to a stop's percentage or a color's transparency can shift the entire look in ways that are hard to predict just by reading the raw code. Designers and developers alike usually end up tweaking values, saving the file, and reloading the browser repeatedly just to see what a change actually looks like.

This tool collapses that whole loop into a single screen. You pick a gradient type, add and arrange color stops using visual controls, adjust the angle or center point, and see the resulting gradient rendered live as you make each change. Because the preview updates immediately and the matching CSS is generated alongside it, you can experiment freely — trying a steeper angle, swapping in a different stop color, or adding a third color to a two-color gradient — without ever needing to manually retype a single gradient function from memory.

Gradients are used far more widely in modern interfaces than just decorative backgrounds. They appear in button hover states, subtle overlays on top of photographs to keep text readable, loading skeleton animations, chart visualizations, and brand-styled hero sections. Because the exact CSS syntax for each gradient type differs enough to be genuinely easy to mix up — particularly the way conic-gradient handles angles compared to linear-gradient — having a tool that generates syntactically correct, ready-to-paste code removes an entire class of small but frustrating bugs from a project's stylesheet.

All of the building and previewing happens directly in your browser using standard web technologies, so there's no upload step and no account needed before you can start experimenting. Once you're happy with a gradient, you copy the generated CSS directly into your own stylesheet, component file, or design system tokens, and it will render identically wherever standard CSS gradients are supported, which today is effectively every modern browser.

How to build a CSS gradient

Choose a gradient type. Start by selecting whether you want a linear gradient that transitions colors along a straight line, a radial gradient that radiates outward from a center point, or a conic gradient that sweeps colors around a center point like a color wheel. This choice shapes everything that follows, since each gradient type has a genuinely different visual character and a different set of controls — angle for linear, center position and shape for radial, and a starting angle for conic. Picking the type that matches the visual effect you have in mind up front saves time compared to building a gradient and then realizing a different type would have suited the design better.
Add and arrange your color stops. Add two or more colors as stops along the gradient, and position each one using its percentage placement to control exactly where one color begins transitioning into the next. Adding a stop in the middle rather than just at the start and end lets you create more complex transitions, such as a gradient that passes through a bright accent color partway along its length rather than blending directly between just two colors. Pay attention to color stop order, since rearranging two stops can completely change which color appears first and which appears last in the visual transition.
Adjust the angle or position. For a linear gradient, set the angle that determines the direction the color transition flows in, such as 90 degrees for a left-to-right transition or 180 degrees for top-to-bottom. For a radial gradient, adjust the center point and shape, choosing between a circular or elliptical spread depending on the container the gradient will be applied to. For a conic gradient, set the starting angle that determines where around the circle the color sweep begins. Watching the live preview update as you adjust these values is the fastest way to understand how a numeric change actually translates into a visual shift.
Fine-tune transparency and blending. If your gradient includes colors with partial transparency, adjust the alpha value of individual stops to control how strongly the color blends with whatever sits beneath it, which matters most when the gradient is layered as an overlay on top of an image or another element rather than used as a standalone background. A gradient that fades from a solid color to fully transparent is a common pattern for keeping text readable over a busy photograph, and getting the transparency curve right often takes a few rounds of visual adjustment rather than guessing a single alpha value upfront.
Copy the generated CSS into your project. Once the live preview matches the look you want, copy the generated CSS gradient code and paste it into your stylesheet, CSS-in-JS file, or design system token wherever a background value is expected. Double-check that the property you're applying it to, such as background or background-image, is the correct one for your use case, since some gradient effects are more commonly combined with background-clip or used as a mask rather than applied as a plain background image. The generated syntax itself will work identically across all modern browsers without further adjustment, so there is no need to add vendor prefixes or fallback rules for the vast majority of current projects.

Use Cases

Designing a hero section background: Build a smooth linear gradient background for a website's hero section that reinforces brand colors without using a static image.
Creating a readable overlay on a photo: Build a gradient that fades from transparent to a dark color to keep overlaid text readable against a busy background photograph.
Styling a button hover state: Create a subtle gradient for a button's default and hover states to add depth without relying on box shadows alone.
Building a loading skeleton animation: Generate a gradient used as the shimmering highlight in a loading skeleton placeholder while content is still being fetched.
Designing a conic gradient for a chart or dial: Build a conic gradient to represent proportions or progress visually, such as in a circular progress indicator or pie-style chart.
Matching a brand's gradient style guide: Recreate a specific brand gradient by precisely matching its colors, angle, and stop positions for consistent use across a site.

About This Tool

What is it? A browser-based visual editor for building linear, radial, and conic CSS gradients with live preview and instant, ready-to-paste CSS code generation.

Why use it? It replaces the trial-and-error of hand-writing gradient syntax with a live visual preview, letting you fine-tune colors, stops, and angles and see the exact result before copying any code.

Alternatives: Writing gradient CSS directly in a code editor requires reloading the browser repeatedly to see each change, and remembering the exact syntax differences between gradient types is easy to get wrong; this tool previews changes instantly and generates syntactically correct code automatically.

Common mistakes: Confusing the angle conventions between gradient types is a common mistake, since linear-gradient angles and conic-gradient starting angles aren't interchangeable concepts; another frequent issue is placing color stops too close together, which can create a harsh, banded transition rather than the smooth blend that was intended.

Frequently Asked Questions

What's the difference between linear, radial, and conic gradients?: A linear gradient transitions colors along a straight line at a chosen angle, a radial gradient radiates outward from a center point, and a conic gradient sweeps colors around a center point like a color wheel.
Can I add more than two colors to a gradient?: Yes, you can add as many color stops as needed, positioning each one at a specific percentage along the gradient to control where transitions occur.
Does this tool generate CSS that works in all modern browsers?: Yes, the generated linear-gradient, radial-gradient, and conic-gradient syntax is standard CSS supported by all current major browsers.
Can I use transparency in my gradient?: Yes, individual color stops can include an alpha value, which is especially useful for building overlay gradients that fade into transparency over an image.
Is my gradient design uploaded anywhere while I build it?: No, the entire builder runs locally in your browser, so the colors and settings you choose are never sent to a server.
Why does my gradient look banded instead of smooth?: This usually happens when color stops are placed too close together or when adjacent colors differ too sharply in brightness; spacing stops further apart often produces a smoother blend.
Can I use the generated gradient as a text or border effect?: The generated CSS can be applied to background-related properties generally, including being combined with background-clip for text effects, though that combination requires applying the gradient as you would any background value.
Does changing the angle of a linear gradient also work for radial gradients?: No, radial gradients use a center point and shape rather than an angle, so adjusting direction for a radial gradient means repositioning its center rather than changing a degree value.

Related Tools

Related Guides

Try CSS Gradient Generator Now