Gradient Generator

CSS Gradient Generator - Create Beautiful Gradients

A powerful CSS gradient generator that creates linear and radial gradients with multiple colors. Features live preview, customizable directions and positions, preset gradients, and exports ready-to-use CSS code. Perfect for web designers and developers creating modern web designs. See also our Color Palette Generator and Color Contrast Checker.

How do I create a CSS gradient for a hero section?

Start with two related colors — analogous hues are the safest because they blend without producing muddy middle tones. Drop them into the first two color stops and set the angle to 135deg, which reads as natural light from the upper left and is the most popular gradient direction in modern hero designs. Preview the result, then copy the generated CSS rule (e.g. background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);) and paste it into the hero container in your stylesheet. For text legibility, layer the gradient under a semi-transparent dark overlay using background-image with a comma-separated linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)) above the color gradient. This is the trick most modern landing pages use.

What is the difference between linear and radial gradients?

A linear gradient transitions colors along a straight axis defined by an angle (0deg is bottom-to-top, 90deg is left-to-right, 180deg is top-to-bottom, 270deg is right-to-left). It is the right choice for full-bleed backgrounds, cards, buttons, and anywhere you want a directional sweep. A radial gradient transitions colors from a center point outward in concentric circles or ellipses; you can position the center anywhere (radial-gradient(circle at top right, #A, #B)). It is the right choice for spotlight effects, glowing orbs, button hover states, and abstract backgrounds. Linear gradients are by far the most common in production UI; radial gradients tend to feel more decorative and are used sparingly to draw attention to one point.

What are color stops and how do percentages work?

A color stop is a (color, position) pair that tells the browser exactly where on the gradient axis that color should appear at full strength. Positions are percentages from 0% (start of the axis) to 100% (end). With no positions, the browser distributes the stops evenly: two colors land at 0% and 100%, three at 0%, 50%, 100%, and so on. You can shift any stop to bias the gradient: linear-gradient(red 0%, yellow 20%, blue 100%) makes the red-to-yellow transition tight and gives most of the canvas to the yellow-to-blue blend. Placing two stops at the same position creates a hard stop (no blend, instant color change) which is how stripes, segmented progress bars, and color-blocked backgrounds are built.

How do I choose the right gradient angle?

The CSS angle convention is clock-style: 0deg points up, 90deg points right, 180deg points down, 270deg points left. 90deg (left-to-right) suits navigation bars and timeline headers; 180deg (top-to-bottom) is the default sky-style gradient; 135deg (top-left to bottom-right) is the visual workhorse — it reads as natural daylight and is what most modern apps use for hero sections, dashboards, and card backgrounds. Reverse a gradient by adding 180 to its angle, or use the Reverse button which swaps the color stops in place. Avoid angles like 1deg or 89deg unless you want an almost-but-not-quite horizontal effect; the slight tilt usually looks like a CSS bug rather than intentional design.

Can I create gradients with more than two colors smoothly?

Yes, and adding a third color is the easiest way to make a gradient feel premium rather than generic. The trick is to pick three colors that already sit close on the color wheel — analogous (red, orange, yellow) or a brand pair plus a related neutral. Place them at 0%, 50%, 100% for an even three-way blend, or push the middle stop off-center (0%, 30%, 100%) for asymmetry. Avoid jumping across the wheel because the browser interpolates through unrelated hues and produces a muddy gray midpoint — a blue-to-yellow gradient passes through gray-green at 50%. For rainbow effects, six or seven stops are needed, but those usually read as decorative rather than professional. Two or three stops is the sweet spot for most UI work.

How do I keep text readable on top of a gradient background?

Gradients change contrast across their length, so a foreground color that meets WCAG 4.5:1 at the top can fail at the bottom. Four defences: (1) overlay a flat semi-transparent dark or light layer between the gradient and the text using a second background-image — linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)) keeps contrast uniform; (2) constrain text to a flat box with its own background (a card on top of the hero); (3) add a subtle text shadow (text-shadow: 0 1px 3px rgba(0,0,0,0.4)) to lift letters off busy areas; (4) limit gradient saturation so that the darkest stop is still dark enough to contrast with white at the worst-case position. Always validate the worst-position contrast with a WCAG checker before shipping.

