CSS Gradient Generator

The CSS Gradient Generator builds CSS gradient code from two colours and a direction. You pick the colours and direction, run the tool, and copy the CSS into your stylesheet. It is for page backgrounds, buttons, banners, and other places where a smooth blend of two colours looks better than a flat colour.

What Is CSS Gradient Generator

CSS Gradient Generator writes the background declaration for a linear gradient. A gradient blends from one colour to another along a direction, such as to the right or to the bottom. The tool outputs the exact CSS line, so you do not have to remember the gradient syntax.

How to Use

1. Set Color 1 and Color 2 in the workspace.
2. Choose a Direction from the Direction list, for example To Right.
3. Click Process.
4. Read the CSS Code shown in the Result.
5. Click Copy to copy the CSS, then paste it into your stylesheet.

Worked Example

Example with the observed defaults: Color 1 #4f46e5, Color 2 #0ea5e9, Direction To Right.

Steps: Keep those values, click Process, then read the Result.

Result CSS Code: background: linear-gradient(to right, #4f46e5, #0ea5e9);

Custom example: Change Color 1 to #FF0000, Color 2 to #0000FF, Direction To Right, then click Process. The result follows the same pattern: background: linear-gradient(to right, #FF0000, #0000FF);

Limitations

• No sliders, presets, or Reset control are shown in the workspace. The controls are Color 1, Color 2, Direction, Copy, Process, and Clear.
• Only two colours are used. There is no control for extra colour stops, stop positions, or transparency in the workspace as observed.
• The Direction list includes To Right, To Left, To Bottom, To Top, Diagonal, 45deg, 135deg, and Radial. Only the To Right output was verified here. Check the Result for any other direction before you use it.
• The colour values are shown in the Result after processing. They are not shown as text next to the colour controls before processing.
• The Copy button needs clipboard permission in the browser. If copying is blocked, select the CSS Code text and copy it manually.
• Gradient appearance varies with the element size and background behind it. Test the gradient on the actual element, not only in the workspace.

Frequently Asked Questions

How do I use the gradient in my CSS?

Paste the CSS line into a rule, for example: .banner { background: linear-gradient(to right, #4f46e5, #0ea5e9); } Test it in the browser and adjust the colours if the contrast with the text is poor.

Can I use more than two colours?

Not in the workspace as observed. The tool uses Color 1 and Color 2 only. For more stops, edit the CSS line by hand and add extra colour values to the gradient.

What does the Direction list do?

Direction sets the blend direction. To Right blends from left to right. To Bottom blends from top to bottom. The Result shows the CSS for the direction you chose, so check it after clicking Process.

Why does Copy not work?

Copy needs clipboard permission. If the browser blocks it, select the CSS Code text in the Result and copy it manually, or allow clipboard access for the site and try again.