Gradient Generator

About Gradient generator

This tool writes the background declaration for a CSS gradient while you watch the result. Switch between linear, radial and conic types, place up to six color stops, and copy a single line of CSS. It suits front-end developers and designers who know what they want visually but do not want to hand-type angles and percentages.

How to use it

1. Pick Linear, Radial or Conic on the Gradient type tabs.
2. For a linear gradient drag the Angle slider from 0 to 360 degrees. For radial choose Ellipse or Circle and one of the five position buttons. For conic set the start angle and a position.
3. Edit each row under Color stops: click the swatch or type a hex value, then drag the slider to set that stop's position from 0 to 100 percent.
4. Use Add stop to insert another color. The new stop lands in the middle of the widest gap and starts as gray #888888.
5. Click any preset button (Sunset, Ocean, Forest, Fire, Aurora or Monochrome) if you want a starting palette instead.
6. Press Copy CSS and paste the line into your stylesheet.

Sunset preset on a horizontal linear gradient

Type: Linear, angle 90, preset Sunset

background: linear-gradient(90deg, #f97316 0%, #ec4899 50%, #7c3aed 100%);

When to use it

• Building a hero-section background that fades from a brand color into a darker shade of the same hue.
• Creating a conic gradient to fake a pie chart or a color wheel without any images.
• Placing a radial glow behind a product screenshot and moving its center to the top or left edge.
• Prototyping button and banner backgrounds quickly before moving the final values into design tokens.

Questions about Gradient generator

How many color stops can I add?

The editor allows between two and six stops. The remove button is disabled when only two remain, because a gradient needs at least a start and an end color.

Which hex formats does the stop field accept?

You can type three-digit or six-digit hex, with or without the leading hash. Anything else is rejected and the field snaps back to the last valid color when you leave it.

Do the angle for linear and the angle for conic share one value?

No. Each type remembers its own angle, so switching tabs and returning does not reset what you set. Linear 0 degrees points up and 90 points right, while a conic angle rotates where the sweep begins.

Can a stop be semi-transparent?

Not in this tool. Stops are solid hex colors, so the output never contains alpha. The checkerboard behind the preview is decoration, and you would have to edit the copied CSS by hand to add transparency.

Are stops written in the order I created them?

They are sorted by position before the CSS is generated, so the output always reads from 0 percent upward even if you dragged a later stop past an earlier one.

Related tools

• CSS stripe generatorBuild repeating-linear-gradient stripe backgrounds with custom colors, width, gap, and angle
• CSS pattern generatorGenerate dots, grid, diagonal, checkerboard, and cross CSS background patterns
• SVG wave generatorCreate layered SVG wave dividers — export as inline SVG markup or CSS background-image data URI
• Color shades generatorGenerate a full 50–950 shade scale from any color — export as CSS variables or Tailwind config
• Color palette generatorGenerate harmonious color palettes — shades, tints, complementary, analogous, and triadic from any seed color
• CSS shadow generatorCraft box-shadow and text-shadow CSS with multi-layer support, presets, and live preview