Generate gradient

Build a CSS linear gradient from two endpoint colours and a direction.

freeworks offlinenothing uploaded
ToolGradient Generator
Input
Output
—
Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

Preview

How it works

Endpoint RGB channels are linearly interpolated across the requested stops, which are emitted in a CSS linear-gradient. Each channel is rounded to an integer for hex output.

  • Red-to-blue, rightward, and five stops are initial settings.
  • RGB interpolation is not perceptually uniform.

Worked example

Sunset Gradient
Generate a warm sunset gradient from orange to purple
Input
											Color1: #FF6B35
Color2: #7B2FBE
Direction: to right
Steps: 5
Output
												CSS: linear-gradient(to right, #FF6B35, #DE5C57, #BD4D7A, #9C3E9C, #7B2FBE)

Color Stops:
  0%: #FF6B35
  25%: #DE5C57
  50%: #BD4D7A
  75%: #9C3E9C
  100%: #7B2FBE

When to use this

Stylesheets create backgrounds, visualizations map values to endpoints, and mock-ups preview directional fills.

Edge cases

  • One stop cannot express a transition.
  • RGB midpoints can look dull compared with perceptual interpolation.
  • Changing direction alters orientation but not stop colours.

References