CSS Gradient Generator

Writing CSS gradients by hand is tedious.

Getting the angle right, balancing color stops, and achieving the exact effect you envision requires constant iteration between your code editor and the browser. This CSS gradient generator eliminates that loop by letting you design gradients visually and copy the production-ready CSS code in one click.

The tool supports linear, radial, and conic gradients with full control over direction, color stops, stop positions, and transparency. Add as many color stops as you need, drag them to adjust their positions, pick colors from a full-spectrum color picker, and watch the gradient update in real time. The output includes the standard CSS background property syntax that works in all modern browsers without vendor prefixes.

Whether you are building a hero section background, styling a button, creating an overlay for a card component, or just experimenting with color combinations for a design system, this tool gives you the visual feedback loop that raw CSS lacks. Designers use it to prototype quickly, developers use it to avoid syntax mistakes, and teams use it to standardize gradient values across a project.

How CSS Gradients Work

CSS gradients are images generated by the browser, not static files. They are created using CSS functions that define a smooth transition between two or more colors along a specified axis or shape. Because they are generated dynamically, gradients scale perfectly to any element size without pixelation, use zero network bandwidth (unlike image files), and can be animated or transitioned with CSS.

Gradients are applied through the background-image property (or the shorthand background property). The browser interpolates between the specified colors at render time, producing smooth transitions that adapt to the element’s dimensions. This makes gradients one of the most efficient ways to add visual depth and personality to a design.

There are three types of CSS gradients, each suited to different visual effects.

Linear Gradients

Linear gradients transition colors along a straight line. The line’s direction is defined by an angle or a keyword, and colors are distributed along it at positions called color stops.

The basic syntax is:

background: linear-gradient(direction, color1, color2, ...);

The direction can be an angle in degrees (0deg points up, 90deg points right, 180deg points down, 270deg points left) or a keyword like to right, to bottom left, or to top. When no direction is specified, the default is to bottom (180deg), which transitions from top to bottom.

Color stops define where each color appears along the gradient line. By default, colors are evenly distributed. You can override this by specifying a percentage or length value after the color:

background: linear-gradient(to right, #3498db 0%, #8e44ad 40%, #e74c3c 100%);

In this example, the first color occupies the leftmost 0%, the purple appears at the 40% mark instead of the default 50%, and the red fills the remaining space to 100%. This asymmetric distribution creates a gradient where the blue-to-purple transition is shorter than the purple-to-red transition.

Linear gradients are the most commonly used type. They are ideal for background sections, button hover effects, progress indicators, and decorative borders. Most landing page hero sections that feature a colored background use a linear gradient rather than a flat color.

Radial Gradients

Radial gradients transition colors outward from a center point in a circular or elliptical shape. They are useful for spotlight effects, circular badges, glowing elements, and backgrounds that draw the eye to a focal point.

The syntax is:

background: radial-gradient(shape size at position, color1, color2, ...);

The shape can be circle or ellipse (the default). The size determines how far the gradient extends: closest-side, closest-corner, farthest-side, or farthest-corner (the default). The position sets the center point and accepts the same values as background-position, such as center, top left, or specific percentages.

A common use case is creating a subtle vignette effect on a container:

background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.3) 100%);

This produces a transparent center that darkens toward the edges, a technique frequently used in photography-style designs and card overlays.

Conic Gradients

Conic gradients are the newest addition to the CSS gradient family. Instead of transitioning colors along a line (linear) or outward from a center (radial), conic gradients transition colors around a center point, like the hands of a clock sweeping around the dial.

The syntax is:

background: conic-gradient(from angle at position, color1, color2, ...);

Conic gradients are uniquely suited to creating pie charts, color wheels, loading spinners, and decorative patterns. A simple pie chart showing 70% completion can be created with:

