How to Create a CSS Gradient (Linear, Radial, Conic)

You can build any CSS gradient — linear, radial, or conic — using the brevio CSS Gradient Generator. Choose your gradient type, adjust the angle and color stops, and copy the ready-to-paste CSS property. Everything runs in your browser: no file is uploaded and no network request is made during generation.

How to Create a CSS Gradient Step by Step

1. Open the CSS Gradient Generator. No account required. The tool loads with a default orange-to-violet linear gradient at 135°.
2. Choose a gradient type. Click linear, radial, or conic to switch. The live preview updates immediately.
3. Adjust the angle. For linear and conic gradients, drag the angle slider between 0° and 360°. 0° is top to bottom, 90° is left to right, 135° is diagonal. Radial gradients always radiate from the center — no angle applies.
4. Edit color stops. Click the color swatch to open the browser's native color picker and choose any color. Drag the position slider to move the stop along the gradient — 0% is the start, 100% is the end.
5. Add more stops. Click + Add stop to insert a third (or fourth, or fifth) color stop. Multi-stop gradients are valid CSS and supported in all modern browsers.
6. Remove a stop. Click the ✕ button next to any stop. The remove button only appears when you have more than two stops — a gradient requires at least two.
7. Copy the CSS. Click Copy next to the CSS output. The full background: <gradient>; declaration is now on your clipboard — paste it directly into your stylesheet or CSS-in-JS.

How to Verify No Data Leaves Your Browser

The gradient generator computes everything with a few lines of JavaScript string interpolation — no fetch call, no WebSocket, no image upload. You can confirm this in under a minute:

1. Open DevTools. Press F12 on Windows/Linux or ⌘⌥I on Mac.
2. Go to the Network tab. Select the Fetch/XHR filter. Check Disable cache to prevent cached responses from masking requests.
3. Use the gradient generator. Change the type, move sliders, and click Copy.
4. On brevio you will see zero POST or GET requests to external endpoints. Compare this to a server-based tool like cssgradient.io, which fires analytics and CDN requests on every interaction.

CSS Gradient Types: Linear vs Radial vs Conic

CSS Gradient Syntax Reference

The generated CSS follows the W3C syntax exactly. Here are the patterns for each type:

Linear gradient (2 stops)

background: linear-gradient(135deg, #f97316 0%, #8b5cf6 100%);

The first argument is the angle in degrees. Each color stop is a hex (or any valid CSS color) followed by a position percentage. You can omit the percentages on the first and last stops — browsers default them to 0% and 100%.

Linear gradient (3 stops)

background: linear-gradient(90deg, #f97316 0%, #22c55e 50%, #8b5cf6 100%);

The middle stop at 50% creates a three-color transition. You can stack as many stops as needed.

Radial gradient

background: radial-gradient(circle, #f97316 0%, #8b5cf6 100%);

The circle keyword forces a circular shape. Use ellipse (the default) for an oval that fills the element. You can also set the center: radial-gradient(circle at 30% 70%, #f97316 0%, #8b5cf6 100%).

Conic gradient

background: conic-gradient(from 135deg, #f97316 0%, #8b5cf6 100%);

The from <angle> sets where the sweep starts. Without it, the sweep starts at the top (12 o'clock). Combine with border-radius: 50% to make a circular pie chart.

Using CSS Gradients in Tailwind CSS

Tailwind 3+ supports arbitrary values in square brackets. You can paste any gradient directly into a class:

<div class="bg-[linear-gradient(135deg,#f97316_0%,#8b5cf6_100%)]">
  ...
</div>

Note the underscore syntax: Tailwind arbitrary values use underscores in place of spaces inside class names. The gradient itself uses standard CSS hex color syntax.

For gradients you will reuse across the project, extend Tailwind's backgroundImage config instead:

// tailwind.config.ts
theme: {
  extend: {
    backgroundImage: {
      'brand-gradient': 'linear-gradient(135deg, #f97316 0%, #8b5cf6 100%)',
    },
  },
}

Then use bg-brand-gradient as a regular class anywhere in your templates.

Using a Gradient as a Background Image Fallback

Conic gradients lack IE support, and very old mobile browsers may not support all gradient types. If you need a safe fallback, stack multiple background declarations — older browsers ignore the one they cannot parse:

/* Fallback for browsers that don't support conic-gradient */
background: linear-gradient(135deg, #f97316 0%, #8b5cf6 100%);
/* Preferred conic gradient for modern browsers */
background: conic-gradient(from 135deg, #f97316 0%, #8b5cf6 100%);

The second declaration overwrites the first in browsers that understand conic-gradient. Browsers that do not will silently ignore it and use the linear fallback.

Common CSS Gradient Use Cases

• CTA button backgrounds: A short linear gradient from a brand color to a slightly lighter or darker shade gives depth without a full design system.
• Hero section backgrounds: Full-width linear gradients from an opaque color to transparent let the underlying content or image show through at one end.
• Text gradients: Apply a gradient to text with background-clip: text; -webkit-background-clip: text; color: transparent; — supported in Chrome, Safari, and Firefox.
• Progress bars: A linear gradient from green to yellow to red communicates urgency without JavaScript.
• Pie charts: Conic gradients with hard stops (no blending) create clean pie slices: conic-gradient(red 0% 40%, blue 40% 70%, green 70% 100%).

Frequently Asked Questions

What is a CSS gradient?

A CSS gradient is a smooth color transition defined in CSS without an image file. Browsers render it natively at any resolution, so it looks sharp on retina/HiDPI screens and has zero file size overhead.

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

Linear gradients transition along a straight line at a set angle. Radial gradients radiate outward from a center point in a circle or ellipse. Conic gradients rotate around a center point like a colour wheel — color changes angle rather than distance from the origin.

How do I add more than two colours?

Click + Add stop in the gradient generator to insert a third colour stop. Each stop has its own colour picker and a position slider (0–100%). You can add as many stops as you like — CSS imposes no practical limit.

Is this gradient compatible with all browsers?

Linear and radial gradients have full support in all modern browsers (Chrome, Firefox, Safari, Edge) and have for many years. Conic gradients require Chrome 69+, Firefox 83+, or Safari 12.1+. Internet Explorer does not support any CSS gradients natively, but IE usage is negligible today.

Can I use this gradient in Tailwind CSS?

Yes. Use the arbitrary value syntax: bg-[linear-gradient(135deg,#f97316_0%,#8b5cf6_100%)]. Replace spaces with underscores inside the brackets. For reusable gradients, add them to theme.extend.backgroundImage in your Tailwind config.