A CSS gradient is a smooth blend between two or more colours that the browser draws as a background image, with no real image file involved. The generator below builds the gradient live in your browser: pick two colours and a direction, and it returns the exact CSS line to paste into your stylesheet.
background: linear-gradient(...) or radial-gradient(...) rule.What a CSS Gradient Is
A CSS gradient is a colour transition that the browser renders as an image without loading any file. You declare it in the background or background-image property, name the colours and the direction, and the browser fills the element with the blend at any size. Because it is generated by the browser, a gradient stays sharp at every resolution, adds no extra network request, and can be changed by editing one line of code rather than re-exporting a picture. The two main kinds are linear gradients, which run along a straight line, and radial gradients, which radiate out from a point.
How to Use This Generator
- Pick the first colour. This is where the gradient starts.
- Pick the second colour. This is where the gradient ends.
- Choose a direction: left to right, top to bottom, a diagonal, a 45 degree angle, or radial for a circle that spreads from the center.
- Watch the swatch preview and the CSS code update as you change each control.
- Press Copy CSS and paste the line into your stylesheet on the element you want to colour.
Linear vs Radial: How Direction and Angle Work
A linear gradient blends colours along a straight line. You set that line with a keyword such as to right or to bottom, or with an angle such as 45deg. With an angle, 0 degrees points straight up and the value increases clockwise, so 90deg runs left to right and 180deg runs top to bottom. A radial gradient ignores direction and instead spreads the colours outward from a center point, so the first colour sits in the middle and the second forms the outer ring. That difference is why a linear gradient suits a flat background sweep, while a radial gradient suits a glow or a spotlight effect.
linear-gradient(to right, #9b59b6, #3d2152). A radial gradient drops the direction and starts from the center: radial-gradient(circle, #9b59b6, #3d2152). Everything else is the same.Where Gradients Are Used
Gradients show up across modern interfaces. They fill page and section backgrounds to add depth without an image file. They sit behind buttons to make a call to action stand out, often with a slightly darker shade on hover. They work as overlays on top of photos, where a gradient that fades from clear to dark keeps white text readable over a busy image. They also build progress bars, badges, and card headers. Because the gradient is text in your CSS, you can theme a whole site by changing two colour values.
Related Tools
Find an exact colour and its HEX, RGB, and HSL values to drop into a gradient.
Build a matching set of colours so your gradient stops sit in harmony.
Add depth to the same element with a CSS box shadow, also copy and paste.
Last Thoughts on CSS Gradients
A gradient is one of the few visual effects that costs nothing in file size and stays crisp at any scale, because the browser draws it from a single line of code rather than a downloaded image. Once you know that a linear gradient follows a direction or angle and a radial gradient spreads from a center, you can build backgrounds, buttons, and photo overlays from two colour values and adjust them in seconds.
Generate the gradient you need above, copy the line, and paste it into your stylesheet. To understand why the same code renders identically everywhere, see how a web browser reads and paints CSS, and explore the rest of our free online tools.
Key Takeaways:
- A CSS gradient is a colour blend the browser draws as a background, with no image file and no extra network request.
- A linear gradient runs the colours along a line set by a direction keyword or an angle; 0 degrees points up and increases clockwise.
- A radial gradient ignores direction and spreads the colours outward from a center point.
- Gradients stay sharp at any size and can theme a whole site by changing two colour values.
- Common uses are page backgrounds, buttons, and fading overlays that keep text readable over photos.
- This generator builds the CSS entirely in your browser; nothing you pick is uploaded.
Frequently Asked Questions (FAQs)
What is a CSS gradient?
A CSS gradient is a smooth transition between two or more colours that the browser renders as a background image directly from code. It needs no image file, stays sharp at any size, and is set in the background property, so you can change it by editing one line of CSS.
What is the difference between a linear and a radial gradient?
A linear gradient blends the colours along a straight line whose direction you set with a keyword or an angle. A radial gradient spreads the colours outward from a center point, so the first colour sits in the middle and the second forms the outer ring. Use linear for a flat sweep and radial for a glow or spotlight.
How do gradient angles work in CSS?
In a linear gradient the angle sets the direction of the line. Zero degrees points straight up and the value increases clockwise, so 90 degrees runs left to right and 180 degrees runs top to bottom. The keyword to right is the same as 90 degrees, and to bottom is the same as 180 degrees.
Can I use more than two colours in a gradient?
Yes. CSS gradients accept any number of colour stops, listed in order after the direction, and you can give each one a position to control where it sits. This generator focuses on a clean two colour blend, which covers most backgrounds and buttons, but the same syntax extends to three or more stops.
Do CSS gradients slow down a page?
No. A gradient is drawn by the browser from a single line of code, so it adds no image download and almost no rendering cost. It is usually faster than a background photo, because there is no file to fetch and it scales to any size without becoming blurry or pixelated.
Is the generated CSS sent to a server?
No. The preview and the CSS code are built entirely inside your browser as you change the colours and direction. Nothing you pick is uploaded, logged, or stored anywhere, so you can use the tool offline once the page has loaded.
