How to Create CSS Gradients: Linear, Radial & Conic Explained

A linear gradient moves colors across a straight line. A radial gradient spreads them outward from a point. A conic gradient rotates them around a center.

They may all blend colors, but they produce different shapes and solve different design problems.

This guide explains linear, radial, conic, and repeating CSS gradients through practical examples. It also shows you how to build them with the Solvioza CSS Gradient Generator, preview the result, and copy the finished CSS into your website.

What Is a CSS Gradient?

A CSS gradient is a browser-generated image made from a transition between two or more colors. It adjusts to the size of an element and remains sharp when the page is resized or zoomed.

CSS gradients are defined as generated images in the CSS Images specification. Because a gradient is treated as an image, it can be used with properties such as background or background-image.

background: linear-gradient(#2563EB, #7C3AED);

CSS provides three main gradient types:

• linear-gradient() for transitions along a straight line
• radial-gradient() for transitions spreading from a center point
• conic-gradient() for transitions rotating around a center

Each type also has a repeating version. Gradients do not work as values of background-color, because that property accepts a color rather than a generated image.

Linear vs Radial vs Conic Gradients

Gradient type	How colors move	Useful for
Linear	Along a straight line	Backgrounds, buttons, banners, overlays, and directional shading
Radial	Outward from a central point	Highlights, glows, spotlights, and soft focal areas
Conic	Around a center point	Color wheels, borders, loaders, badges, and decorative rotations
Repeating	Repeats a defined gradient segment	Stripes, rings, rays, and patterned backgrounds

Choose the type according to the shape of the transition. A linear gradient suits a directional button or banner, while a radial gradient feels more natural for a centered glow.

Linear CSS Gradients

How linear gradients work

A linear gradient blends colors along an imaginary straight line. The first part of the function controls the direction, followed by the color stops.

background: linear-gradient(
  135deg,
  #2563EB 0%,
  #7C3AED 50%,
  #EC4899 100%
);

Blue begins at 0%, violet is placed halfway through, and pink reaches the end.

A linear gradient can also use a directional keyword:

background: linear-gradient(
  to right,
  #0EA5E9,
  #2563EB
);

Angles provide more precise control. CSS gradient angles use 0deg for the top and increase clockwise:

• 0deg points toward the top.
• 90deg points toward the right.
• 180deg points toward the bottom.
• 270deg points toward the left.

The Solvioza generator provides an angle slider, a numeric degree input, and direction presets for the top, corners, sides, and bottom.

When to use a linear gradient

Linear gradients work well when a design has a clear direction. Common uses include:

• Hero and section backgrounds
• Buttons and call-to-action elements
• Image overlays
• Navigation and header backgrounds
• Text fills when supported by the surrounding CSS
• Progress indicators

A horizontal gradient often feels calm and stable. A diagonal direction creates more movement, while a vertical gradient can suggest lighting or depth. The direction should support the layout rather than compete with it.

Radial CSS Gradients

How radial gradients work

A radial gradient starts at a center point and spreads outward. Instead of controlling only a direction, you can control its shape, size, and origin.

background: radial-gradient(
  circle at center,
  #F8FAFC 0%,
  #38BDF8 36%,
  #1E3A8A 100%
);

This example begins with a light center, moves through blue, and becomes dark near the outside.

A radial gradient can use a circle or an ellipse. A circle keeps the same radius in every direction. An ellipse follows a stretched shape and often fits rectangular elements more naturally.

Radial gradient size and position

CSS provides size keywords that determine how far the gradient extends:

• closest-side reaches the nearest side of the gradient box.
• closest-corner reaches the nearest corner.
• farthest-side reaches the farthest side.
• farthest-corner reaches the farthest corner.

The origin can be moved to a side, corner, or custom position:

background: radial-gradient(
  ellipse farthest-side at top right,
  #22C55E 0%,
  #06B6D4 55%,
  #0F766E 100%
);

In Solvioza, choose Center, Top Right, Bottom Left, or another position preset. Selecting Custom provides separate X and Y percentages for placing the focal point precisely.

When to use a radial gradient

Radial gradients are useful when a design needs a focal point rather than a direction. They work well for:

• A soft glow behind a heading or product
• A spotlight effect inside a panel
• A focused area behind an illustration
• Subtle highlights on buttons or badges
• Vignette-style backgrounds

Position the center near the content's focal point. A glow behind content on the right will usually feel more intentional when its origin is also moved toward the right.

Conic CSS Gradients

How conic gradients work

A conic gradient rotates colors around a center point. Its transition behaves more like the sweep of a clock hand than a glow spreading outward.

The CSS Images Level 4 specification defines conic gradients using a starting angle, a center position, and angular color stops.

background: conic-gradient(
  from 45deg at center,
  #06B6D4 0%,
  #8B5CF6 28%,
  #EC4899 58%,
  #F59E0B 100%
);

The from value changes the starting angle. The at value controls the center of rotation.

Conic color stops are angular and can be expressed with angles such as degrees. Percentages are also valid, with the complete turn represented by 100%. Solvioza uses percentages so the same stop editor can be used consistently across all three gradient types.

The tool provides a starting-angle slider and center-position presets. Selecting Custom reveals separate X and Y controls for moving the rotation point away from the middle.

When to use a conic gradient

Conic gradients are useful for color wheels, circular borders, loading indicators, badges, and decorative effects that rotate around an origin.

They can visually resemble pie charts, but a CSS background provides no semantic data, labels, or meaningful text alternative. Use accessible chart markup and a textual explanation when segments communicate real information.

Working With Color Stops

What color stops are

A color stop tells the browser which color should appear at a particular point in a gradient:

#2563EB 0%
#7C3AED 50%
#EC4899 100%

The percentage controls position, not opacity. Moving violet from 50% to 75% gives the blue-to-violet transition more room and compresses the transition into pink.

A color-stop list needs at least two colors. Solvioza supports between 2 and 10 stops. Every stop includes a visual color input, editable HEX value, percentage position, position slider, and copy and remove controls.

You can drag the circular handles across the gradient track or enter a position directly. The preview and CSS output update as each stop moves.

CSS itself can accept some stop positions outside the 0% to 100% range. The Solvioza interface intentionally limits positions to that range to keep visual editing predictable.

How stop placement changes the result

Evenly spaced stops usually create a balanced transition. Uneven positions emphasize one part of the gradient.

background: linear-gradient(
  90deg,
  #2563EB 0%,
  #7C3AED 50%,
  #EC4899 100%
);

background: linear-gradient(
  90deg,
  #2563EB 0%,
  #7C3AED 80%,
  #EC4899 100%
);

The first example gives both transitions similar space. The second remains blue and violet for longer, then moves into pink near the edge.

Stops placed close together produce a sharper change. Giving adjacent colors the same position can create a hard boundary instead of a smooth blend.

More colors do not automatically create a better gradient. Start with two or three, then add another stop only when the existing ones cannot produce the intended transition.

How Repeating CSS Gradients Work

Repeating gradients repeat a defined color-stop segment until the element is filled. CSS provides:

• repeating-linear-gradient()
• repeating-radial-gradient()
• repeating-conic-gradient()

A repeating linear gradient can create stripes:

background: repeating-linear-gradient(
  45deg,
  #2563EB 0%,
  #2563EB 10%,
  #DBEAFE 10%,
  #DBEAFE 20%
);

The repeated segment is determined by the distance between the first and last positioned color stops. When the first stop is at 0% and the final stop is at 100%, one complete gradient fills the available range, so additional repetitions may not be visible.

In the Solvioza generator, enable Repeating gradient and reduce the distance between the first and final stops. A shorter stop range creates more repetitions.

Repeating gradients are useful for stripes, rings, rays, and textures. They can become visually complex quickly, so use them carefully behind text or interactive content.

How to Create a CSS Gradient Online With Solvioza

1. Open the CSS Gradient Generator.
2. Select Linear, Radial, or Conic.
3. Use the direction, shape, size, angle, or center controls available for that type.
4. Edit the colors using their visual inputs or HEX values.
5. Move stops by dragging their handles, using the sliders, or entering percentages.
6. Select Add Color Stop when another transition point is needed.
7. Enable Repeating gradient when creating a repeated pattern.
8. Review the result in the Live Preview.
9. Copy the generated declaration from CSS Output.

Changing the gradient type updates both the available controls and the generated CSS.

For a quick starting point, choose one of the included presets. The collection includes linear, radial, and conic examples such as Ocean Blue, Sunset Glow, Radial Glow, Rainbow Wheel, and Prism Spin.

Reverse, Randomize, and Refine

Reverse flips the stop positions and their visual direction. It is useful when the colors are right but their order feels wrong.

Randomize creates a new color combination while keeping the selected gradient type. Use it for exploration, then refine the result for the project rather than accepting it only because it is colorful.

Reset returns the workspace to its initial gradient.

For deliberate color selection, build a coordinated scheme with the Color Palette Generator, then place those HEX values into the gradient stops. Colors from an established palette are easier to connect with the rest of an interface.

Copy and Use the Generated CSS

The CSS Output panel provides a complete background declaration:

background: linear-gradient(
  135deg,
  #2563EB 0%,
  #7C3AED 50%,
  #EC4899 100%
);

Select Copy and place the declaration inside the relevant CSS rule:

.hero {
  min-height: 420px;
  background: linear-gradient(
    135deg,
    #2563EB 0%,
    #7C3AED 50%,
    #EC4899 100%
  );
}

You may use background-image when other background properties are declared separately. Do not place a gradient inside background-color; that property accepts a color value, not a generated image.

Check Text Readability Over a Gradient

A gradient does not have one fixed contrast ratio. Text may pass over a dark area and fail where the background becomes lighter.

The tool's Overlay Text option lets you enter a heading and switch between light and dark text for a quick preview. Use it to find an initial direction, then test important placements with the Color Contrast Checker.

Check the lightest and darkest areas that can appear behind the text. Responsive resizing can also move different parts of the gradient beneath the content.

When contrast cannot remain reliable, move the text, adjust the stops, add a solid or translucent backing, or keep the gradient outside the content area. Text shadows may improve separation, but they should not be the only accessibility strategy.

Common CSS Gradient Mistakes

Using too many colors. Several unrelated colors can make a gradient feel muddy or distracting. Start with a focused palette.

Ignoring stop positions. The same colors can produce a different result when their percentages change.

Choosing the wrong gradient type. Use linear for direction, radial for a focal point, and conic for rotation.

Using an ineffective repeating range. Repetition depends on the distance between the first and last positioned stops. Reduce that distance when you need the pattern to repeat more often.

Using the wrong CSS property. Apply gradients with background or background-image, not background-color.

Forgetting different element shapes. A radial gradient that appears circular in a square preview may look elliptical inside a wide container.

Testing only one screen size. Gradients resize with their elements, so stop placement and text readability should be checked on mobile and desktop.

Using a decorative conic gradient as meaningful data. A CSS background has no built-in chart labels or semantics for assistive technology.

Create and Copy Your CSS Gradient

Use a linear gradient when colors should move in one direction, a radial gradient when the design needs a focal point, and a conic gradient when colors should rotate around a center.

The Solvioza CSS Gradient Generator lets you control those structures visually, work with up to 10 color stops, test repeating patterns, preview overlay text, and copy the generated CSS.

Begin with a simple transition. Refine the direction, shape, and stop positions only when each change improves the role the gradient plays in the interface.