CSS Gradient Generator

Use a directional keyword or angle in linear-gradient(). For example, background: linear-gradient(135deg, #ff7e5f, #feb47b); gives you a smooth top-left to bottom-right diagonal. Or use to bottom right instead of 135deg — they're equivalent and read more naturally. Other corners: to top left is 315deg, to top right is 45deg, to bottom left is 225deg. Our generator lets you drag the angle slider and see the result live, then copy production-ready CSS. Diagonal gradients add depth without the heaviness of a full background image.

Just keep adding colour stops separated by commas: linear-gradient(90deg, red, yellow, green, blue). CSS spaces them evenly by default. Want control? Add explicit positions: linear-gradient(90deg, red 0%, yellow 30%, green 60%, blue 100%). You can stack as many stops as you like — sunsets and aurora effects often use 5 or 6. For really smooth multi-stop gradients, modern CSS also supports in oklch interpolation: linear-gradient(in oklch, red, blue), which avoids the muddy grey midpoint you sometimes get in sRGB. Our tool lets you add or remove stops with one click.

Use rgba() or #RRGGBBAA and end with full transparency. A common pattern is linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0)); — perfect for image overlays where you want text on top to stay readable. Important tip: don't fade to plain transparent (which is rgba(0,0,0,0) — black with zero alpha). On some browsers it can produce a greyish band as it interpolates through black. Always fade to the same colour with alpha 0, like rgba(255,255,255,1) to rgba(255,255,255,0) for a white fade. That keeps the transition pure and pixel-clean.

Functionally, gradients work in either property because gradients are technically images. But background is a shorthand that resets all the other background sub-properties (color, repeat, position, size, attachment) to their defaults. So if you set background: linear-gradient(...) after setting background-color: red, the red disappears. Using background-image: linear-gradient(...) only changes the image and leaves the rest alone. For most cases the shorthand is fine, but inside complex stacks or when layering a gradient over a fallback colour, prefer background-image to avoid surprise resets.

That visible "stripe" effect is colour banding, and it shows up when the gradient covers a wide area with too few perceptible colour steps in 8-bit sRGB. Three fixes that work: one, add subtle noise via a transparent PNG or SVG overlay (the classic trick); two, use modern linear-gradient(in oklch, ...) for smoother perceptual interpolation; three, reduce contrast between stops or add intermediate colour stops. Some monitors are also worse at showing gradients — test on retina and standard screens. Our generator output is browser-perfect, but the display matters too.

They produce the same result — a horizontal left-to-right gradient. CSS lets you specify direction in two ways: by keyword (to right, to bottom, to top left) or by angle (90deg, 180deg, etc.). One thing trips people up: 0deg points up (to top), not right. So 90deg = to right, 180deg = to bottom, 270deg = to left. Keywords are easier to read and harder to get wrong; angles give you precision for non-axis-aligned gradients. Use whichever matches your design intent — both compile identically in the browser.

Right next to the live preview on our generator, there's a "Copy CSS" button that grabs the full property-value pair, ready to paste into your stylesheet. We include the standard background: declaration plus a fallback solid colour as a comment for older browsers. If you want SCSS variables or Tailwind arbitrary values like bg-[linear-gradient(...)], toggle the format dropdown. Quick tip: paste it inside a class selector, not inline on the element, so you can reuse the gradient across your site without copy-pasting hex codes everywhere.