Web & Design Utility
CSS Gradient Generator
Create and preview a two-color linear or radial CSS gradient.
Build a gradient
Method
For linear gradients, the generator writes a CSS linear-gradient with the selected angle and two explicit color stops at 0% and 100%. Radial mode writes a centered circular radial-gradient with the same two stops. The resulting declaration can be pasted into a CSS rule as the background property.
Worked example
A linear gradient at 135° from #2563eb to #8b5cf6 produces background: linear-gradient(135deg, #2563eb 0%, #8b5cf6 100%);
When this is useful
The generator is useful for buttons, hero sections, cards, backgrounds, prototypes, and design-system experiments. A visible preview makes it easier to tune color direction before copying the CSS into a project.
Privacy
Colors, angle, and generated CSS stay in the browser. The page does not send them to a rendering service.
Limitations
This version uses two color stops and modern CSS syntax only. It does not create multi-stop gradients, conic gradients, image overlays, accessibility contrast guarantees, or legacy vendor-prefixed code.
FAQ
Can I make a radial gradient?
Yes. Choose Radial. The angle field is ignored because this version uses a centered circular radial gradient.
Does the tool add browser prefixes?
No. It generates modern CSS gradient syntax and intentionally omits legacy vendor-prefixed variants.
Related tools