CSS Gradients Without Stack Overflow — Generate Them Visually and Ship

You have opened a new CSS file, typed background:, and then stared at the screen. You know you want a gradient. You know the property is linear-gradient. You cannot remember whether the angle goes first or last, whether degrees go clockwise or counterclockwise, or why the colors you typed look nothing like what you pictured.

This is the article that fixes that. We will cover exactly how CSS gradients work — the syntax, the angle logic, and the patterns you will actually use — and link you to a visual generator so you can stop guessing and start shipping.

How linear-gradient Actually Works

The basic syntax is:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

That direction is what trips people up. You have two options: a keyword or an angle in degrees.

Keywords: to top, to bottom (default), to left, to right, and the diagonals: to top right, to bottom left, etc.

Degrees: 0deg points upward (same as to top). The angle increases clockwise, so 90deg points right, 180deg points down, 270deg points left.

Here is the piece worth memorizing: 0deg = up, clockwise from there. Everything else follows from that.

Six Patterns You Will Use This Week

1. Top-to-Bottom (the Default)

background: linear-gradient(to bottom, #667eea, #764ba2);

2. Fade to Transparent

Overlaying text on an image? You need the bottom to be dark and the top to be clear. Reach for transparent:

background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);

One caveat: avoid transparent in Safari when transitioning from a colored value — it interpolates through black. Use rgba(r, g, b, 0) with the same RGB values instead.

3. Angled Hero Background

background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #fda085 100%);

135deg is roughly bottom-left to top-right — a classic magazine-cover angle. Multi-stop gradients like this are defined by position percentages after each color. Without a percentage, CSS distributes them evenly.

4. Subtle Card Shading

background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);

Cards that use solid white look flat against a white page. A barely-there gradient from pure white to a very light grey gives them depth without looking designed. This is the gradient no one notices, which is the point.

5. Button Overlay

background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);

Left-to-right (90deg) gradients feel dynamic. Pair with a hover state that shifts the background position (using background-size: 200% and transitioning background-position) for a smooth slide effect on buttons.

6. Hard Color Stop (No Blend)

background: linear-gradient(90deg, #e74c3c 50%, #3498db 50%);

Two color stops at the same position creates a sharp line with no blending. Useful for split-screen layouts, progress indicators, and striped patterns — all without an extra element or image.

Radial Gradients: The Other One

radial-gradient radiates outward from a center point rather than moving in a direction:

background: radial-gradient(circle at center, #a18cd1 0%, #fbc2eb 100%);

The first argument is shape (circle أو ellipse) followed by position. at center is the default. Move the focal point with at top left, at 30% 60%, etc. Radial gradients are great for spotlight effects, glowing buttons, and radial page backgrounds.

The Syntax Nobody Remembers (and How to Never Miss It)

The three things that trip developers up, in order of frequency:

• Angle before colors — direction always comes first, before any color stops.
• Clockwise degrees — 90deg is right, not up. 0deg is up.
• The transparent-to-color band — browsers blend through black unless you match your RGBA values at both ends.

If you want to skip the trial-and-error entirely, the مُنشئ تدرج الألوان CSS on iotools.cloud lets you pick colors visually, drag stops, flip the angle, and copy the final CSS in one click. No more guessing what 143deg looks like.

دعم المتصفح

linear-gradient و radial-gradient are baseline across all modern browsers — Chrome, Firefox, Safari, and Edge all support them without prefixes. You do not need -webkit- prefixes for standard gradient syntax in 2026.

The one exception is the older -webkit-linear-gradient syntax used by Safari 5.1 and Chrome 10–25. Unless you support browsers from 2012, you can ignore it.

conic-gradient has strong modern browser support but no IE/legacy fallback — use it when the browser floor is evergreen only.

Skip the Syntax — Generate It Visually

CSS gradient syntax is not complicated, but it is tedious to tune by hand. The مُنشئ تدرج الألوان CSS at iotools.cloud gives you a live preview, drag-and-drop color stops, type controls for linear or radial, and one-click copy. Build your gradient visually, paste the output, ship.

قد يعجبك أيضاً