CSS Gradient Generator

CSS Gradient Generator lets you build a gradient by eye and copy the code when it looks right. Choose linear or radial, set the angle or shape, and add as many colour stops as you need. The preview fills a large area so you see the gradient at a realistic size rather than in a thumbnail.

Each stop has a colour and a position as a percentage, both adjustable. Adding a third or fourth stop is where gradients stop looking like a default and start looking designed, because the transition can be weighted toward one end rather than passing evenly through the middle.

The generated CSS is shown ready to paste, as a complete background property. A random button produces a fresh combination when you are stuck, and the whole thing can be reversed in one click, which is often the fastest way to find out whether a gradient reads better running the other way.

• Linear gradients with any angle, and radial gradients
• Two or more colour stops, each with its own position
• Add, remove and reorder stops
• Large live preview
• Reverse the gradient in one click
• Random gradient button
• Copies a complete, valid CSS background property

The css gradient generator is used by writers, developers, students, marketers and anyone else who needs the job done once without installing software. Common cases include:

• Designing a hero background for a page
• Creating a subtle gradient for a button or card
• Building a colourful placeholder image in CSS
• Exploring colour combinations quickly
• Producing a gradient that matches a brand palette