Home›Generators›Design›CSS Gradient Generator

CSS Gradient Generator

Design

Generate linear and radial CSS gradient code instantly. Pick colours and direction, copy the background property — free, browser-based, no sign-up needed.

Reviewed by the thecalcu.com team · Last updated July 10, 2026

CSS Declarationcss

What is a CSS Gradient?

A CSS Gradient Generator builds the CSS background property declaration for linear, radial, and conic gradients, ready to copy and paste directly into a stylesheet, a Tailwind arbitrary value, or a CSS-in-JS string.

CSS gradients are one of the most widely used design elements in modern web interfaces: hero section backgrounds, card overlays, button fills, text colour effects, and decorative borders all commonly use gradient fills. The alternative, exporting a PNG gradient image from a design tool, produces a larger file, requires an HTTP request, looks blurry on high-density screens, and cannot be easily edited in code. A pure CSS gradient is a single property declaration, renders at any resolution, and can be changed by editing a hex code.

The generator covers the three gradient types available in CSS: linear (colour transitions along a straight line at any angle), radial (circular or elliptical transitions from a centre point), and conic (colour sweeps around a centre point). Each accepts two required colour stops and an optional mid-stop for three-colour gradients.

For generating colour values to use as gradient stops, the Colour Palette Generator produces harmonious multi-colour palettes from a base colour using colour theory rules. The Hex Color Generator converts between hex, RGB, and HSL formats, useful when you need to express a gradient stop in a specific colour notation.

Why Use a CSS Gradient Generator?

Writing gradient CSS by hand is straightforward for simple cases but quickly becomes tedious when you need to experiment with different directions, colour combinations, or stop positions. The generator eliminates the write-save-refresh cycle for the exploration phase: adjust colours and direction, see the exact CSS output, copy when satisfied.

The output is syntactically correct and uses the modern unprefixed linear-gradient() syntax, no -webkit-, -moz-, or -o- vendor prefixes, which have not been required since 2013. Copy-paste into any current project without modification.

Who Should Use This Generator?

Frontend developers building UI components who need gradient backgrounds, overlays, or fills. The generated declaration is production-ready CSS, no framework translation required.

Designers working in code who prototype directly in HTML/CSS and need to iterate quickly on gradient combinations without switching to a design tool.

Tailwind CSS developers who can use the generated gradient value as an arbitrary bg-[...] class or add it to tailwind.config.js as a custom background utility.

CSS learners who want to understand the syntax for the three gradient types, the generator makes the relationship between the inputs and the output declaration transparent.

What Insights Does the CSS Gradient Generator Give You?

Two outputs per generation:

