CSS Gradient Generator

A CSS gradient is a smooth transition between multiple colors, generated by the browser itself with no image needed. This tool lets you visually build a linear, radial, or conic gradient and copy the finished CSS instantly.

How to use it

• Add color stops and drag them to fine-tune where each transition happens.
• Pick a gradient type — linear (a direction in degrees), radial (shape and center position), or conic (rotation around a point).
• Copy the finished CSS with one click and paste it into background or background-image.

Common uses

• Picking a background for a hero section or button without opening a graphics editor.
• Recreating a gradient from a design mockup (Figma, etc.) in exact CSS syntax.
• Quickly experimenting with color transitions before locking a choice into a design system.

Things to keep in mind

A radial gradient defaults to stretching into the shape of its element (an ellipse), not always staying a circle — worth accounting for on rectangular blocks.

Multiple gradients can be layered by listing them comma-separated in background-image — it works like stacked layers, with the first one in the list on top.