What is the difference between a linear and radial gradient?

A linear gradient blends colors along a straight line at the angle you set, while a radial gradient spreads colors outward from a center point. Switch the type to see each one update in the preview.

Does the angle slider work for radial gradients?

The angle slider controls the direction of a linear gradient. For radial gradients the colors spread from the center, so the angle has no visible effect, but the two color pickers still apply.

How do I use the generated CSS in my project?

Copy the generated rule and paste it into your stylesheet on the element you want, for example as a background property. No extra libraries or imports are needed.

CSS Gradient Generator

Type

Angle: 90deg

Color 1

Color 2

CSS

.element {
  background: linear-gradient(90deg, #2b59ff, #ff5e9c);
}

What this tool does

The CSS Gradient Generator helps you design a two-color gradient and gives you the exact CSS to paste into your project. It is handy for frontend developers, designers, and anyone building a landing page, button, card, or hero section who wants a clean background without writing the syntax by hand. You see the result while you adjust it, so there is no guesswork about how the final gradient will look.

How to use it

Choose the gradient type, either linear or radial, to set how the colors blend.
Drag the angle slider to rotate the direction of a linear gradient.
Pick your first color with the color picker.
Pick your second color with the second color picker.
Watch the live preview and the CSS code update instantly as you change any control.
Copy the generated rule, such as a background: linear-gradient(…) line, and paste it into your stylesheet.

A quick example

Set the type to linear, drag the angle to 90 degrees, then pick a deep purple and a soft blue. The preview shows a left-to-right blend and the code gives you something like background: linear-gradient(90deg, #7c3aed, #60a5fa). Paste that onto a button or section and you are done. If a gradient looks flat, try picking two colors that are further apart on the color wheel for more contrast.

Everything runs right in your browser, so your colors stay private, nothing is uploaded, and the tool is completely free with no sign-up.

Frequently asked questions

What is the difference between a linear and radial gradient?: A linear gradient blends colors along a straight line at the angle you set, while a radial gradient spreads colors outward from a center point. Switch the type to see each one update in the preview.
Does the angle slider work for radial gradients?: The angle slider controls the direction of a linear gradient. For radial gradients the colors spread from the center, so the angle has no visible effect, but the two color pickers still apply.
How do I use the generated CSS in my project?: Copy the generated rule and paste it into your stylesheet on the element you want, for example as a background property. No extra libraries or imports are needed.

Related developer tools

JSON Formatter Hash Generator Regex Tester HTML Encode / Decode Markdown Preview JWT Decoder Color Converter SQL Formatter

Last updated: June 17, 2026