What is a CSS linear-gradient?

linear-gradient() creates a colour transition along a straight line in a specified direction. You define the direction (angle or keyword) and two or more colour stops.

What are the direction keywords for linear-gradient?

You can use angle values like 45deg or directional keywords: to top, to bottom, to left, to right, to top left, to bottom right, and so on.

Can I use more than two colours in a linear gradient?

Yes. You can add as many colour stops as needed. Each stop has a colour and an optional position: linear-gradient(to right, red 0%, yellow 50%, green 100%).

What is the difference between a hard stop and a soft stop?

A soft stop (default) creates a smooth transition between colours. A hard stop — two colour stops at the same position — creates a sharp, instant colour change without any blend.

Can I use transparent in a linear gradient?

Yes. Use the colour transparent or any colour with 0 alpha (e.g. rgba(0,0,0,0)) as a stop value to fade to transparency.

Browse tools

Free · Fast · Privacy-first

Linear Gradient CSS Generator

Linear gradients are the most widely used gradient type in CSS — for backgrounds, buttons, hero sections, and dividers. FixTools lets you configure colour stops, angle, and direction visually and generates the CSS linear-gradient() code for you to copy.

⚡ Use Tool Now How it works

Cost: Free forever
Sign-up: Not required
Processing: In your browser
Privacy: Files stay local

⚡

Set any angle from 0deg to 360deg

🔒

Add, remove, and position colour stops freely

✨

Live preview updates as you adjust settings

CSS Tool

Gradient

All processing happens in your browser — your files are never uploaded to any server.

🚀Open Gradient

100% Free · No account · Works on any device

How to use this tool

💡

Configure your linear gradient direction and colour stops. Example output: background: linear-gradient(to right, #f093fb 0%, #f5576c 100%)

How It Works

Step-by-step guide to linear gradient css generator:

1
Open the gradient tool
Click "Open CSS Gradient Generator" and select the Linear Gradient type.
2
Choose an angle or direction
Enter an angle in degrees (0deg to 360deg) or use keywords like to right, to bottom, to top left, etc.
3
Add colour stops
Add at least two colour stops. Click each stop to set its colour. Drag stops to adjust their position along the gradient.
4
Preview the result
The live preview shows your gradient applied to a sample element as you edit.
5
Copy the CSS
Copy the background: linear-gradient(...) output and paste into your stylesheet.