CSS Declaration, the complete background: ...; property, ready to paste into any CSS rule. For example: background: linear-gradient(135deg, #2F6FED, #1A1A2E);

Gradient Value Only, just the function call without the property name, for use in contexts where you need to supply the value separately: Tailwind arbitrary values (bg-[linear-gradient(...)]), CSS custom properties (--hero-bg: linear-gradient(...)), or CSS-in-JS template strings.

How to use this CSS Gradient calculator

  1. Select the gradient type, Linear for directional colour transitions, Radial for circular fills, Conic for angular sweeps.
  2. Choose a direction, for Linear, select a cardinal direction or diagonal angle. For Radial and Conic, the direction field controls the conic start angle (Radial always emanates from the centre).
  3. Enter Colour 1, the start colour as a hex code, rgb(), hsl(), or a named colour.
  4. Enter Colour 2, the end colour in the same format.
  5. Optionally enter Colour 3, a mid-stop placed between Colour 1 and Colour 2. Leave blank for a two-stop gradient.
  6. Click Generate, the CSS Declaration and Gradient Value outputs appear immediately.
  7. Copy the CSS Declaration and paste it into your stylesheet, component, or design token.

Formula & Methodology

The generator constructs the gradient value by assembling the CSS gradient function from the selected inputs:

Linear gradient:
css background: linear-gradient(<direction>, <color1>, [<color3>,] <color2>); 

Radial gradient:
css background: radial-gradient(circle, <color1>, [<color3>,] <color2>); 

Conic gradient:
css background: conic-gradient(from <angle>, <color1>, [<color3>,] <color2>); 

The mid-stop (Colour 3), when provided, is placed between the two outer stops without an explicit percentage position, the browser places it at 50% by default. To override the position, edit the output directly: linear-gradient(to right, #2F6FED, #ffffff 30%, #1A1A2E).

Direction reference for linear gradients:

| Keyword | Equivalent angle | Effect |
|---|---|---|
| to right | 90deg | Left → Right |
| to bottom | 180deg | Top → Bottom |
| to left | 270deg | Right → Left |
| to top | 0deg | Bottom → Top |
| 135deg | N/A | Top-left → Bottom-right |
| 45deg | N/A | Bottom-left → Top-right |

Frequently Asked Questions

A CSS gradient is a smooth colour transition defined entirely in CSS, no image file required. The browser renders it as a background fill, calculating the intermediate colours between the stops you define. Gradients are specified as values of the `background` or `background-image` CSS property and are supported in all modern browsers. Because they are vector-based and resolution-independent, CSS gradients look sharp on any screen density including Retina and high-DPI displays.
A linear gradient transitions colours along a straight line in a specified direction, left to right, top to bottom, or at any angle. A radial gradient radiates outward from a centre point in a circular or elliptical pattern. A conic gradient sweeps colours around a centre point like a pie chart or colour wheel. Linear gradients are by far the most common in web design; radial gradients are useful for spotlight and glow effects; conic gradients are newer (supported in all modern browsers) and used for pie charts, colour wheels, and angular decorative elements.
Copy the generated declaration and paste it into your CSS rule: `background: linear-gradient(to right, #2F6FED, #1A1A2E);`. For a background with fallback to a solid colour for older browsers, add a solid `background-color` property before the gradient line: `background-color: #2F6FED; background: linear-gradient(to right, #2F6FED, #1A1A2E);`. In Tailwind CSS, use an arbitrary value: `bg-[linear-gradient(to_right,#2F6FED,#1A1A2E)]`.
The generator accepts any valid CSS colour value in any of the three colour input fields: hex codes (`#2F6FED`, `#fff`, `#2f6fed88` for 8-digit hex with alpha), `rgb()` and `rgba()` notation (`rgba(47, 111, 237, 0.5)`), `hsl()` and `hsla()` notation (`hsl(220, 83%, 56%)`), and named CSS colours (`royalblue`, `coral`, `transparent`). The output uses exactly the values you enter, no conversion is applied.
Enter a value in the Colour 3 (Optional mid-stop) field. The mid-stop colour is placed between Colour 1 and Colour 2 in the gradient, at the midpoint (50%). For example, entering white (`#ffffff`) as Colour 3 with blue and dark as the outer colours produces a blue → white → dark gradient. To control the exact position of the mid-stop (e.g. at 30% rather than 50%), edit the generated output manually: `linear-gradient(to right, #2F6FED, #ffffff 30%, #1A1A2E)`.
`to right` and `90deg` both produce a left-to-right gradient and are interchangeable in modern browsers. The keyword forms (`to right`, `to bottom`, `to top left`) are more readable; the degree forms give finer control for any exact angle. Zero degrees (`0deg`) is bottom to top. Degrees increase clockwise: `90deg` is left to right, `180deg` is top to bottom, `270deg` is right to left. The generator uses keyword forms for the four cardinal directions and degree values for the diagonals.
Apply the generated declaration to the element you want to fill: `.hero { background: linear-gradient(135deg, #2F6FED, #1A1A2E); min-height: 100vh; }`. For a full-page background on `body`, set `min-height: 100vh` and `background-attachment: fixed` to prevent the gradient from repeating when the page is taller than the viewport. In Tailwind CSS, the `bg-gradient-to-r from-[#2F6FED] to-[#1A1A2E]` utilities produce a left-to-right gradient without custom CSS.
Yes, with a CSS technique that uses `background-clip: text`. The CSS is: `background: linear-gradient(to right, #2F6FED, #1A1A2E); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;`. This applies the gradient as the fill colour of the text characters rather than the element background. Browser support is broad, including Chrome, Firefox, Safari, and Edge, but the `-webkit-` prefix is still required for Safari.
The standard `linear-gradient()` and `radial-gradient()` functions have been supported in all major browsers since 2013, there are no compatibility concerns for any current browser or device. The `conic-gradient()` function is newer (added to the CSS specification in 2018) and is supported in Chrome 69+, Firefox 83+, Safari 12.1+, and Edge 79+. For projects that must support older browsers, `conic-gradient()` requires a fallback; linear and radial gradients do not.
Use `transparent` as one of the colour stops. For a bottom-fade effect (content fades to white at the bottom): `linear-gradient(to bottom, rgba(255,255,255,0), #ffffff)`. For an overlay that fades from black to transparent (common on image overlays): `linear-gradient(to bottom, rgba(0,0,0,0.7), transparent)`. Using `transparent` as a stop is equivalent to `rgba(currentColor, 0)` in modern browsers, the browser interpolates through the appropriate intermediate colours.
Indian product and fintech UIs frequently use deep blue-to-navy gradients (similar to the thecalcu.com result card: `linear-gradient(135deg, #1A1A2E, #243060)`) for hero sections and dashboard headers, saffron-to-gold gradients (`#FF9933` to `#E9C46A`) for festive or brand-aligned elements, and green gradients for success states and financial gain indicators. Subtle light grey gradients (`#F7F8FA` to `#E2E6ED`) are used as page background fills to create visual depth without strong colour.
Also known as
css gradient codelinear gradient generatorradial gradient generatorbackground gradient cssgradient color pickercss background gradient