CSS Gradient Generator
Build a linear or radial CSS gradient from as many color stops as you like, preview it live, and copy the finished background CSS. Adjust colors, stop positions, and angle with instant visual feedback — no design software required.
background: linear-gradient(135deg, #3A7BD5 0%, #00D2FF 100%);
Sponsors
About CSS Gradients
A CSS gradient is a smooth transition between two or more colors, generated directly by the browser instead of loading an image. Gradients are used as-is for a background-image or background value, so they scale perfectly at any size with no extra file to download.
Linear vs. Radial Gradients
linear-gradient() transitions colors along a straight line at a given angle — 0deg points to the top, 90deg to the right, 180deg to the bottom, and so on, moving clockwise. radial-gradient() instead radiates color outward from a center point in expanding rings, so it has no angle — its shape (circle or ellipse) and position control the effect instead.
Color Stops
Each color in a gradient is a "stop," written as a color followed by a position percentage: #3A7BD5 0% means pure #3A7BD5 at the very start of the gradient. Browsers blend smoothly between adjacent stops. Stops don't need to be evenly spaced — clustering several stops close together creates a sharper, more abrupt color change in that region.
Using the Generated Code
Paste the copied line straight into a CSS rule's background property, or apply it to any element via an inline style attribute. Because it's plain CSS, it works in stylesheets, CSS-in-JS, and utility frameworks alike.
Frequently Asked Questions
How do I use this gradient in my CSS?
Copy the generated line (e.g. background: linear-gradient(135deg, #3A7BD5 0%, #00D2FF 100%);) and paste it into any CSS rule, or set it directly as an inline style attribute on an HTML element.
What's the difference between linear-gradient and radial-gradient?
linear-gradient() transitions colors along a straight line at a chosen angle. radial-gradient() transitions colors outward from a center point in circular rings, so it uses a shape and position instead of an angle.
How many color stops can a CSS gradient have?
CSS itself has no hard limit — you can chain as many comma-separated stops as you like. This tool caps you at 6 for a clean, easy-to-tune UI, but you can add more stops by hand in your CSS.
Is CSS gradient browser support good?
Yes. Unprefixed linear-gradient() and radial-gradient() have been supported in every major browser (Chrome, Firefox, Safari, Edge) for many years and are safe to use in production without vendor prefixes or fallbacks.
Can I make a gradient text effect with this?
Yes. Apply the generated gradient as a background on a text element, then add -webkit-background-clip: text; background-clip: text; color: transparent; to clip the gradient to the text shape instead of the element's box.
Why does my gradient look banded instead of smooth?
Banding is usually a display/compression artifact rather than a CSS problem — it's most visible with two very similar colors spread across a large, plain area. Adding a subtle middle stop or using colors with more contrast usually removes visible banding.