CSS Gradient Generator Widget

Add a CSS gradient generator to your front-end tutorial or design blog. Readers pick 2 to 5 colours, set their positions and the angle or radial shape, watch the live preview and copy ready-to-paste CSS.

Design Generator Runs in your browser Free · no ads

Customize your widget

Theme
Auto follows the visitor's light/dark setting.
Style
Attribution on your page
Optional and entirely your choice. The exact line is shown in the code below; it links to the tool with rel="nofollow".
More options
Starting values
Leave blank to use the widget's defaults. Visitors can still change every value.

Live preview

Exactly what your visitors will see

Embed code

<iframe src="https://a2z.tools/embed/w/gradient-generator" title="CSS Gradient Generator by A2Z Tools" width="100%" height="670" style="border:0;width:100%" loading="lazy" allow="clipboard-write"></iframe>

A plain iframe. Works everywhere, including site builders that strip scripts. Adjust height if your content needs more room.

Works with

How it works

The preview is painted with exactly the gradient string shown in the code box, so what readers see is what they copy. Stops are written in position order, since CSS would otherwise clamp an out-of-order stop to the one before it. The code includes a solid background colour first - the average of the stops - as a fallback for environments that cannot render gradients, such as some email clients.

Method

  • linear-gradient(<angle>deg, <colour> <position>%, ...) - 0deg points up, 90deg points right
  • radial-gradient(circle | ellipse at center, <colour> <position>%, ...)
  • Fallback colour = mean of the stop colours' R, G and B
  • Angles are normalised to 0-359 deg; stop positions are percentages 0-100, kept to 0.1

Limitations

  • Only linear and radial gradients are built; conic, repeating and multi-layer backgrounds are not.
  • Colours are interpolated in sRGB, the CSS default, so a blue-to-yellow blend can look greyish in the middle; the newer 'in oklch' interpolation syntax is not offered.
  • Radial gradients are always centred and use the farthest-corner size.
  • The flat fallback line only helps where CSS is supported but gradients are not; many email clients strip background images and gradients altogether.

Where publishers use it

  • CSS tutorials on backgrounds and gradients
  • Web-design blogs showing hero and button backgrounds
  • Theme and template documentation where users customise colours
  • Classroom demos of how angles and stop positions change a gradient

Questions

Which direction does the angle point?

In CSS, 0deg points to the top, 90deg to the right, 180deg to the bottom and 270deg to the left. 135deg runs from the top-left to the bottom-right.

Why is there a second background line in the code?

The first line is a solid fallback colour for places that do not support gradients; browsers that do support them use the second line.

How many colour stops can I use?

Between 2 and 5. Positions are percentages from 0 to 100.

Can I preset colours for my readers?

Yes: v_colors=6366f1,ec4899,f59e0b spreads the stops evenly; v_type=radial and v_angle=90 set the rest.

Sources

  1. CSS Images Module Level 3 - linear-gradient() and radial-gradient() - W3C . angle direction (0deg = to top, clockwise) and colour-stop fix-up rules

Cite or recommend this tool

If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.

A2Z Tools CSS Gradient Generator
https://a2z.tools/css-gradient-generator

Related widgets

More Design widgets →

Preview

CustomizeGet code