ToolXkit Icon

CSS Gradient Generator

Build a linear, radial or conic gradient and copy the CSS.

  • Free
  • No signup
  • Nothing uploaded
  • No watermark

CSS

background: linear-gradient(90deg, #2563EB 0%, #FFFFFF 100%);

Worked out in your browser. Nothing you enter or open is uploaded.

How to Make a CSS Gradient Background

CSS Gradient Generator: before and after TEXT A YOUR INPUT CSS GRADIENTGENERATOR DONE A RESULT

A soft blend from one colour to another makes a hero banner, a button or a slide background look finished without needing an image file. This generator builds that blend from two colours and writes the CSS line for you, so there is no need to remember the syntax.

Pick a first and second colour, choose Linear, Radial or Conic, and drag the Angle slider. The large preview strip shows the exact result, and the code block underneath holds a ready-to-paste background rule with a Copy button.

No software to install Free Works on any device

Steps to Build a Gradient

  1. 1. Choose the two colours

    Set the first colour and the second colour with the swatches or by typing codes. Hex, rgb(), hsl() and names like skyblue all work.

  2. 2. Pick the gradient kind

    Linear blends in a straight line, Radial spreads out from the centre in a circle, and Conic sweeps round a point like the hands of a clock.

  3. 3. Set the angle

    For Linear and Conic, drag Angle from 0 to 360 degrees. 90 runs left to right, 180 top to bottom. Radial has no angle, so the slider hides.

  4. 4. Copy the CSS

    Press Copy above the code block and paste the background line into your stylesheet, a page builder’s custom CSS box or an inline style.

Try it now

What Is a CSS Gradient?

A CSS gradient is an image that the browser draws itself from a short line of code. Because it is not a picture file, it loads instantly, stays sharp at any screen size and can be changed by editing two colour codes. Linear, radial and conic gradients are supported by every modern browser.

Why Use Colour and CSS Tools?

Choosing colours that work together and writing CSS for shadows, gradients or grids takes a lot of trial and error. These tools show a live preview as you adjust, then hand you the colour codes or CSS to copy.

“See it first, then copy the code.”
  • Live previews while you adjust
  • Codes in HEX, RGB and HSL
  • CSS ready to paste
  • Designs checked for colour blindness
  • Palettes that work together
  • Readable text checked for contrast
  • Print colours in CMYK
  • Colours taken from photos

Popular Uses for Colour Pickers and CSS Generators

Designers and site owners use these for the same handful of jobs.

  • Brand colours Build a palette around a logo colour with matching tints, shades and accents.
  • Readable buttons Check that text on a coloured button passes the WCAG contrast ratio.
  • Card shadows Adjust a box shadow until a card looks right, then copy the CSS.
  • Page layouts Set up a CSS grid or flexbox layout visually instead of guessing values.
  • Print artwork Convert screen colours to CMYK and check bleed before sending a flyer to print.
  • Colours from a photo Pull the main colours out of a product photo to match a web page.
  • Colour blind checks See how a chart or poster looks to people with different kinds of colour blindness.
  • Button styles Design a gradient, glass or soft 3D style button and take the code.

What the Gradient Generator Gives You

Three gradient types

Linear, radial and conic, switched from a single menu, with the preview redrawn straight away.

Angle control

A slider from 0 to 360 degrees sets the direction of a linear blend or the start point of a conic sweep.

Any colour format in

Type colours the way you already have them; the output always uses clean hex codes.

One-click copy

A complete background declaration, including the semicolon, copied to your clipboard in one press.

Why Use ToolXkit for CSS Gradient Generator?

Your files stay with you

Everything runs inside your browser. Nothing you open or type is uploaded to a server.

Design Tools for Different Users

Designers

Build palettes, test contrast and convert colours between HEX, RGB, HSL and CMYK.

Front-end developers

Generate CSS for gradients, shadows, animations and layouts and check it in a preview.

Design students

Learn how colour harmony and CSS properties work by changing them live.

Small business owners

Pick consistent brand colours for a shop sign, website and social posts.

Print designers

Convert colours for print and work out bleed, trim and pixel sizes.

Accessibility testers

Check contrast ratios and preview designs through different types of colour blindness.

Best Times to Pick Colours and Write CSS

These tools help when you are:

  • Starting a new brand or logo
  • Fixing text that is hard to read
  • Styling a button or card
  • Preparing a flyer for print
  • Matching a colour from a photo
  • Laying out a page with grid
  • Checking a chart for colour blindness
  • Converting a HEX code to RGB

Tips for Better Gradients

  1. Colours close to each other on the colour wheel, such as blue and purple, blend more smoothly than opposites like red and green.

  2. If text sits on the gradient, check its contrast against both ends of the blend, not just the middle.

  3. Want three colours? Copy the code and add another hex value between the two, separated by commas.

  4. Set a plain background-color before the gradient line so very old email clients still show something sensible.

Frequently Asked Questions

Answers to common questions about this tool.

How do I add a gradient background in CSS?

Use the background property with a gradient function, for example background: linear-gradient(90deg, #2563EB 0%, #FFFFFF 100%). This tool writes that line for you; paste it inside the rule for the element you want to colour.

Can I use more than two colours?

The generator builds two-colour blends. CSS itself allows more, so copy the result and add extra colour stops by hand, such as linear-gradient(90deg, red, orange, yellow).

What does the angle mean in a linear gradient?

It is the direction the colour travels. 0 degrees goes bottom to top, 90 goes left to right, 180 goes top to bottom and 270 goes right to left. Values in between run diagonally.

What is a conic gradient used for?

Conic gradients sweep colour around a centre point. They are handy for pie charts, colour wheels, loading rings and shiny metal effects. The angle sets where the sweep begins.

Will the gradient work in all browsers?

Linear and radial gradients work in every current browser, and conic gradients have been supported by Chrome, Edge, Firefox and Safari for several years. No vendor prefixes are needed today.

Can I copy the CSS straight into my project?

Yes. The generators give plain CSS that works in current browsers. Copy it into your stylesheet, then adjust class names or values to fit the rest of your design.

Is CSS Gradient Generator free for commercial work?

Yes. The colours, palettes and CSS you make are yours to use in client projects, products or anything else, with no credit required and no fee.

Why do my screen colours look different when printed?

Screens mix light in RGB, while printers mix ink in CMYK, and some bright screen colours cannot be printed. Convert to CMYK and ask your printer for a proof before a large print run.

What contrast ratio should my text have?

WCAG asks for at least 4.5 to 1 for normal text and 3 to 1 for large text. The Colour Contrast Checker shows whether your pair passes, so you can adjust before publishing.

Do I need to sign in to use CSS Gradient Generator?

No. There is no account to create. Open the page, adjust the settings and copy the result. Your choices are worked out on your own device and never leave it.

Further reading

More Colour & CSS Tools

Other free tools for the same kind of job.

Browse all tools