Gradient Generator

Design a smooth two-color linear gradient — then copy the CSS straight into your stylesheet.

Start color

End color

Angle: 90°

How it works

A CSS linear gradient blends two (or more) colors along a straight line. The angle sets the direction of that line: 90deg runs left to right, 180deg runs top to bottom, and 0deg runs bottom to top — any angle in between tilts the blend diagonally. The browser computes every in-between shade by interpolating the red, green, and blue channels of your two colors, which is what makes the transition perfectly smooth with no banding. The snippet this tool produces is a plain background declaration, so it works anywhere a background image would — buttons, hero sections, cards — and you can paste it into any stylesheet as-is.