How to Create CSS Gradients (and Copy the Code)

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.

Related Guides

• Color Picker — Get HEX, RGB, HSL Values
• JPG vs PNG vs WebP — Which to Use?