Gradient generator - White screen top

Card Title

A short description using your gradient as header.

Gradient Text

Type Angle

deg

Mode

Grain / Noise

Intensity 0%

Gradient bar

Click to add a stop · Drag handles to reposition

Colors

Interpolated swatches — click to copy

Presets

History & Favorites

Code

Export image

Size

Read text

Gradient Generator is a free, browser-based tool that lets you create, customize, and export beautiful CSS gradients in seconds — no installation required.

Preview modes

At the top of the tool, five buttons let you visualize your gradient in different real-world contexts:

Background — displays the gradient as a full-area background, ideal for hero sections or page backgrounds

Button — renders the gradient on a call-to-action button so you can check how it looks on interactive elements

Card — applies the gradient to a card header, perfect for UI components like product cards or profile banners

Text — wraps the gradient around a text element using CSS background-clip, great for eye-catching headings

Full screen — opens an overlay covering the entire screen for an immersive preview; press Escape or click anywhere to close

When Text mode is active, a text field appears above the preview so you can type your own custom message.

Gradient type & angle

Type — choose between three gradient types: Linear (straight direction), Radial (circular, center outward), or Conic (rotating around a center point)

Angle — available for linear and conic gradients, use the slider or type a value between 0 and 360 degrees to control the direction

Shape — visible when Radial is selected; choose between Ellipse (default) or Circle

Smooth vs. Steps mode

The Mode selector switches between two rendering styles:

Smooth — produces a continuous, fluid blend between all your color stops (standard CSS gradient behavior)

Steps — divides the gradient into flat color bands with hard edges, like a posterize effect. Use the Steps counter to set how many bands you want (2 to 20)

Grain / Noise

The Grain slider adds a subtle film-grain texture over your gradient by adjusting the opacity of an SVG noise overlay. Set it to 0% for a clean gradient, or increase it for a more tactile, organic feel. This effect is visible in all preview modes and is baked into exported images.

Gradient bar

The interactive gradient bar gives you a visual, drag-based way to manage color stop positions:

Drag a handle left or right to reposition a color stop along the gradient

Click anywhere on the bar to add a new stop at that exact position — its color is automatically interpolated from the surrounding stops

Handles are color-coded to match their assigned color

Colors panel

Each color stop is listed as a row with the following controls:

Color picker — click the color swatch to open the native browser color picker

Hex field — type any 3 or 6-character hex code directly; the picker updates in sync

EyeDropper (Chrome / Edge only) — click the pipette icon to sample any color from your screen

Position slider — drag to set the stop’s position along the gradient (0% = start, 100% = end)

Remove button (×) — deletes the stop (minimum 2 stops required)

Drag handle — grab the dots icon on the left to reorder stops by dragging them up or down

Toolbar actions

＋ Add — inserts a new stop at position 50% with an interpolated color

🎲 Randomize — generates a harmonious random palette using one of four color theory modes: complementary, analogous, triadic, or split-complementary

⇄ Reverse — flips the gradient direction by mirroring all stop positions

⇔ Distribute — spaces all stops evenly across the 0–100% range

☆ Favorite — saves the current gradient to your Favorites list with a custom name

Interpolated swatches

Below the colors panel, a row of color chips shows sampled colors across your gradient (or one chip per step in Steps mode). Click any swatch to copy its hex value to the clipboard instantly. This is handy for extracting mid-gradient colors to use elsewhere in your design.

Presets

Twenty-four curated gradient presets are available — from Sunset and Ocean to Twilight and Nordic. Click any preset to instantly apply it to your current gradient. You can then freely customize the stops, angle, and mode.

History & Favorites

History

Your last 10 gradients are saved automatically as you work. Each entry shows the gradient type, angle, stop count, and time. Click Apply to restore a previous state, or ✕ to remove it from the list.

Favorites

Gradients you explicitly save via ☆ Favorite appear here. Each favorite can be:

Applied — restores the full gradient state including type, angle, and grain

Renamed — click ✏️ to edit the name inline

Deleted — click ✕ to remove it permanently

Both lists are stored in your browser’s localStorage, so they persist across page reloads.

The Share section displays the current page URL. Click 🔗 Copy URL to copy it to your clipboard and share the tool with others.

Code export

The Code panel generates ready-to-use code in five formats:

Click Copy to copy the generated code to your clipboard with one click.

Accessibility (WCAG)

Available in Button and Text preview modes, this panel helps you check whether your gradient meets WCAG contrast standards:

In Button mode, set the text color you plan to use on the button

In Text mode, set the background color behind the gradient text

The tool calculates the worst-case contrast ratio across all gradient stops and rates it as:

✅ AAA (≥ 7:1) — Excellent, suitable for all text sizes

✅ AA (≥ 4.5:1) — Sufficient for normal text

⚠️ AA Large (≥ 3:1) — Only acceptable for large or bold text

❌ Fail (< 3:1) — Insufficient contrast, avoid for text use

Export image

Download your gradient as a high-quality image file in multiple formats and sizes:

Size presets — choose from Full HD (1920×1080), HD, Square (1080×1080), Story (1080×1920), 2K, 4K, or set a Custom width and height

⬇ PNG — lossless export, best for graphics and UI assets

⬇ WebP — modern format with excellent compression, ideal for web use

⬇ JPEG — small file size, suitable for photographic backgrounds

⬇ SVG — vector format, infinitely scalable with no quality loss

⬇ PNG WebGL — GPU-rendered export using WebGL shaders for a mathematically precise gradient, especially useful for radial and conic types

Grain is baked into all raster exports (PNG, WebP, JPEG). SVG exports do not include the grain effect.

All processing happens directly in your browser — no data is sent to any server.

Play to start playback

Voices

Speed 1.00x

Tone 1.00

Volume 100%

