Gradient Generator

Create a gradient, adjust its colors and direction, then copy the CSS. Start from one of 60 presets if you prefer.

Gradient direction

Click to add, drag to move, double-click to remove.

Color Studio The full suite: picker, palettes, gradients, contrast Color Picker Pick colors and convert HEX, RGB, HSL, HSV, CMYK Color Palette Generator Build palettes and export PNG, JPG, CSS or JSON Contrast Checker Check text contrast and try approximate vision filters Image Color Picker Pick colors and extract palettes from supported images Image Converter Convert images to JPG, PNG, WebP, AVIF and other formats

Your statistics

0
Colors picked
0
Palettes exported
0
Gradients generated
0
Contrasts checked
Color picker
Favorite mode
0%
Usage score

How to make a CSS gradient

Docs

Choose Linear for a straight blend, Radial for a blend from a centre, Conic for a rotating blend or Multi-point for a mesh-style background. Start with a quick gradient if you want a ready-made set of colors.

Build a CSS gradient background

Four gradient types

Create linear, radial and conic backgrounds, or layer radial color points for a mesh-style blend.

60 starting presets

Search the library and apply a preset. Edit its colors and positions to fit your design.

Stops and color points

Use up to six stops for linear, radial and conic gradients, or up to ten points for multi-point gradients.

Show 3 moreShow less

CSS and SCSS code

Copy a CSS background or an SCSS variable. Check the result in your stylesheet after changing the direction or stop positions.

Export format limits

Tailwind output is a simplified linear gradient. SVG uses a linear fallback for conic and multi-point designs, so neither preserves every preview.

Related color tools

The mode links open the color picker, photo extractor, palette builder and contrast checker on their own pages.

Frequently asked questions

How do I make a CSS gradient?

Choose a type or preset, adjust the colors and positions, then copy the CSS background. Paste it into your stylesheet and check it in the browser where your design will run.

Which gradient types can I create?

Linear, radial, conic and multi-point. Multi-point blends are made from layered radial gradients over a base color rather than a separate CSS gradient function.

Can I create conic and mesh-style gradients?

Yes. Conic gradients arrange colors around a center point. Multi-point gradients layer radial color areas to produce a mesh-style background. Use CSS output to retain these types.

How many stops or points can I add?

Linear, radial and conic gradients allow up to six color stops. Multi-point gradients allow up to ten color points. The controls let you change their colors and positions.

Show 4 moreShow less

Will every export match the preview?

Tailwind output simplifies the design to a linear gradient, and SVG falls back to linear output for conic and multi-point gradients. PNG and JPG render at 1200 by 600 pixels, so their proportions and color blending can differ from the CSS preview. Use CSS output to retain the complete gradient type.

Are there ready-made presets?

Yes. Browse library contains 60 searchable presets across the four gradient types. Apply one as a starting point, then edit it.

Is the gradient generator free?

Yes. MORELESS provides the generator without an account. The calculations and code generation run in your browser.

How do I open the other color tools?

Use the mode links above the gradient controls. They open dedicated pages for the picker, image extractor, palette builder and contrast checker.

Technical details

CSS backgrounds

The CSS output uses linear-gradient(), radial-gradient() or conic-gradient() with colors and stop positions. Preview rendering uses the browser CSS engine. Test the copied result in its destination stylesheet.

Multi-point blends

Multi-point output layers radial-gradient() functions over a base color. Each point has a color and a two-dimensional position. There is no multipoint-gradient() CSS function.

Show 2 moreShow less

Code export boundaries

SCSS wraps a gradient in a variable. Tailwind output uses a simplified linear direction and a subset of colors. SVG supports the linear and radial output paths, with linear fallbacks for conic and multi-point types.

Image export boundaries

PNG and JPG use a 1200 by 600 pixel Canvas renderer with the current colors and available angle, center or point positions. The fixed image proportions and color blending can differ from the CSS preview. Conic image export requires Canvas support for conic gradients.