How to Create a CSS Gradient Online (Free Gradient Maker)

Want a gradient that's truly your own? With the free PaletteCSS gradient maker you can create a custom CSS gradient online, preview it live, and publish it to the gallery — then copy the CSS straight into your project.

Why make your own gradient?

Stock gradients are everywhere. A custom gradient built from your own brand colors keeps your UI distinctive and consistent. And once it's published, it becomes part of the searchable CSS gradients gallery.

How to create a gradient in 4 steps

1. Pick your colors

Choose two or more colors — ideally from an existing color palette so the result stays on-brand.

2. Choose linear or radial

Not sure which? Read linear vs radial gradients to pick the right style for your use case.

3. Set the angle and stops

Adjust the direction and color positions until the blend looks right in the live preview.

4. Publish and copy the CSS

Save it on the create-a-gradient page and copy production-ready CSS like this:

background: linear-gradient(135deg, #ff8a3d 0%, #f4600a 100%);

Put your gradient to work

Use it as a full-page gradient background, a button surface, or gradient text. New to the syntax? Start with our complete guide to CSS gradients.

Frequently asked questions

Is the gradient maker free?

Yes — creating, previewing and publishing CSS gradients on PaletteCSS is free.

Will the CSS work in all browsers?

Yes, the generated CSS works in all modern browsers. See the MDN reference for legacy prefixes.

Can I make a radial gradient too?

Absolutely — switch the type to radial in the maker. Learn the difference in linear vs radial gradients.

Ready to design one? Open the free gradient maker, or browse the gradients gallery for inspiration.