Color Stops
0%
100%
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
Build smooth, modern CSS gradients in seconds. Pick the type, angle and color stops, preview the result live, then copy the linear-gradient or radial-gradient declaration straight into your stylesheet.
How to build a CSS gradient
- Pick a gradient type — linear, radial or conic.
- Add and reorder color stops to shape the transition.
- Drag the angle dial to set the gradient direction.
- Copy the generated background CSS into your project.
Frequently asked questions
Can I use this gradient on a button?+
Yes. Use the generated background property on any element — buttons, hero sections, cards or backgrounds.
Does the gradient work on all browsers?+
linear-gradient, radial-gradient and conic-gradient are supported in every modern browser and gracefully fall back to your background color in older ones.
Can I export the gradient as an image?+
ToolPit focuses on CSS code so the gradient stays sharp at any size. To rasterize, screenshot the preview or use the Box Shadow / OG Image tools.