How to generate a CSS gradient
Use this page to make one non-repeating background image from explicit color stops. The first screen keeps every value visible so the CSS can be reproduced without a drag editor.
- Choose Linear or Radial.
- Choose two, three, or four stops.
- Enter each HEX color, opacity, and percentage position.
- For a linear gradient, set its angle; for a radial gradient, set the X and Y center.
- Generate, compare the preview with the CSS value, and copy it.
Linear and radial syntax
A linear gradient follows a straight gradient line. In CSS, 0deg points upward and positive angles turn clockwise. This generator writes linear-gradient(angle, stops). A radial gradient spreads outward from a point and writes radial-gradient(circle at X% Y%, stops). Both functions are valid CSS image values for properties such as background-image.
Color stops, opacity, and equal positions
Every stop combines a color and a location along the gradient line. Positions are limited to 0–100% here for a predictable editor, although CSS itself permits stops outside that interval. Stops must be entered in ascending order. Two adjacent colors may use the same position; CSS then makes a hard transition rather than a gradual blend. Opacity is emitted as rgba() only when it is below 1.
Why input changes clear the preview
The visible sample is a confirmed rendering of the displayed output. Editing any control immediately invalidates the prior result, copied state, and preview. Generate CSS again to apply the current settings. This avoids showing old CSS beside new inputs and makes the copied declaration match the confirmed browser rendering.
Scope and browser checks
- Two to four ordered stops; duplicate positions are supported.
- One circular radial form with a percentage center.
- One linear angle from 0 to 360 degrees.
- No repeating gradients, drag handles, presets, palette suggestions, animation, image export, or browser prefixes.
- Check text contrast separately when the gradient sits behind content; a visual gradient preview is not an accessibility result.
Examples
linear-gradient(90deg, #FF0000 0%, rgba(0, 0, 255, 0.5) 100%) runs horizontally with a half-transparent blue end.
radial-gradient(circle at 25% 75%, #FFFFFF 0%, #000000 100%) places the center toward the lower-left area.
Frequently asked questions
Can two stops share one position?
Yes. Equal adjacent positions are retained and create a sharp color edge.
Why must positions be ascending?
It makes the entered stop order explicit and prevents surprising fix-up behavior when copied.
Does opacity make the whole element transparent?
No. It changes that stop color; the final appearance also depends on what lies behind the gradient.
Why is there no vendor-prefixed output?
The page emits the current unprefixed standard syntax for modern browsers.