CSS Gradient Generator

Linear vs radial gradients

A gradient is a smooth blend between two or more colors, rendered natively by CSS – no image required, so it stays razor-sharp and weighs nothing.

• Linear – colors blend along a straight line. The angle sets the direction: 0deg is bottom-to-top, 90deg left-to-right, 135deg a diagonal.
• Radial – colors blend outward from the centre in circles, useful for spotlights and soft backdrops.

Adding a third color stop creates richer, multi-tone blends. Pick colors that sit near each other on the wheel for a subtle look, or opposite for bold contrast – our color tools can help you choose.

How to use the CSS

Copy the generated rule and apply it as an element's background:

background: linear-gradient(135deg, #3b5bdb, #e64980);

Gradients work on any element that accepts a background, including buttons, cards and hero sections, and are supported by all modern browsers. Everything here is generated locally in your browser.

FAQ