CSS Gradient Generator
Pick a from hex, a to hex, and an angle in degrees. The page prints a CSS linear-gradient or radial-gradient string plus RGB and HSL for each stop. This is not a bitmap export.
Rated 4.7 out of 5 based on 412 reviews
How to create a CSS gradient
- Type the from hex and the to hex. Include # or omit it. Invalid hex fails in the status line.
- Pick linear or radial. Linear uses the angle in degrees. Radial uses a circle from the first stop to the second.
- Click Create gradient. The output box holds the CSS function string you can paste into a stylesheet.
- Read RGB and HSL for each stop if you need those channels. This page does not export a PNG.
CSS gradient string
linear-gradient or radial-gradient from two sRGB hex stops
| Linear form | linear-gradient(angle deg, from 0%, to 100%) |
|---|---|
| Radial form | radial-gradient(circle, from 0%, to 100%) |
| Color space | sRGB hex in, sRGB hex plus RGB and HSL out |
| Default stops | From #0f6b66, to #f4a261, angle 90 |
| Stops | Two color stops only. No extra color-stop list. |
| Not an image | CSS text. No PNG, SVG paint, or canvas fill. |
What this CSS gradient page does
You type two hex colors. The engine parses them as sRGB, then writes a CSS linear-gradient or radial-gradient function. Linear places the first stop at 0% and the second at 100% along the angle you typed. Radial uses a circle with the same two stops. The page also lists each stop as RGB 0-255 and as HSL degrees and percents so you can copy channels without opening a converter.
How the CSS string is built
Hex parses to red, green, and blue in 0-255. Linear output is linear-gradient({angle}deg, {from} 0%, {to} 100%). Radial output is radial-gradient(circle, {from} 0%, {to} 100%). Angle is a number of degrees in CSS space, so 90 deg runs toward the right in the usual CSS convention. HSL comes from the same sRGB triple after the hex parse. The engine does not interpolate extra midpoint colors.
Hex, HSL, and related color jobs
A two-stop CSS gradient is a different job from a hue-offset palette. Build a complementary or analogous set on the color palette page, then paste two of those hex values here. Convert one hex to RGB or HSL alone on the color converter. Contrast of two solid colors is a separate WCAG job, not this string builder. Named CSS colors such as rebeccapurple are not a parser on this form.
When a two-stop CSS string is enough
Paste the result into a background, a button, or a hero strip. Use linear when you want a direction. Use radial when you want a circular fade. Keep both stops in sRGB hex if the rest of the sheet already uses hex tokens.
Limits
Only two stops. No repeating-gradient, conic-gradient, or color-mix. No PNG download. Invalid hex fails. Angle must be a finite number for linear. The page runs in this tab. CZNull does not receive the colors.