How to Create CSS Gradients (and Copy the Code)
Build beautiful CSS gradients visually, then copy the ready-to-use code into your website — free gradient generator.
June 3, 2026
Gradient Generator — free, no sign-up
Drag & drop · Instant download
What is a CSS Gradient?
A CSS gradient is a smooth blend between two or more colours, used as a background without needing an image. Gradients are everywhere in modern web design — buttons, hero sections, cards, and backgrounds — because they add depth and look great while staying lightweight and crisp at any size.
Linear vs Radial Gradients
- Linear gradient — colours blend along a straight line (top to bottom, left to right, or any angle). Best for backgrounds and buttons.
- Radial gradient — colours blend outward from a centre point in a circle or ellipse. Great for spotlights and glows.
How to Create a CSS Gradient (Step by Step)
Step 1: Open the Gradient Generator Go to the Kinsutools Gradient Generator.
Step 2: Pick your colours Choose a start and end colour. Add more colour stops for a multi-colour blend.
Step 3: Adjust the direction Set the angle (for linear) or shape (for radial) until it looks right. The preview updates live.
Step 4: Copy the CSS Copy the generated CSS code and paste it straight into your stylesheet's background property.
Tips for Great Gradients
- Stay subtle — colours close together on the colour wheel look more professional than clashing ones.
- Two colours is often enough — too many stops can look busy.
- Check contrast — if you put text on the gradient, make sure it stays readable across the whole blend.