Skip to content

CSS Gradient Generator – Linear, Radial and Conic

Pick a gradient type, set the angle or centre, add up to six colour stops and copy ready-to-paste CSS. The preview updates as you drag.

Preview

Gradient type

Angle120°

Presets

Colour stops

Type HEX, rgb() or hsl(), or use the colour picker. Between 2 and 6 stops.

  1. 0%
  2. 55%
  3. 100%

CSS code

background: linear-gradient(120deg, #6366F1 0%, #A855F7 55%, #EC4899 100%);

How to use the CSS gradient generator

  1. Choose a gradient type – Linear, Radial or Conic. For linear gradients set the Angle; for conic gradients set the Start angle; for radial and conic gradients move the centre with Centre, horizontal and Centre, vertical. Radial gradients also have a Shape switch for Circle or Ellipse.
  2. Edit the colour stops. Type a colour into each box or use the square colour picker beside it, then drag the slider under it to set where that colour sits, from 0% to 100%.
  3. Add, remove or rearrange stops with Add stop, the cross button and the up and down arrows. Reverse flips the whole gradient.
  4. Start from a preset or press Random gradient if you want ideas, then adjust from there.
  5. Press Copy CSS under the code box and paste the result into your stylesheet.

Features

  • Linear, radial (circle or ellipse) and conic gradients.
  • Between two and six colour stops, each with its own position slider.
  • Accepts HEX, rgb() and hsl() colours, including transparency.
  • Large live preview on a checkerboard, plus a thin strip that shows the stops from left to right.
  • New stops appear in the widest gap, coloured halfway between their neighbours, so the gradient stays smooth.
  • Six original presets and a random gradient button that picks related, balanced hues.
  • One clean background declaration with a copy button – no prefixes and no extra markup.
  • Clear message naming the stop whose colour can't be read, while the preview keeps showing the last valid gradient.

Getting better-looking gradients

Gradients between two colours that sit far apart on the colour wheel, such as blue and orange, often pass through a dull grey in the middle. Adding a third stop with a bright in-between colour, for example purple between blue and pink, keeps the midpoint lively. The Add stop button does most of this work by mixing the two neighbouring colours for you, and you can then nudge the new colour to taste.

Subtle gradients usually look more professional than loud ones. Try two shades of the same hue a few steps apart, with an angle of 135 or 160 degrees, for card backgrounds and page headers. Keep strong multi-colour gradients for small areas like buttons, badges and illustrations.

If you are placing text on top of a gradient, check it is readable at both ends. The colour converter shows the contrast ratio of any colour against white and black, which is a quick way to test the lightest and darkest stops.

Where the colours come from

Brand colours are the best starting point. If your palette lives in a logo or a screenshot, the image colour picker lets you click a pixel and copy its HEX code, which you can paste straight into a stop here. To give the same element depth, pair the gradient with a soft shadow from the box shadow generator.

Why use Fileora's gradient generator

Writing gradient CSS by hand means guessing angles and percentages, reloading the page and guessing again. Here you see every change instantly, and the code you copy is exactly what the preview shows. The tool is free, needs no sign-up and works on phones as well as desktops. Everything runs in your browser, so your designs never leave your device.

Frequently asked questions

How do I use the generated gradient on my website?

Press Copy CSS and paste the line into the rule for your element, for example a hero section or a button. The code is a single background declaration, so it replaces any solid background colour that was there before. If you only want the gradient value, copy the part after background: and use it with background-image instead.

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

A linear gradient changes colour along a straight line at the angle you choose. A radial gradient spreads outwards from a centre point as a circle or an ellipse. A conic gradient sweeps around a centre point like the hands of a clock, which is useful for colour wheels and pie-chart style effects.

Which colour formats can I type?

HEX codes such as #6366F1 or #6366F180, rgb() and rgba(), and hsl() and hsla(), in either the modern space-separated syntax or the older comma syntax. Every colour is written into the CSS as a HEX code, with eight digits when the colour is partly transparent.

Can a gradient fade to transparent?

Yes. Give a stop some transparency, for example hsl(239 84% 67% / 0) or #6366F100. The preview sits on a checkerboard, so you can see exactly where the gradient becomes see-through. The colour picker keeps any transparency you typed when you use it to change the colour.

Do I need vendor prefixes like -webkit-?

No. Linear and radial gradients have worked without prefixes in every mainstream browser for many years, and conic gradients are supported by all current versions of Chrome, Edge, Firefox and Safari. That is why the tool writes plain, unprefixed CSS.

Why did my stops change order in the list?

The list is kept in the same order as the gradient itself. When you let go of a position slider after dragging a stop past another one, the list re-sorts so the first row is always the colour at the start of the gradient.

Is anything I make uploaded or saved?

No. The gradient is built in your browser as you work. Nothing is sent to a server, and the settings are cleared when you close the page.

Related tools

Can't find the tool you need, or something isn't working?

Tell us which tool you'd like next or what went wrong. We read every message, and requests decide what we build next.

Request a toolReport a problem

Opens your email app. Please don't attach private files.