QR コード生成

How CSS gradients are built

A CSS gradient is not an image file — it's a function the browser draws on the fly. You describe a few color stops and the rendering engine interpolates every pixel in between, so a gradient scales to any size with no blur and adds nothing to your page weight. This tool generates the two CSS dialects you'll actually paste into a stylesheet: a background shorthand and a background-image declaration, both wrapping the same linear-gradient() or radial-gradient() function.

Each stop has a color and a position from 0% to 100%. A linear-gradient also takes an angle; a radial-gradient here uses circle, radiating outward from the centre. The output looks like this:

background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);

Understanding the angle

The angle in linear-gradient sets the direction the colors travel toward, measured clockwise from straight up. This trips people up, so it's worth fixing in mind:

Drag the angle slider and the live preview updates instantly. Switching to radial hides the angle because a centred circle has no single direction — it expands evenly in all directions from the middle.

A worked example with three stops

Start with the default two-stop indigo-to-pink gradient, then click Add Stop to insert a third color at the 50% mark. Suppose you set it to #22d3ee (cyan). The generator sorts the stops by position and produces:

background-image: linear-gradient(135deg, #6366f1 0%, #22d3ee 50%, #ec4899 100%);

The browser now blends indigo into cyan over the first half of the diagonal, then cyan into pink over the second half. Because stops are sorted by position before output, you can drag a stop's position slider past its neighbours and the CSS still comes out in valid left-to-right order.

Practical control over color stops

• Sharp bands instead of blends. Place two stops at the same or adjacent positions — e.g. #fff 50%, #000 50% — and the transition becomes a hard line, letting you build stripes or a two-tone split with one gradient.
• Move the midpoint. Two colors with the change-over weighted toward one end (say a stop at 20% rather than 50%) make one color dominate. This is how you get a subtle wash versus an even fade.
• Add depth with three or more stops. Real-world "premium" gradients often use three closely related hues rather than two far-apart ones, which avoids a muddy grey in the middle.

Common use cases

• Hero and section backgrounds that stay crisp on any screen size and retina display.
• Button and card accents — a diagonal gradient reads as more modern than a flat fill.
• Text effects by combining the gradient with background-clip: text and a transparent text color.
• Overlay scrims using a gradient that fades to transparent over a photo so caption text stays legible.
• Skeleton loaders where a moving gradient sweeps across placeholder boxes while content loads.

Linear versus radial: which to pick

A linear gradient is the workhorse — colors travel in a straight line along your chosen angle, ideal for backgrounds, buttons, and section dividers where you want an even directional fade. A radial gradient emanates from a centre point outward, which makes it feel like a light source or a spotlight. Reach for radial when you want to draw the eye to the middle of an element, simulate a glow behind a logo, or create a soft vignette. Because this tool renders a centred circle radial, the effect is symmetric; for an off-centre or stretched glow you'd extend the generated CSS by hand with a position keyword such as radial-gradient(circle at top left, ...).

Tips and common mistakes

• The "grey dead zone." Blending two vivid complementary colors (e.g. bright blue to bright orange) passes through a dull grey midpoint because the browser interpolates in sRGB. Add a brighter intermediate stop, or pick hues that are closer on the color wheel.
• Banding on subtle gradients. Very gentle fades across a large area can show visible steps on 8-bit displays. More contrast between stops, or a touch of noise in the design, hides it.
• background vs background-image. Use the background-image form when you want to keep a separate background-color as a fallback for very old browsers; the shorthand background resets every background property.
• Animating gradients. CSS can't smoothly transition the gradient function itself. To animate, transition background-position on an oversized gradient, or move the angle with a keyframe rather than expecting transition to tween the stops.
• Keep at least two stops. A gradient needs two colors to interpolate between; this tool won't let you delete down to one for that reason.