CalculateY CalculateY

CSS Gradient Generator

CSS gradients use the linear-gradient() or radial-gradient() function to create smooth color transitions directly in CSS, with no image files required. The linear gradient syntax is linear-gradient(angle, color1 position1, color2 position2), where the angle sets the direction in degrees and each color stop defines a color at a percentage position. For example, linear-gradient(180deg, #667eea 0%, #764ba2 100%) creates a top-to-bottom purple gradient. Select a gradient type, set colors and positions, and adjust the angle to generate your CSS.

Quick Answer

A top-to-bottom gradient from indigo to purple is background: linear-gradient(180deg, #667eea 0%, #764ba2 100%). A radial gradient uses background: radial-gradient(circle, #667eea 0%, #764ba2 100%).

Gradient Settings

Color Stops

Preview

Common Examples

Input Result
Linear, 180deg, #667eea 0% to #764ba2 100% background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
Linear, 90deg, #f093fb 0% to #f5576c 100% background: linear-gradient(90deg, #f093fb 0%, #f5576c 100%);
Radial, #667eea 0% to #764ba2 100% background: radial-gradient(circle, #667eea 0%, #764ba2 100%);
Linear, 135deg, #a8edea 0% to #fed6e3 100% background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
Linear, 45deg, #ff9a9e 0% to #fecfef 100% background: linear-gradient(45deg, #ff9a9e 0%, #fecfef 100%);

How It Works

CSS gradients create smooth transitions between two or more colors. They are rendered by the browser as generated images and can be used anywhere a CSS url() image would work, including background, border-image, and list-style-image.

Linear Gradient

linear-gradient(angle, color-stop1, color-stop2, …)

The angle determines the direction of the gradient line:

  • 0deg = bottom to top
  • 90deg = left to right
  • 180deg = top to bottom (default)
  • 270deg = right to left
  • 135deg = top-left to bottom-right (diagonal)

Each color stop specifies a color and an optional position as a percentage. The browser interpolates smoothly between stops.

Radial Gradient

radial-gradient(shape, color-stop1, color-stop2, …)

Creates a circular or elliptical gradient emanating from a center point. The circle keyword produces a circular gradient, while ellipse (the default) matches the element’s aspect ratio.

Color Stop Positions

Positions are percentages along the gradient line. Setting the first stop at 0% and the last at 100% creates a full gradient. Moving stops closer together creates a sharper transition; for example, #ff0000 45%, #0000ff 55% creates a narrow 10% transition zone between red and blue.

Worked Example

For a diagonal gradient from light teal to soft pink: type = linear, angle = 135deg, color1 = #a8edea at 0%, color2 = #fed6e3 at 100%. The CSS output is background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);. At the 135-degree angle, the gradient flows from the top-left corner to the bottom-right corner. The browser calculates the gradient line, projects each pixel onto it, and interpolates the color based on its position between 0% and 100%.

Related Calculators

Box Shadow Generator

Generate CSS box-shadow values with a live preview and one-click copy.

Color Contrast Checker

Check WCAG 2.1 color contrast ratios between foreground and background hex colors.

Frequently Asked Questions

What is the difference between linear and radial gradients?
A linear gradient transitions colors along a straight line at a specified angle. A radial gradient transitions colors outward from a center point in a circular or elliptical shape. Linear gradients are more common for backgrounds and banners. Radial gradients work well for spotlight effects and circular UI elements.
Can I use more than two color stops?
Yes. CSS gradients support any number of color stops. For example, linear-gradient(90deg, red 0%, yellow 50%, green 100%) creates a three-color gradient. The browser interpolates smoothly between each adjacent pair of stops.
What does the angle value mean in a linear gradient?
The angle defines the direction of the gradient line. At 0deg, the gradient goes from bottom to top. At 90deg, it goes from left to right. At 180deg (the default), it goes from top to bottom. The angle rotates clockwise from the bottom axis.
How do I create a hard color boundary instead of a smooth transition?
Set two adjacent color stops to the same position. For example, linear-gradient(90deg, #ff0000 50%, #0000ff 50%) creates a sharp split between red and blue at the midpoint with no blending.
Are CSS gradients better than gradient images?
CSS gradients have several advantages over image files. They require no HTTP requests, scale to any resolution without pixelation, and can be modified with CSS without image editing tools. They also tend to be smaller in file size than equivalent image files. For complex gradients with many stops or artistic effects, an image may still be more practical.