CSS Gradient Generator

Frequently asked questions

What is a CSS gradient?

A CSS gradient is an image generated by the browser that blends smoothly between two or more colors. You set it as the value of the background or background-image property. Because it is drawn by the browser rather than loaded as a file, a gradient scales to any size without pixelation and adds zero network weight to your page. The two most common kinds are linear-gradient, which blends along a straight line at a given angle, and radial-gradient, which blends outward from a center point.

What is the difference between a linear and a radial gradient?

A linear-gradient transitions colors along a straight line whose direction you control with an angle (for example 90deg points to the right, 180deg points down). A radial-gradient transitions colors outward from a center point in concentric rings, so the first color sits in the middle and later colors form an expanding ellipse. Use linear for backgrounds, buttons, and banners; use radial for spotlights, glows, and vignette effects.

What does the angle in a linear gradient mean?

The angle sets the direction of the color line. In CSS, 0deg points straight up, 90deg points to the right, 180deg points down, and 270deg points to the left. This is a compass-style clockwise convention, which is different from the mathematical convention where angles increase counter-clockwise. If a gradient looks flipped, adjust the angle by 180 degrees.

What are color stops and positions?

A color stop is one color in the gradient plus an optional position, written as a percentage from 0% to 100%. The position tells the browser where along the gradient line that color reaches full strength. Two colors at 0% and 100% blend across the whole area; placing a stop at 50% shifts where the midpoint falls. Two stops with the same position create a hard edge instead of a blend, which is how you make stripes.

Can I use more than two colors in a gradient?

Yes. A gradient accepts any number of color stops separated by commas, and the browser blends between each neighboring pair in order. Add as many stops as you like with the Add stop button. Keep in mind that more stops means a busier result; for most backgrounds two or three well-placed colors read cleaner than a rainbow of them.

Do CSS gradients support transparency?

CSS gradients fully support transparency through rgba() or hsla() colors, and fading a solid color to transparent is a common technique for overlays. This tool uses the native color input, which produces opaque hex values only. To add transparency, copy the generated CSS and replace a hex color with an rgba() or hsla() value that includes an alpha channel.

Are CSS gradients good for performance?

Generally yes. A gradient is described by a short line of CSS and rendered by the browser, so it costs nothing to download compared with an image file and always stays crisp. Extremely large gradients or ones animated every frame can use GPU time, but for static backgrounds and buttons the performance cost is negligible.