CSS Gradient Generator

linear-gradient() transitions colors along a straight line at a given angle, producing a flat band effect. radial-gradient() transitions colors outward from a center point in a circle or ellipse, producing a spotlight or glow effect. Both accept the same comma-separated list of color stops — only the shape of the transition differs.

The angle is measured clockwise from a starting direction of 0deg, which points to the top (not the bottom). So 0deg goes bottom-to-top, 90deg goes left-to-right, 180deg goes top-to-bottom, and 270deg goes right-to-left. This trips a lot of people up because it's the opposite of what "0deg = bottom to top" might suggest at a glance — CSS defines 0deg as pointing up, and angles increase clockwise from there.

Each color stop's percentage sets where along the gradient line that color reaches full intensity, relative to the gradient's start (0%) and end (100%). CSS blends smoothly between adjacent stops, so two stops at 0% and 100% produce a smooth fade across the whole element, while stops bunched closer together produce a sharper, more concentrated transition.

No. linear-gradient() and radial-gradient() are supported unprefixed in all current versions of Chrome, Firefox, Safari, and Edge. Vendor-prefixed forms like -webkit-linear-gradient() were only needed for very old browser versions and aren't necessary for modern production sites.

Yes to both. A gradient is a valid value for background-image (or the background shorthand), and you can even stack multiple comma-separated gradients as layered backgrounds. For gradient text, set the gradient as background-image on the text element, then add background-clip: text and color: transparent so the gradient shows through the glyph shapes instead of the background.