Free CSS Gradient Generator

CSS Gradient Types Explained

CSS gradients let you create smooth color transitions without image files. They're resolution-independent, fast to render, and easy to customize. The background property accepts gradient functions directly — no extra markup needed.

There are three gradient functions in CSS: linear-gradient() renders colors along a straight line at any angle. radial-gradient() radiates colors outward from a center point in an elliptical or circular shape. conic-gradient() sweeps colors around a center point like the hands of a clock — perfect for pie charts and color wheels.

Each gradient accepts multiple color stops — pairs of a color and an optional position (percentage or length). The browser smoothly interpolates between adjacent stops. You can create hard edges by placing two different colors at the same position.

Linear vs Radial vs Conic Gradients

Linear gradients are the most common. They flow in a straight line defined by an angle (e.g., 90deg for left-to-right, 180deg for top-to-bottom). Use them for hero backgrounds, buttons, and overlays.

Radial gradients radiate from a center point outward. They default to an ellipse matching the element's aspect ratio, but you can force a circle. Great for spotlight effects, glows, and decorative backgrounds.

Conic gradients rotate color stops around a center point. They're the newest addition (supported in all modern browsers) and ideal for pie charts, color wheels, and artistic effects. The starting angle defaults to 0deg (top) but can be changed with from Xdeg.

Popular Gradient CSS Examples

Name	Preview	CSS
Sunset		linear-gradient(135deg, #f97316, #ec4899)
Ocean		linear-gradient(180deg, #0ea5e9, #1d4ed8)
Forest		linear-gradient(135deg, #22c55e, #15803d)
Lavender		linear-gradient(135deg, #a78bfa, #7c3aed)
Peach		linear-gradient(135deg, #fb923c, #f97316)
Berry		linear-gradient(135deg, #ec4899, #be185d)

What is a CSS gradient?

A CSS gradient is a smooth, browser-rendered transition between two or more colors, used as a background image. CSS supports linear, radial, and conic gradients. They're resolution-independent, lightweight, and don't require image files.

How do I make a transparent gradient?

Use rgba() or hsla() color values with an alpha of 0 for transparency. Example: linear-gradient(to right, rgba(79,110,247,1), rgba(79,110,247,0)). You can also use the keyword "transparent" as a color stop.

What is a conic gradient?

A conic gradient sweeps color transitions around a center point, like a pie chart. Unlike radial gradients that radiate outward, conic gradients rotate. Syntax: conic-gradient(from 0deg, red, blue, red). Supported in all modern browsers.

How do I add multiple colors to a gradient?

List additional color stops separated by commas. Optionally add a position for each: linear-gradient(90deg, #ff0000 0%, #00ff00 50%, #0000ff 100%). The browser interpolates smoothly between adjacent stops.

How do I use a gradient as a text color?

Apply the gradient as a background, then clip it to text: background: linear-gradient(...); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent. The gradient shows through the text shape.