What is the difference between linear, radial, conic and mesh gradients?

A linear gradient changes color along a straight line at any angle. A radial gradient spreads out from a center point as a circle or ellipse. A conic gradient sweeps around a center point like the hands of a clock. A mesh gradient blends several colors placed anywhere in the frame, so the color flows in more than one direction.

Can a gradient fade to transparent?

Yes. Lower the opacity of any color stop - for example 0% on the last stop gives a fade-out, which is great for image overlays and text shadows. Save as PNG, WEBP or SVG to keep the transparency; JPG fills transparent parts with a background color you choose.

CSS Gradient Generator - Mesh, Aurora & Grainy Gradients

90°

Drag on the preview to turn the gradient.

background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);

Works in every modern browser.

Check text on it with the Contrast Checker, explore the selected color on the Color Wheel, or test every color together in the Accessible Color Palette.

Presets

Your presets

Colors 2

Click the bar to add a color. Drag a marker to move it - arrow keys nudge, Delete removes.

deg

Quick angles

Repeat the patternOff - plays once across the frame OFF

PNG · 1920 × 1080Measuring the file size...

How to make a CSS gradient

Choose the gradient type. Pick Linear, Radial, Conic or Mesh - or start from one of the gallery presets.

Set the colors. Click the color bar to add a color, drag the markers to move them, and change color and opacity in the list below the bar.

Set the direction. Drag on the preview to turn a linear gradient, move the center of a radial or conic one, or move the color points of a mesh.

Add grain if you like. Open Grain for a film-like noise texture - it works on every gradient type.

Copy or download. Copy the CSS or Tailwind code, download the gradient as PNG, JPG, WEBP or SVG in the size you need, or save its colors as swatches. Copy link opens it again exactly as it is.

Got colors from a photo or a logo? Grab their codes with the Image Color Picker and paste them into the color list.

Linear, radial, conic or mesh?

Linear

Colors change along a straight line. The classic choice for page backgrounds, buttons and hero sections.

Radial

Colors spread out from a center point. Use it for glows, spotlights and soft vignettes behind a product.

Conic

Colors sweep around a center like a clock. Made for pie charts, color wheels and loading rings.

Mesh

Several colors placed freely, blending in every direction. The modern look for hero sections, app backgrounds and wallpapers.

Every type can also repeat. A repeating linear gradient with two hard stops makes stripes, a repeating radial one makes rings - no images needed.

Mesh, aurora and grainy gradients

A mesh gradient is a set of colored points that melt into each other. CSS draws it as a stack of soft radial-gradient() layers over a background color, one per point.

Choose Aurora to stretch each point into a tilted band of light - it looks best on a dark background. Blobs keeps rounder shapes with a firmer edge, great for playful landing pages.

Grainy gradients add a fine noise texture on top, the film look you see on many modern sites. Grain also hides the faint stripes big gradients can show.

The copied CSS, the SVG and the downloaded image all come from the same settings, so they match the preview. Got a palette already? Open it here with ?colors= from the AI Color Palette or the Color Palettes gallery.

Tips for better gradients

Pick neighbors. Colors that sit close together on the Color Wheel blend cleanly. Opposites look best with Smooth blending.

Keep text readable. If text sits on top, test the lightest and darkest parts of the gradient with the Contrast Checker.

Hard edges on purpose. Put two colors at the same position for a sharp line - handy for stripes, progress bars and flags.

Fade, don't block. Set the last color to 0% opacity for an overlay that darkens a photo without hiding it.

Lighter files. Gradients compress very well - WEBP is usually the smallest. Grain adds detail, so grainy images are bigger. Convert existing images with PNG to WEBP.

Take the colors with you. Export colors as swatches saves them for Photoshop, Illustrator, Procreate, Figma or your CSS. Copy link reopens the exact gradient later.

Common gradient sizes

Use	Size (px)	Best format
Desktop wallpaper, slides	1920 × 1080 or 3840 × 2160	PNG or WEBP
Phone wallpaper	1170 × 2532	PNG
Instagram post / story	1080 × 1350 / 1080 × 1920	JPG
YouTube thumbnail	1280 × 720	JPG
X (Twitter) / LinkedIn header	1500 × 500 / 1584 × 396	PNG or JPG
Website background	Any - it scales	CSS or SVG

Already have an image in the wrong size? Fix it with the Image Resizer or the Social Media Image Resizer.

Frequently Asked Questions

Pick Linear, Radial or Conic, then set your colors on the color bar - click the bar to add a color, drag the markers to move them.

Drag on the preview to change the direction or the center. The CSS code updates as you go - click Copy and paste it into your stylesheet.

A linear gradient changes color along a straight line at any angle. A radial gradient spreads out from a center point as a circle or ellipse.

A conic gradient sweeps around a center like the hands of a clock. A mesh gradient blends several colors placed anywhere in the frame, so the color flows in more than one direction.

CSS has no mesh-gradient function, so a mesh gradient is made by stacking one radial-gradient() per color point over a background color. Each layer fades from its color to fully transparent.

Pick the Mesh tab, drag the points on the preview and choose Mesh, Aurora or Blobs. Copy the CSS - it works in every modern browser, no image needed.

Open Grain and switch it on, then set the amount, the grain size, mono or color noise, and Overlay or Soft light.

The CSS gets a tiny inline SVG noise layer blended with background-blend-mode - no image file to host. PNG, JPG and WEBP downloads have the grain baked in.

Browsers blend gradients in sRGB by default, and two opposite colors such as blue and yellow pass through a dull gray on the way.

Set Color blending to Smooth (OKLab) or Vivid (OKLCH). The tool writes the modern in oklab / in oklch CSS, with a classic line first as a fallback for older browsers.

Open Image size and choose a size - Full HD, 4K, phone wallpaper, Instagram, YouTube and more, or type your own. Choose PNG, JPG, WEBP or SVG under Save as and click Download.

The real file size is shown before you download, and everything you make is yours to use in personal and commercial work. Need a different size later? The Image Resizer handles it.

Yes. Lower the opacity of any color stop - 0% on the last stop gives a fade-out, which is great for image overlays.

Save as PNG, WEBP or SVG to keep the transparency. JPG has none, so transparent parts are filled with a background color you choose.

Banding shows up in large, subtle gradients because a screen only has 256 shades per channel.

Turn on Smooth stripes (dither) under Save as - it adds an invisible amount of noise that breaks up the steps. Want a visible film look instead? Grain hides banding too.