CSS Gradient Generator
CSS Gradient Generator builds a CSS gradient visually and gives you the code to copy.
Type: LinearStops: 2Angle: 135°
Gradient colors are not automatically accessible for text. Check text/background contrast separately.
Build CSS gradients visually and copy the generated CSS. Pick a type (linear, radial, or conic), add 2 to 8 color stops with HEX colors and positions, and adjust the angle or position. The preview and the CSS update live and everything is generated in your browser — colors, stops, and CSS are never uploaded or stored. This is different from the Color Palette Generator, which produces a set of separate colors rather than one continuous background.
How to use it
- Choose a gradient type: linear, radial, or conic
- Add color stops (2 to 8) and set each color and position
- Adjust the angle for linear/conic, or the shape and position for radial/conic
- Copy the generated CSS declaration or the bare gradient value
Choose a linear, radial, or conic gradient and add between two and eight color stops, each with a HEX color and a position from 0 to 100 percent. For a linear gradient you set the angle in degrees; for a conic gradient you set the starting angle; for radial and conic gradients you pick a position such as center or top left, and a radial gradient can be drawn as a circle or an ellipse. A large preview and the generated CSS update live as you work, and everything is composed in your browser from validated values, so your colors, stops, and CSS are never uploaded or stored. Colors are edited as HEX codes alongside a native color picker. This is different from the Color Palette Generator, which produces a set of separate swatches rather than one continuous background. A gradient's colors are not automatically accessible for text — check the text and background contrast separately with the WCAG Contrast Checker.
FAQ
A CSS gradient is a background image drawn by the browser that blends smoothly between two or more colors. It is written as a value such as linear-gradient(...) and applied to the background property.
A linear gradient runs along a straight line at a chosen angle. A radial gradient spreads outward from a point as a circle or ellipse. A conic gradient sweeps around a center point like a color wheel.
Yes. A gradient here can have between two and eight color stops. Each stop has its own HEX color and position, and you can place several stops at the same position for a hard edge.
Each stop sits at a percentage from 0 to 100 along the gradient. Stops are sorted by position before the CSS is written, and two stops sharing a position create a sharp transition rather than a blend.
No. A gradient background can still fail contrast requirements for text placed on top of it. Check the specific text and background colors with the WCAG Contrast Checker.