CSS Gradient Generator
Visually build linear and radial gradients and instantly copy the CSS code.
Color Stops
Configuration
About the CSS Gradient Generator
Gradients are an essential part of modern web design, adding depth, texture, and visual interest to otherwise flat UI elements. However, writing the CSS syntax manually can be tedious—especially when calculating exact degree angles or determining radial focal points. The OnlinePaste.com Gradient Generator provides a visual sandbox to perfect your styles before copying the code.
Linear vs Radial
Linear Gradients blend colors along a straight line. By adjusting the Angle slider, you can create smooth horizontal, vertical, or diagonal transitions. Radial Gradients blend colors radiating outward from a specific central point. Use the Position selector to move the focal point to corners or edges for lighting effects.
Cross-Browser Compatibility
The code generated by this tool outputs the standard W3C background: linear-gradient(...) property, which is fully supported by all modern web browsers (Chrome, Firefox, Safari, Edge). Simply click "Copy CSS" and paste it directly into your stylesheet class.