Gradient Generator

Create a linear or circular radial CSS gradient with editable color stops. Preview the same gradient value used in the generated CSS.

Gradient Preview

Clear controls

Review inputs and results

Transparent methods

Understand the output

Works on any device

Mobile, tablet or desktop

How to Use the Gradient Generator

Choose linear or radial mode. Edit each color with the picker or a three- or six-digit HEX value, and set positions from 0% to 100%. Add or remove stops, adjust the linear angle and copy the generated background declaration.

CSS and Explanation

Linear: background: linear-gradient(angle, color position, …);
Radial: background: radial-gradient(circle, color position, …);

Stops are sorted by their percentage position before generating CSS. Equal positions create a sharp color transition. In linear mode, 0 degrees points upward and 90 degrees points right. Radial mode uses a centered circle and does not use the angle control.

Supports 2–20 opaque HEX stops and positions from 0% to 100%. Alpha colors, repeating gradients, custom radial centers and explicit color-space settings are outside this interface. Display rendering may vary. Check text contrast separately across the full background.

Worked Example

Two stops, #2878F0 at 0% and #142033 at 100%, with a 90-degree angle generate background: linear-gradient(90deg, #2878F0 0%, #142033 100%);. Switching to radial generates radial-gradient(circle, #2878F0 0%, #142033 100%).

Frequently Asked Questions

Which HEX formats can I enter?

Use #RGB or #RRGGBB. Short values expand to six digits. Invalid colors are rejected and copying is disabled until corrected.

What happens when stop positions are out of order?

Stops are sorted by position in the generated CSS. Colors keep their associated positions. Equal positions are retained and can make a hard edge.

Does the angle apply to radial gradients?

No. The angle control is disabled in radial mode. Radial gradients here use a circle centered in the element.

Can I use the copied CSS on my website?

Yes. Paste the background declaration into a CSS rule for an element with visible dimensions. Verify foreground text contrast and provide any needed fallback styling.