CSS Gradient Generator
DesignGenerate linear and radial CSS gradient code instantly. Pick colours and direction, copy the background property — free, browser-based, no sign-up needed.
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.
How to use this CSS Gradient calculator
- Select the gradient type — Linear for directional colour transitions, Radial for circular fills, Conic for angular sweeps.
- 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).
- Enter Colour 1 — the start colour as a hex code,
rgb(),hsl(), or a named colour. - Enter Colour 2 — the end colour in the same format.
- Optionally enter Colour 3 — a mid-stop placed between Colour 1 and Colour 2. Leave blank for a two-stop gradient.
- Click Generate — the CSS Declaration and Gradient Value outputs appear immediately.
- 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| — | Top-left → Bottom-right | |45deg| — | Bottom-left → Top-right |
Frequently Asked Questions
What is a CSS gradient?
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.
What is the difference between linear, radial, and conic gradients?
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.
How do I add a gradient to an element in CSS?
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)]`.
What colour formats does the generator accept?
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.
How do I add a mid-stop colour to the gradient?
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)`.
What is the difference between 'to right' and '90deg' for gradient direction?
`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.
How do I make a gradient background for a full-page section in CSS?
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.
Can I use a gradient as a text fill?
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.
Is there a browser compatibility concern with CSS gradients?
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.
How do I create a transparent gradient for a fade-out effect?
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.
What are some common CSS gradient patterns used in Indian product design?
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.