Free CSS Gradient Generator Online

How to use the CSS linear gradient generator

Select the Linear tab and choose a direction using the angle presets (eight arrow buttons covering 0 to 315 degrees) or type a custom degree value into the angle input. Add your first and second color stops using the color pickers or HEX inputs, then drag each stop's position slider to control where the color transitions. Click Add stop to insert a third or fourth color for more complex transitions.

The live preview updates on every change so you can judge the result before copying. When the gradient looks right, click the CSS tab in the export panel to get the complete background: linear-gradient() declaration. Use the color format converter if you need to convert any of your stop colors between HEX, RGB, or HSL before pasting.

CSS linear gradient syntax explained

The CSS linear gradient function takes an angle or direction keyword as the first argument, followed by any number of color stops. Each stop is a color value with an optional position percentage:

/* Two stops, directional keyword */
background: linear-gradient(to right, #6366F1, #EC4899);

/* Three stops with positions */
background: linear-gradient(135deg, #6366F1 0%, #A78BFA 50%, #EC4899 100%);

/* Repeated gradient pattern */
background: repeating-linear-gradient(45deg, #6366F1 0px, #6366F1 10px, #EC4899 10px, #EC4899 20px);

The angle 0deg points upward (bottom to top). Increasing the angle rotates clockwise: 90deg goes left to right, 180deg goes top to bottom. The generator for CSS gradients handles all angle and position calculations automatically.

CSS radial gradient generator

Switch to the Radial tab to access the CSS radial gradient generator. Select a shape (ellipse or circle) and click any position in the 3x3 grid to set where the gradient radiates from. The default center position produces an even spread across the element. Moving the origin to a corner creates a directional highlight effect.

The radial gradient CSS generator writes the full radial-gradient() declaration:

/* Ellipse from center */
background: radial-gradient(ellipse at center, #6366F1 0%, #EC4899 100%);

/* Circle from top-left corner */
background: radial-gradient(circle at top left, #6366F1 0%, #EC4899 100%);

Radial gradients work well for spotlight effects on cards, depth on hero sections, and circular icon backgrounds. For subtle depth without gradients, pair a radial background with a CSS box shadow to push an element forward visually.

CSS text gradient generator

The Text export tab turns any gradient into a CSS text gradient. Configure your colors and direction in linear or radial mode, then click Text in the export panel. The output contains four CSS declarations that together produce gradient-filled text:

background: linear-gradient(135deg, #6366F1 0%, #EC4899 100%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;

Apply all four declarations to the element containing your text. The background-clip: text property clips the gradient to the shape of the text glyphs, and color: transparent makes the text fill invisible so the gradient shows through. This gradient text CSS generator technique works in all modern browsers including Chrome, Firefox, Safari, and Edge. The -webkit-background-clip prefix is still required for Safari.

For the most readable gradient text, pick colors that have enough lightness contrast between each stop. Low-contrast gradients can make text hard to read at small sizes. Use the contrast checker to verify the darkest stop in your gradient against the page background.

How to export gradients for Tailwind CSS

Click the Tailwind tab in the export panel to get the gradient as a Tailwind arbitrary value class. For a linear gradient it looks like:

className="bg-[linear-gradient(135deg,#6366F1_0%,#EC4899_100%)]"

For text gradients the Tailwind export appends the required clip classes:

className="bg-[linear-gradient(135deg,#6366F1_0%,#EC4899_100%)] bg-clip-text text-transparent"

This arbitrary value approach works in Tailwind JIT mode with no changes to tailwind.config.js. If you need gradient colors that match a full design system, generate a base color first using the color palette generator, then use those HEX values as your gradient stops.

CSS mesh gradient generator: how to build mesh gradients in CSS

A CSS mesh gradient layers multiple semi-transparent radial gradients on a single element. Each radial gradient covers a different region of the element, and because all but the outermost pixels fade to transparent, they blend together into a smooth multicolor mesh. The technique uses a comma-separated background-image list instead of background:

/* CSS mesh gradient: 4 radial blobs on a base background */
background-color: #0f0f1a;
background-image:
  radial-gradient(at 20% 25%, #6366F1 0%, transparent 55%),
  radial-gradient(at 80% 20%, #EC4899 0%, transparent 55%),
  radial-gradient(at 15% 75%, #10B981 0%, transparent 55%),
  radial-gradient(at 75% 80%, #F59E0B 0%, transparent 55%);

Adjust the at X% Y% position values to move each blob. Shrinking the transparent cutoff below 50% makes blobs smaller and more defined. Expanding it above 70% creates a softer, more blended result. The base background-color fills any area not covered by the radial layers and sets the overall tone of the mesh.

To pick the colors for each blob in your mesh gradient, use the color palette generator to get a set of 5 harmonious colors, then assign one to each radial layer. For deeper tonal control, run each palette color through the tints and shades generator to find the exact lightness you want for each blob.

CSS background gradient generator: practical use cases

A CSS background gradient generator is useful any time you need a non-solid background without reaching for an image file. Common use cases include:

• Hero sections: a 135deg linear gradient from a brand primary to a brand secondary gives hero backgrounds depth without any image weight.
• Card hover states: a subtle radial gradient from center-top on mouse hover simulates a soft light hitting the card surface.
• Gradient borders: apply a gradient to background-image on a wrapper element and use padding plus a solid inner background to fake a gradient border.
• Gradient text headings: use the Text export from this tool to apply a vivid gradient to display headings and section titles.
• Skeleton loaders: a light-to-lighter linear gradient animated with background-position creates a shimmer loading state without JavaScript.

For any gradient that sits behind text, always verify the contrast. Run the lightest and darkest areas of your gradient through the WCAG contrast checker against your text color to confirm the combination meets the 4.5:1 minimum for normal text or 3:1 for large text.