What is the performance cost of CSS gradients versus image backgrounds?

CSS gradients are essentially free compared to image backgrounds. The browser computes them at paint time using simple GPU shaders, the rule itself is tens of bytes of text rather than tens or hundreds of kilobytes of compressed pixels, and they scale to any container size without producing blurred edges the way a JPG would. They also adapt instantly to dark-mode or theme overrides by changing CSS variables. The only minor cost is during animations: animating background-image is not GPU-accelerated, so cross-fade transitions between two gradients can stutter. The workaround is to layer two gradient backgrounds and animate the opacity of the top one, which is fully GPU-accelerated. For static hero sections, gradients are almost always preferable to raster backgrounds.

How do I match a gradient to colors I already see on a website I admire?

Take a screenshot of the inspiration, open it in any color picker (the Image Color Picker on this site, Figma, or your OS eyedropper), and sample the brightest highlight and the darkest shadow inside the gradient. Drop those two HEX values into the first and last color stops here. If the original gradient is three-color, sample the middle as well and add a stop at roughly the same percentage. Most professional gradients use either monochromatic stops (one hue, two lightnesses) or analogous stops (neighbouring hues with smooth interpolation); if your sample shows a wildly different middle color, it is probably an additive blend with a translucent overlay rather than a single gradient. Try changing your angle to 135deg if the inspiration sweeps diagonally.

What is OKLCH interpolation and why does it look better than sRGB?

When a browser draws a gradient it has to invent every intermediate color between your stops, and the color space it interpolates in changes the result dramatically. The legacy default is sRGB, which blends raw red/green/blue values; because sRGB is not perceptually uniform, opposing hues drift through a dull, desaturated gray midpoint — the infamous "why does my blue-to-yellow gradient go muddy in the middle" problem. OKLCH (and its Cartesian sibling Oklab) interpolate in a perceptually uniform space designed so equal numeric steps look like equal visual steps, keeping lightness even and routing hue along the short, vivid path instead of through gray. This tool lets you pick the interpolation space and previews the exact result. When you choose OKLCH, the copied CSS ships a pre-rendered perceptual fallback first and then progressively enhances to the native CSS Color 4 `in oklch` syntax inside an @supports block, so browsers that do not understand the hint still render the same smooth gradient you signed off on rather than silently dropping back to a different sRGB blend. Use OKLCH or Oklab for vivid multi-hue blends; sRGB only when you must match an existing legacy design.

How does the WCAG contrast check work and what counts as passing?

Gradients change brightness along their length, so white text that is perfectly legible over the light end of a hero can become unreadable over the dark end (or vice versa). The contrast check samples the gradient densely from 0% to 100% in your chosen interpolation space, computes the WCAG relative-luminance contrast ratio between your text color and every sampled point, and reports the single worst-case ratio plus the position where it occurs. A passing background must clear the threshold everywhere, not just at one end: WCAG AA requires 4.5:1 for normal body text, AA Large allows 3:1 for text 18pt+/14pt-bold, and AAA wants 7:1. Toggle between white and black text (or pick any custom color) to see which is safe. If the worst-case ratio fails, fix it by darkening or lightening the offending end, reducing saturation, adding a semi-transparent overlay between the gradient and the text, or placing the text on its own solid card — then re-check until the worst position passes.

Key Features

• Create linear and radial gradients
• Live preview with instant updates
• Add unlimited color stops
• Adjust color positions with precision
• Multiple direction options
• Custom angle support (0-360°)
• 8 beautiful preset gradients
• Copy CSS code to clipboard
• Random gradient generator
• Reverse gradient direction
• Remove color stops (minimum 2)
• Export ready-to-use CSS
• 100% client-side processing
• No server communication
• Works offline
• Dark mode support
• Mobile-friendly interface