Gradient Generator

CSS gradient types explained

A CSS gradient is an image you generate in code by blending two or more colors. There are three standard kinds, and each interpolates color along a different path. A linear gradient blends along a straight line, a radial gradient blends outward from a center point, and a conic gradient sweeps around a center like the hands of a clock. They all live in the background (or background-image) property, so anywhere you can paint a background you can drop in a gradient.

The syntax follows a consistent shape. A linear gradient is linear-gradient(90deg, #3B82F6 0%, #EC4899 100%), where the first token is the direction and the rest are color stops. A radial gradient is radial-gradient(circle at center, …), taking a shape (circle or ellipse) and a position instead of an angle. A conic gradient is conic-gradient(from 0deg at center, …), taking a starting angle and a position. Pick the type by the effect you want: linear for sheets and buttons, radial for spotlights and glows, conic for pie charts, color wheels and angular accents.

Multi-stop gradients & color-stop positions

Every gradient needs at least two color stops, but you can add as many as you like. A color stop is a color paired with a position — usually a percentage from 0% to 100% along the gradient line. The browser smoothly interpolates between adjacent stops, so linear-gradient(90deg, red 0%, gold 50%, green 100%) fades red into gold across the first half and gold into green across the second.

Positions give you precise control. Place two stops at the same percentage to create a hard edge instead of a fade — that is how you build stripes and color bands. Bunch stops together near one end to weight the blend toward a color, or spread them evenly for a smooth ramp. If you omit positions entirely, the browser distributes the stops evenly, but setting them explicitly keeps your design predictable across browsers and screen sizes. This tool sorts your stops by position before emitting code, so the output is always valid.

Angles & directions

For linear gradients, the direction can be an angle in degrees or a keyword. With an angle, 0deg points straight up, 90deg points to the right, 180deg points down, and 270deg points left — angles increase clockwise. The keyword forms read more naturally: to right equals 90deg, to bottom equals 180deg, and you can combine them as to bottom right for a diagonal.

Conic gradients use from <angle> to set where the sweep begins, and both conic and radial gradients accept an at <position> clause — for example at center, at top left, or explicit values like at 30% 70%. Radial gradients do not take an angle at all; they are shaped by their circle/ellipse keyword and position. The angle slider in this generator maps directly onto the deg value, so what you see in the preview is what ships in the copied code.

Performance & fallbacks

Gradients are painted by the browser rather than downloaded, so they cost nothing in network terms and scale crisply to any size. They are cheap to render, but very large gradient-backed elements and animated gradients can still tax the GPU, so keep animations modest. A simple guard is to provide a solid-color fallback: declare background: #3B82F6; immediately before your gradient declaration, and any engine that cannot parse the gradient keeps the flat color instead of showing nothing.

If you animate a gradient, respect the user's motion preferences. Wrap movement in a @media (prefers-reduced-motion: reduce) query and pause or remove the animation for people who opt out of motion. For text laid over a gradient, check contrast against the lightest and darkest stops, not just the average, so the copy stays readable across the whole sweep.

Tailwind & SVG usage

In Tailwind CSS you can paste a full gradient as an arbitrary value: bg-[linear-gradient(90deg,#3B82F6_0%,#EC4899_100%)]. Note the underscores — Tailwind reads _ as a literal space, so spaces in the value must be escaped that way. This generator does the substitution for you in the Tailwind tab. Tailwind also ships utility classes such as bg-gradient-to-r with from-/via-/to- color stops for the common cases.

SVG gradients are handy for icons, charts and graphics that need to scale independently of CSS. You define a <linearGradient> (or <radialGradient>) inside <defs>, list each stop with an offset and a stop-color, then reference it with fill="url(#id)". The SVG tab here exports a ready-to-paste snippet built from your stops.

Learn more

For the formal syntax of each function, see the MDN references for linear-gradient(), radial-gradient() and conic-gradient().