CSS gradient workspace

Build a gradient you can actually ship.

Choose a source preset or tune the measured rail yourself. Every stop stays inspectable, the CSS is deterministic, and contrast results are clearly marked as samples rather than a promise for the whole background.

linear-gradient(90deg, #091E3A 0%, #2F80ED 50%, #2D9EE0 100%)

377Unique recipes
382Source rows
753Unique stop colors

Mixing rail

Current recipe

Selected source recipeOmolon

Direction angle

90°

Color stops

#091E3A0%

#2F80ED50%

#2D9EE0100%

Copy-ready CSSlinear-gradient(90deg, #091E3A 0%, #2F80ED 50%, #2D9EE0 100%)

Five sampled contrast checks

The samples estimate black and white text contrast at fixed positions along this sRGB interpolation.

0%#091E3A

Sample at 0%

Black text: 1.26:1
White text: 16.69:1

25%#1C4F94

Sample at 25%

Black text: 2.60:1
White text: 8.09:1

50%#2F80ED

Sample at 50%

Black text: 5.43:1
White text: 3.87:1

75%#2E8FE7

Sample at 75%

Black text: 6.20:1
White text: 3.39:1

100%#2D9EE0

Sample at 100%

Black text: 7.08:1
White text: 2.97:1

A sampled ratio does not prove that text is readable over every point, crop, size, state, or rendering of a gradient. Test the final component and keep essential text on a stable surface when possible.

Pinned community source

377 normalized gradient recipes

The source contains 382 independently named rows. Five exact color sequences occur twice, so Hexees groups those names as aliases without discarding the source identity.

Showing 24 of 377 matching recipes · 377 total

Omolon

#091E3A#2F80ED#2D9EE0

Farhan

#9400D3#4B0082

Purple

#C84E89#F15F79

Ibtesam

#00F5A0#00D9F5

Radioactive Heat

#F7941E#72C6EF#00A651

The Sky And The Sea

#F7941E#004E8F

From Ice To Fire

#72C6EF#004E8F

Blue & Orange

#FD8112#0085CA

Purple Dream

#BF5AE0#A811DA

Blu

#00416A#E4E5E6

Source aliases Bupe

Summer Breeze

#FBED96#ABECD6

Ver

#FFE000#799F0C

Source aliases Rea

Ver Black

#F7F8F8#ACBB78

Combi

#00416A#799F0C#FFE000

Anwar

#334D50#CBCAA5

Bluelagoo

#0052D4#4364F7#6FB1FC

Lunada

#5433FF#20BDFF#A5FECB

Reaqua

#799F0C#ACBB78

Mango

#FFE259#FFA751

Windy

#ACB6E5#86FDE8

Royal Blue

#536976#292E49

Royal Blue + Petrol

#BBD2C5#536976#292E49

Copper

#B79891#94716B

Anamnisar

#9796F0#FBC7D4

Open the complete source-name index

All 382 source names are present here. Selecting a name loads its normalized recipe into the editor without creating a separate indexed page.

Source and license

A frozen, inspectable uiGradients snapshot

Hexees uses the exact gradients.json file at one immutable Git commit. Recipe names and stop sequences come from that source; even positions and CSS output are deterministic Hexees calculations.

Hexees is not affiliated with uiGradients or its contributors.

Source rows: 382
Unique recipes: 377
Unique stop colors: 753
Pinned commit: afb0184

WCAG

The preview and sampled ratios help identify obvious risks, but legibility depends on every rendered point behind the real text. A logo, chart, border, or focus indicator also needs its own non-text contrast review.

Open the two-color contrast checker