background: conic-gradient(#3498db 0% 70%, #ecf0f1 70% 100%);

This renders a blue segment covering 70% of the circle and a light gray segment covering the remaining 30%. No SVG, no canvas, no JavaScript, just one line of CSS.

Working with Color Stops

Color stops are the building blocks of any gradient. Mastering their placement gives you precise control over how colors blend.

Basic stops specify just a color: red, blue. The browser distributes them evenly.

Positioned stops add a percentage or length: red 20%, blue 80%. This compresses the transition into the space between 20% and 80%, with solid red before 20% and solid blue after 80%.

Hard stops create sharp color boundaries with no transition. Place two colors at the same position: red 50%, blue 50%. This produces a clean line between the two colors with no blending, useful for striped patterns and flag designs.

Color hints (also called midpoints) control where the halfway point of a transition falls. Writing red, 25%, blue means the midpoint between red and blue occurs at 25% instead of the default 50%, making the transition lean heavily toward the blue side.

Transparency stops use rgba or hsla values to fade a gradient into transparency: rgba(0,0,0,0.8), rgba(0,0,0,0). This is the standard technique for text overlay gradients on background images, ensuring text remains readable regardless of the image content beneath it.

Gradient Design Patterns for Common UI Elements

Developers frequently reach for gradients to solve specific design problems. Here are the most common patterns.

Hero Section Backgrounds. A full-width gradient replaces the need for a background image in many cases. A diagonal linear gradient between two brand colors creates visual interest without increasing page load time. Combine it with a CSS blend mode over a background image for more sophisticated effects.

Button States. Gradients add depth to buttons that flat colors cannot match. A subtle top-to-bottom gradient from a lighter to slightly darker shade of the same hue creates an implied light source. On hover, reverse the gradient or shift the color stops for a satisfying interactive effect.

Text Overlays. When placing text on top of a background image, a gradient overlay from transparent to black (or the background color) ensures the text area has sufficient contrast. This pattern is ubiquitous in card components, image galleries, and content-over-media layouts.

Border Effects. CSS does not directly support gradient borders, but you can simulate them using a gradient background on a container with a slightly smaller inner element (using padding and a solid background on the child), or by using the border-image property with a gradient value.

Skeleton Loading States. Animated gradients create convincing loading placeholders. A light-to-lighter linear gradient animated with @keyframes to slide horizontally produces the shimmer effect seen in modern loading skeletons.

Performance Considerations

CSS gradients are rendered by the GPU and are extremely efficient compared to image-based alternatives. However, there are a few performance notes worth keeping in mind.

Complex gradients with many color stops or layered gradients (multiple gradients stacked on the same element) can increase paint time, particularly on lower-powered devices. In practice, a gradient with three to five color stops has negligible performance impact. Gradients with twenty or more stops, or gradients that are animated on every frame, may warrant profiling.

Gradients are recalculated on resize, which is normally instantaneous. If you combine gradients with expensive CSS properties like filter: blur() or backdrop-filter, the combination can create performance bottlenecks on mobile devices.

For background images that need to cover large areas, a CSS gradient will almost always outperform an equivalent raster image in both load time and rendering performance. A gradient is a few bytes of CSS. A comparable image could be tens or hundreds of kilobytes.

Browser Compatibility

Modern CSS gradient syntax is supported in all current browsers without vendor prefixes. Linear gradients have been fully supported since 2013, radial gradients since 2014, and conic gradients since 2020. If you need to support older browsers, this generator outputs the standard syntax which is compatible with Chrome 26+, Firefox 16+, Safari 6.1+, Edge 12+, and all modern mobile browsers.

The legacy -webkit- prefix syntax used different angle conventions (0deg pointed right instead of up), which caused confusion for years. The standard syntax resolved this, and vendor prefixes are no longer necessary for any modern project. This tool outputs only the standard syntax.

For projects that still require IE11 support, note that IE11 supports linear and radial gradients with some syntax differences but does not support conic gradients. Use our JSON Formatter for quick data validation alongside your front-end work, and check gradient rendering across browsers using your preferred testing setup.

Frequently Asked Questions

Do I need vendor prefixes for CSS gradients?

No. All modern browsers support the standard CSS gradient syntax without vendor prefixes. The -webkit- prefix was necessary before 2013 but is no longer required for any browser released in the last decade. This generator outputs only the standard syntax.

What is the difference between linear, radial, and conic gradients?

Linear gradients transition colors along a straight line in a specified direction. Radial gradients transition outward from a center point in a circular or elliptical shape. Conic gradients transition around a center point like the sweep of a clock hand. Each type is suited to different design effects.

Can I animate CSS gradients?

Not directly with the transition property, because the browser does not interpolate between gradient values. However, you can animate gradients using @keyframes with background-position or background-size to create sliding or pulsing effects. The CSS @property rule also enables true gradient animation in supporting browsers.

How many color stops can a gradient have?

There is no practical limit defined by the CSS specification. Browsers handle gradients with dozens of color stops without issue. However, for maintainability and performance, most gradients use two to five stops. More complex effects are usually better achieved by layering multiple simpler gradients.

How do I create a gradient border in CSS?

CSS does not support gradient values directly in the border property. The most common workaround is using border-image: linear-gradient(...) 1 or creating a pseudo-element with a gradient background behind the element, then using padding or an inner element to reveal it as a border effect.

Can I use gradients with transparency?

Yes. Use rgba or hsla color values to include transparency in any color stop. For example, linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0)) creates a gradient that fades from semi-transparent black to fully transparent, commonly used as a text overlay on images.

What angle does to right correspond to in degrees?

The keyword to right corresponds to 90deg in the standard CSS gradient syntax. Other common mappings: to bottom is 180deg (the default), to left is 270deg, and to top is 0deg. Diagonal keywords like to bottom right produce an angle calculated based on the element’s aspect ratio.

How do I create a sharp color boundary with no blending?

Place two adjacent color stops at the same percentage position. For example, linear-gradient(to right, red 50%, blue 50%) creates a hard line between red and blue at the midpoint with no gradual transition. This technique is used for striped patterns and segmented progress bars.

Data accurate as of: March 2026