Sign up free

CSS Gradient Generator

Design a linear, radial or conic gradient with a live preview, then copy the CSS.

More tools
Format & minifyHTML Format/MinifyCSS Format/MinifyJS Format/MinifyJSON Format/MinifySQL Format/MinifyXML Format/Minify

About CSS Gradient Generator

A CSS gradient generator lets you design a background by eye instead of editing numbers blind: a hero banner that fades from one brand color to another, a soft radial glow behind a product photo, a subtle sheen on a button, or a conic gradient for a pie-style progress ring. Start from a preset or from scratch, and the preview updates with every change.

Choose a linear, radial or conic gradient, then set the angle, shape and position that apply to it. Add color stops, remove them and move them along the gradient to control where each color starts and ends. The CSS you copy starts with a solid background in your first color, so the element still gets a sensible background if the gradient can't be drawn. For exact color values, convert them first with the Color Converter. It all runs in your browser, with nothing uploaded and no limit on how often you use it.

How to use CSS Gradient Generator

  1. 1
    Choose a type

    Pick linear, radial or conic, or start from a preset.

  2. 2
    Set angle, shape and position

    Adjust them and watch the live preview.

  3. 3
    Edit the color stops

    Add, remove and move stops until the blend looks right.

  4. 4
    Copy the CSS

    Copy the code, fallback color included, into your stylesheet.

Why use Cubfile for this

  • Three gradient types

    Linear, radial and conic, each with its own settings.

  • Editable color stops

    Add stops, remove them and move them along the gradient.

  • Live preview

    Every change shows up right away.

  • Fallback included

    The CSS starts with a plain background in your first color, for when the gradient can't be drawn.

FAQ

CSS Gradient Generator: questions and answers

How do I make a gradient background in CSS?
Choose a type, set the colors and stops, and copy the generated CSS into your stylesheet. A solid fallback color is already included. When the stylesheet is ready to publish, the CSS Minifier makes it smaller.
What's the difference between linear, radial and conic gradients?
A linear gradient blends along a straight line at an angle, a radial one spreads out from a center point as a circle or ellipse, and a conic one sweeps around a center point like the hand of a clock.
Why does the CSS include a solid color?
It's a fallback. The first line sets a plain background in the gradient's first color, so a browser or email client that can't draw the gradient still shows that color instead of none.
Can I start from a ready-made gradient?
Yes. Pick one of the presets, then change the type, angle and colors to make it your own.
Is the CSS gradient generator free?
Yes. It runs in your browser with no sign-up and no limit.
Share CSS Gradient Generator with a friendIt runs in any browser, and they can try it without signing up.

Related tools

HTML HTML FormatterIndent messy HTML so it’s easy to read.
JS JavaScript FormatterBeautify minified or messy JavaScript.
HEX Color ConverterConvert colors between HEX, RGB, HSL and CMYK, and check contrast.
CRON Cron Expression GeneratorBuild cron expressions and see the next run times in plain words.
CSS CSS FormatterTurn minified CSS into neat, readable rules.
CSS CSS MinifierMinify CSS to load faster.
HTML HTML MinifierShrink HTML by removing comments and extra whitespace.
HTTP HTTP Request TesterSend GET, POST and other requests to a public API and read the response.