Use the hex code gradient generator to build a CSS gradient from any color and copy the code in seconds — no signup required. Switch the output between hex, RGB, RGBA, HSL, OKLCH, and OKLAB without re-entering a single color.
Color stops
How it works
A CSS gradient is built from three things: your color stops, their position along the gradient, and a direction (or shape, for radial gradients). This tool handles all three, then writes the matching background value for you.
Pick a starting color and an ending color — or add more stops for a multi-color blend — and the tool blends them using the position percentages you set. A linear gradient runs in a straight line at whatever angle you choose; a radial gradient spreads outward from a center point instead. Behind the scenes, every stop is stored as its underlying RGB value, so switching the output format doesn’t change your colors — it only changes how those same colors are written in the code.
Gradient CSS by color format
Hex code gradients
A hex gradient writes each color stop as a six-digit hex code, the same format used almost everywhere else in CSS and design tools — #0F0D72 to #FFC502, for example. It’s the most widely recognized format for pulling a color from a brand guide or a design file straight into a gradient, which is why it’s the default input here. When a stop’s opacity is lowered below 100%, the tool automatically extends the code to eight digits (hex8) to carry the transparency value — supported in all current browsers.
RGB gradient generator
An RGB gradient writes each stop as rgb(r, g, b) — three numbers from 0–255 for red, green, and blue. It’s a close cousin of hex, just in a more human-readable number format, and it’s a common choice when a codebase or design system already standardizes on RGB elsewhere.
RGBA gradient generator
RGBA is RGB with a fourth value added for transparency, written as rgba(r, g, b, a) where alpha runs from 0 (fully transparent) to 1 (fully opaque). This is the format to reach for when a gradient needs to fade into a background image or another element behind it — a common pattern for overlay gradients on hero sections and card backgrounds. Set any stop’s opacity slider below 100% and the tool switches that stop into RGBA automatically.
HSL gradient generator
HSL describes a color by hue (0–360° around the color wheel), saturation, and lightness, written as hsl(h, s%, l%). It’s the format many designers reach for specifically because it’s easier to reason about — increasing lightness or dialing back saturation to build a related shade is more intuitive in HSL than in hex or RGB. It’s a good fit when a gradient’s variations need to stay visually related to a base brand color.
OKLCH gradient generator
OKLCH is a newer, perceptually uniform color space — meaning that equal numeric steps in lightness or chroma look like equal visual steps to the human eye, which hex, RGB, and HSL don’t guarantee. In practice, this produces gradient transitions with fewer of the muddy or unexpectedly dull middle tones that can show up in an HSL or RGB gradient between two very different hues. OKLCH is supported in all current major browsers.
OKLAB gradient generator
OKLAB is the same underlying color space as OKLCH, but written in a different coordinate system — instead of chroma and hue, it uses two axes (a and b) that represent the green–red and blue–yellow ranges directly. It’s less commonly hand-written than OKLCH, since OKLCH’s lightness/chroma/hue values are easier to reason about, but it’s useful for design tooling or color-math workflows that expect Cartesian coordinates rather than a polar hue angle.
When to use each format
- Hex or RGB — matching an existing brand palette or a design file that already specifies colors this way
- RGBA or HSLA — any gradient that needs to fade into another element, image, or the page background
- HSL — building a set of gradient stops that are variations of one base color (same hue, different lightness)
- OKLCH or OKLAB — gradients between visually distant colors (e.g. blue to orange) where a smoother, more even-looking transition matters more than exact numeric predictability
FAQ
What’s the difference between a hex and RGB gradient in CSS?
Hex and RGB describe the exact same colors, just in different notations — a hex code like #0F0D72 and rgb(15, 13, 114) render identically in every browser. The choice comes down to which format the rest of your codebase or design file already uses.
How do I add transparency to a CSS gradient?
Add an alpha value to the color stop using RGBA (rgba(r, g, b, a)) or HSLA (hsla(h, s%, l%, a)), where alpha is a number from 0 to 1. In this tool, lowering any stop’s opacity slider below 100% switches that stop’s output into the alpha-enabled version of whichever format is selected automatically.
What is an OKLCH gradient and why does it look smoother than hex?
OKLCH is a perceptually uniform color space, which means the lightness and chroma values line up with how the human eye actually perceives brightness and intensity. A gradient built between two hex or RGB colors can pass through a dull, grayish middle tone; the same gradient in OKLCH tends to hold more consistent visual brightness across the transition.
What’s the difference between OKLCH and OKLAB?
They’re the same color space described two different ways. OKLCH uses lightness, chroma, and a hue angle (polar coordinates); OKLAB uses lightness plus two axes, a and b, for green–red and blue–yellow (Cartesian coordinates). OKLCH is generally easier to read and hand-edit; OKLAB is more common in color-math and design-tooling contexts.
Do browsers support OKLCH and OKLAB gradients?
Yes — OKLCH and OKLAB are supported in all current major browsers (Chrome, Firefox, Safari, Edge). For projects that need to support older browser versions, it’s still good practice to include a hex or RGB fallback gradient declared before the OKLCH/OKLAB version, since CSS ignores a background declaration it can’t parse and falls back to the last one it understood.
Can I use more than two colors in a gradient?
Yes — add as many color stops as needed and set each one’s position along the gradient. This works the same way across every output format in this tool.