Gradient Generator is a free, browser-based tool that lets you create, customize, and export beautiful CSS gradients in seconds — no installation required.

Preview modes

At the top of the tool, five buttons let you visualize your gradient in different real-world contexts:

Background — displays the gradient as a full-area background, ideal for hero sections or page backgrounds
Button — renders the gradient on a call-to-action button so you can check how it looks on interactive elements
Card — applies the gradient to a card header, perfect for UI components like product cards or profile banners
Text — wraps the gradient around a text element using CSS background-clip, great for eye-catching headings
Full screen — opens an overlay covering the entire screen for an immersive preview; press Escape or click anywhere to close

When Text mode is active, a text field appears above the preview so you can type your own custom message.

Gradient type & angle

Type — choose between three gradient types: Linear (straight direction), Radial (circular, center outward), or Conic (rotating around a center point)
Angle — available for linear and conic gradients, use the slider or type a value between 0 and 360 degrees to control the direction
Shape — visible when Radial is selected; choose between Ellipse (default) or Circle

Smooth vs. Steps mode

The Mode selector switches between two rendering styles:

Smooth — produces a continuous, fluid blend between all your color stops (standard CSS gradient behavior)
Steps — divides the gradient into flat color bands with hard edges, like a posterize effect. Use the Steps counter to set how many bands you want (2 to 20)

Grain / Noise

The Grain slider adds a subtle film-grain texture over your gradient by adjusting the opacity of an SVG noise overlay. Set it to 0% for a clean gradient, or increase it for a more tactile, organic feel. This effect is visible in all preview modes and is baked into exported images.

Gradient bar

The interactive gradient bar gives you a visual, drag-based way to manage color stop positions:

Drag a handle left or right to reposition a color stop along the gradient
Click anywhere on the bar to add a new stop at that exact position — its color is automatically interpolated from the surrounding stops
Handles are color-coded to match their assigned color

Colors panel

Each color stop is listed as a row with the following controls:

Color picker — click the color swatch to open the native browser color picker
Hex field — type any 3 or 6-character hex code directly; the picker updates in sync
EyeDropper (Chrome / Edge only) — click the pipette icon to sample any color from your screen
Position slider — drag to set the stop’s position along the gradient (0% = start, 100% = end)
Remove button (×) — deletes the stop (minimum 2 stops required)
Drag handle — grab the dots icon on the left to reorder stops by dragging them up or down

＋ Add — inserts a new stop at position 50% with an interpolated color
🎲 Randomize — generates a harmonious random palette using one of four color theory modes: complementary, analogous, triadic, or split-complementary
⇄ Reverse — flips the gradient direction by mirroring all stop positions
⇔ Distribute — spaces all stops evenly across the 0–100% range
☆ Favorite — saves the current gradient to your Favorites list with a custom name

Interpolated swatches

Below the colors panel, a row of color chips shows sampled colors across your gradient (or one chip per step in Steps mode). Click any swatch to copy its hex value to the clipboard instantly. This is handy for extracting mid-gradient colors to use elsewhere in your design.

Presets

Twenty-four curated gradient presets are available — from Sunset and Ocean to Twilight and Nordic. Click any preset to instantly apply it to your current gradient. You can then freely customize the stops, angle, and mode.

History & Favorites

History

Your last 10 gradients are saved automatically as you work. Each entry shows the gradient type, angle, stop count, and time. Click Apply to restore a previous state, or ✕ to remove it from the list.

Favorites

Gradients you explicitly save via ☆ Favorite appear here. Each favorite can be:

Applied — restores the full gradient state including type, angle, and grain
Renamed — click ✏️ to edit the name inline
Deleted — click ✕ to remove it permanently

Both lists are stored in your browser’s localStorage, so they persist across page reloads.

The Share section displays the current page URL. Click 🔗 Copy URL to copy it to your clipboard and share the tool with others.

Code export

The Code panel generates ready-to-use code in five formats:

Format	Description
CSS	Standard `background: ...` property, copy-paste ready
CSS + prefixes	Includes `-webkit-` and `-moz-` vendor prefixes for legacy browser support
Tailwind	Generates utility class names using Tailwind’s `bg-gradient-*`, `from-[...]`, `via-[...]`, `to-[...]` syntax
SCSS	Produces a `.scss` snippet with auto-generated color variables
JSON	Exports the full gradient configuration as a structured JSON object, useful for APIs or databases

Click Copy to copy the generated code to your clipboard with one click.

Accessibility (WCAG)

Available in Button and Text preview modes, this panel helps you check whether your gradient meets WCAG contrast standards:

In Button mode, set the text color you plan to use on the button
In Text mode, set the background color behind the gradient text

The tool calculates the worst-case contrast ratio across all gradient stops and rates it as:

✅ AAA (≥ 7:1) — Excellent, suitable for all text sizes
✅ AA (≥ 4.5:1) — Sufficient for normal text
⚠️ AA Large (≥ 3:1) — Only acceptable for large or bold text
❌ Fail (< 3:1) — Insufficient contrast, avoid for text use

Export image

Download your gradient as a high-quality image file in multiple formats and sizes:

Size presets — choose from Full HD (1920×1080), HD, Square (1080×1080), Story (1080×1920), 2K, 4K, or set a Custom width and height
⬇ PNG — lossless export, best for graphics and UI assets
⬇ WebP — modern format with excellent compression, ideal for web use
⬇ JPEG — small file size, suitable for photographic backgrounds
⬇ SVG — vector format, infinitely scalable with no quality loss
⬇ PNG WebGL — GPU-rendered export using WebGL shaders for a mathematically precise gradient, especially useful for radial and conic types

Grain is baked into all raster exports (PNG, WebP, JPEG). SVG exports do not include the grain effect.

All processing happens directly in your browser — no data is sent to any server.