Tool 03

Gradient Generator

Pick two colors and an angle, then copy the CSS gradient code straight into your project.

Start

End

Angle: 135°

Using this in your CSS

Paste the generated line directly into any element's background property. The angle controls the direction of the gradient — 0° goes bottom to top, 90° goes left to right, 180° goes top to bottom, and so on. For buttons and hero sections, 120–150° tends to look the most natural.

Can I add a third color?

This tool builds a simple two-color gradient for speed. For a three-color gradient, take the generated code and add another color stop manually, e.g. linear-gradient(135deg, #FF6B4A, #B85BD8, #5B6EE8).

Will this work in every browser?

Yes — linear-gradient() is supported in all modern browsers without a vendor prefix.