CSS Gradient Generator – Linear, Radial, Mesh and Text

Pick a type, set the colours on the bar under the preview and watch the result change as you go. The page writes the matching code at the same time: a CSS block ready to paste, Tailwind classes, an SVG file for linear and radial gradients, and PNG or JPG pictures in six common sizes. When you like what you see, copy the code or download the picture.

Everything is made in your browser. There is no account to create, nothing to install and no file to upload, not even when you take colours from a photo. Your last gradient is remembered on your own device, so it is waiting for you when you come back, and Copy share link turns the current design into a link you can send to someone else.

A CSS gradient is not a picture file. It is a small piece of text that tells the browser how to paint colours across a box, so it stays sharp at any size and weighs almost nothing. The code box on this page always holds a complete rule for a class called .gradient, which you can rename to anything you like.

The first line is a plain background colour, the first colour of your gradient. Very old browsers that do not understand gradients at all will show that colour instead of an empty box. The next line is the gradient itself, for example linear-gradient(90deg, #4f46e5 0%, #ec4899 100%). If you chose Smooth (OKLab) or Vivid (OKLCH) mixing, a third line repeats the gradient with the colour space added. A browser uses the last line it understands, so modern browsers get the smoother version and older ones fall back to the standard one. That is what the note under the code box means when it mentions fallback lines.

Inside the brackets, each colour stop is a colour followed by a position. Colours are written as HEX codes, or as rgba() values when a stop has less than 100% opacity. Positions are percentages along the gradient line; for conic gradients they are turned into degrees around the centre, so 50% becomes 180deg. With Gradient text or Animated switched on, the extra lines those effects need are added to the same rule.

Use this CSS gradient generator output in a stylesheet, a style attribute, a CSS-in-JS object or the custom CSS field of a website builder. Paste the rule, give an element the class gradient, and give that element a size, because a gradient fills whatever box it is in. On a full page, putting the class on the body or on a wrapper with min-height: 100vh is a common start.

A linear gradient runs in a straight line. The Angle slider sets its direction from 0 to 360 degrees: 0deg runs from the bottom up, 90deg from left to right, 180deg from top to bottom and 270deg from right to left. The quick buttons under the slider jump to the eight common directions, 0°, 45°, 90°, 135°, 180°, 225°, 270° and 315°, so you can try a diagonal in one tap.

Diagonal angles behave in a helpful way in CSS: at 45deg or 135deg the gradient line is lengthened so that the corners of the box get exactly the first and last colour, whatever the shape of the box. That is why the same code looks balanced on a wide banner and on a tall phone screen.

This linear gradient generator is the usual choice for buttons, headers, page backgrounds and cards. Two colours that sit near each other on the colour wheel, such as blue and violet, give a calm, smooth blend. Colours from opposite sides, such as orange and blue, give more energy but can pass through a dull middle; the colour mixing setting further down helps with that.

A radial gradient spreads out from a centre point. The Shape choice gives a perfect Circle or an Ellipse that stretches with the box, so on a wide banner an ellipse becomes wide too. The Size menu decides where the last colour is reached: Reaches the farthest corner (the default and the CSS default), Reaches the closest side, Reaches the farthest side or Reaches the closest corner. Closest side makes a small, tight glow; farthest corner makes a large, soft one.

Centre X and Centre Y move the middle of the gradient anywhere in the box, from 0% to 100% on each axis. Put it near the top for a spotlight effect behind a heading, or in a corner for a soft glow that fades across a card.

A radial gradient generator is handy for vignettes, glowing buttons, light spots behind product photos and round badges. Try a light colour at 0% and the same colour with 0% opacity at 100%: you get a glow that fades into whatever is behind it, which works on any background.

A conic gradient sweeps colours around a centre point, like the hand of a clock. Angle sets where the sweep starts, and Centre X and Centre Y place the middle. Stop positions run from 0% to 100% of a full turn, which the code writes as 0deg to 360deg.

Conic gradients make colour wheels, pie charts and loading rings. For hard-edged pie slices, put two stops at the same position: a red stop and a blue stop both at 40% give a clean edge where red ends and blue begins. Combine conic with Repeating to get sunburst rays. The SVG download is not offered for conic gradients, because SVG has no conic gradient; use the CSS or a PNG instead.

A mesh gradient looks like soft clouds of colour that melt into each other, a style you often see behind app screenshots and on modern landing pages. Real mesh gradients in design programs use a grid of points; in CSS the same look is made by layering several soft radial gradients on top of one base colour, and that is how this page builds it.

With Mesh selected, each colour stop becomes one glow. The first glow sits in the top-left corner, then top-right, bottom-right and bottom-left, then the centre, then the middle of each edge, and a tenth stop goes a quarter of the way in from the top left. Every glow fades to transparent about halfway out from its point, and the first colour also fills the background underneath. The glows are placed in the order the stops were added, not by their position on the bar.

With this mesh gradient generator, four or five colours usually look best, and colours with similar lightness blend most smoothly. Position has no effect on a mesh, and Repeating and Colour mixing are hidden because they do not apply, but Opacity still works and is a good way to make one glow weaker than the others.

The bar under the preview shows your colour stops as small handles. Click any empty part of the bar to add a stop there; the new stop starts with the colour the gradient already has at that point, so nothing jumps. You can have up to 10 stops. Drag a handle left or right to move it, or type an exact value in Position.

The selected handle has a blue outline, and its settings appear below the bar. Change its colour with the colour box, which opens your system colour picker, or type a six-digit HEX code such as #ff7e5f in the text field. Opacity runs from 0% to 100% in steps of 5%: lower it to let the background show through, or to fade a gradient into nothing. Remove deletes the selected stop; a gradient always keeps at least two.

Two stops at the same position make a hard line instead of a blend, which is how stripes, flags and split backgrounds are made. Stops placed close together give a quick change; stops far apart give a slow, gentle one.

Tick Repeating (stripes and rings) to repeat the stop pattern until the box is filled. The code then uses repeating-linear-gradient, repeating-radial-gradient or repeating-conic-gradient. The pattern repeats from the last stop's position, so stops that end at 20% make five repeats across the box.

For clean stripes, use pairs of stops at the same positions, for example black at 0%, black at 10%, white at 10% and white at 20% on a 45° linear gradient. A repeating radial gradient makes rings like a target, and a repeating conic one makes rays. The PNG and JPG downloads draw the gradient in a single pass without repeating, so use the CSS for stripe patterns; it is also far smaller than any picture.

Between two stops the browser has to invent all the colours in between, and how it does that changes the look. Standard (sRGB) mixes the red, green and blue values directly. That is what browsers have always done, and it works everywhere, but some pairs, such as blue and yellow, pass through a gray, muddy middle.

Smooth (OKLab) mixes in a colour space built to match how people see brightness and colour, so the blend looks even from one end to the other, with no dark or gray dip. Vivid (OKLCH) also travels around the colour wheel, so blue to yellow goes through bright greens or cyans instead of gray. It gives rich, saturated blends, and with very different colours it can add a hue you did not pick, so look at the preview.

Mixing in OKLab and OKLCH is part of the newer CSS colour standard. Current versions of Chrome, Edge, Firefox and Safari support it, and older browsers ignore the line they do not understand and use the sRGB fallback line above it, so your gradient still shows. The PNG and JPG downloads are drawn with standard sRGB mixing.

Tick Gradient text and the preview shows the words Gradient text filled with your gradient. The code box adds the four lines that make it work: background-clip: text and its -webkit- version cut the background to the shape of the letters, and -webkit-text-fill-color: transparent with color: transparent hide the normal text colour so the gradient shows through. Put the class on a heading or a span, not on a whole section.

Gradient text looks best on big, bold type, such as a headline at 40 pixels or more, because thin letters show too little of the colour. Use this gradient generator for text on a logo word, a hero heading or a price, and keep body text a plain solid colour.

Readability matters. Every part of the gradient needs enough contrast with the background behind the text, not just the middle. A pale yellow end on a white page can make half a word disappear. Check the lightest and darkest stop against the background with a contrast checker; for large text the usual target is a ratio of at least 3 to 1, and 4.5 to 1 for normal text. The first plain background line also helps: if a browser cannot clip the gradient to the letters, the text stays visible instead of turning into a coloured block.

Tick Animated and the preview starts to drift slowly from side to side. The trick is simple and light: the gradient is drawn four times wider and taller than the box with background-size: 400% 400%, and a keyframe animation called gradient-move slides the background-position from 0% 50% to 100% 50% and back again over 12 seconds. The code box adds both lines and the @keyframes block, ready to paste.

An animated gradient generator setting works for page backgrounds, hero areas, loading screens and buttons, and it combines with Gradient text for moving headlines. Change 12s in the animation line to make it faster or slower, and change ease to linear for an even speed. The motion shows best with three or more colours; with two very similar colours it is hard to see.

Some people find moving backgrounds distracting or even make them feel unwell. It is good practice to stop the animation for visitors who ask their system for less motion: wrap an animation: none rule for the same class in a @media (prefers-reduced-motion: reduce) block. The movement is only in the CSS; image downloads are still pictures.

The Tailwind box gives you classes to paste straight into a class attribute. When your gradient fits Tailwind's built-in gradient utilities, you get short, readable classes such as bg-gradient-to-r from-[#4f46e5] to-[#ec4899]. That happens for linear gradients without Repeating, at one of the eight quick angles, with two stops at 0% and 100% or three stops at 0%, 50% and 100%; the middle one becomes a via- class.

Anything else, such as radial, conic or mesh gradients, other angles, more stops or uneven positions, comes out as one arbitrary value: bg-[linear-gradient(...)] with underscores in place of spaces, which is how Tailwind expects spaces inside brackets. It works the same way and needs no changes to your config.

The direction classes use the bg-gradient-to-* names from Tailwind CSS v3. Tailwind v4 calls the same utilities bg-linear-to-*, so in a v4 project change that one word or use the arbitrary value. The Tailwind classes hold the gradient only, in standard sRGB mixing; for gradient text or animation, copy the CSS block instead. A good gradient generator tailwind workflow is to design here, copy the classes, and keep the CSS for the effects that need extra lines.

From a photo picks the colours for you. Press it, choose a picture, and the page finds the three main colours of the photo and turns them into three evenly spaced stops, from the darkest to the lightest. It shrinks the picture to a small copy, groups similar pixels together and takes the average of each group, so a beach photo gives sand, sea and sky, and a sunset gives deep red, orange and pale yellow.

This gradient generator from image approach is a quick way to make a background that matches a product shot, a blog cover or a brand photo. The photo is read by your browser only and is never uploaded. Fully transparent pixels are skipped, so a cut-out logo on a transparent background gives the logo's own colours.

The result is a normal set of stops, so you can then add stops, change the type or angle and fine-tune each colour. If you want five or six colours from a picture as a palette rather than a gradient, the Color Palette Generator does that, and the Color Picker reads the exact colour of one pixel.

The 24 presets are small swatches under the preview; hover over one to see its name. They are Sunset, Ocean, Purple dream, Mint, Peach, Night sky, Fire, Aurora, Candy, Royal, Lemon, Rose, Deep sea, Grapefruit, Steel, Instagram, Rainbow, Cotton candy, Mango, Forest, Lavender, Blush, Emerald and Midnight. Most have two colours, Night sky has three, Instagram has five and Rainbow has ten.

A preset only changes the colours and spreads them evenly. Your type, angle, centre and options stay as they are, so you can tap through the presets while Radial or Mesh is selected and see each palette in that style. Random makes a new set of two or three colours with related hues and picks one of the eight quick angles; press it a few times to find a starting point. Reverse flips every stop's position, so the colours run the other way.

To use a gradient as a picture, choose a size in the Image menu, PNG or JPG, and press Download. The picture is drawn at the full pixel size you picked and saved with a name such as gradient-1920x1080.png. PNG keeps transparent parts transparent; JPG fills them with white and gives smaller files for plain backgrounds.

If you need a size that is not in the list, download the closest one and use Resize Image to set exact pixels, or start from the 3840 × 2160 picture and crop it. To put a heading or a quote on top, open the picture in Add Text to Image. A gradient square also makes a simple app icon or browser icon, and the Favicon Generator turns it into the icon files a website needs.

Download SVG saves linear and radial gradients as a small vector file, 1200 × 630 by default, which scales to any size in design programs and on the web. It is not offered for conic and mesh gradients. The SVG uses standard colour mixing, and a radial SVG reaches its edge at a fixed size that is close to, but not always exactly, the CSS size you picked.

Copy share link stores the whole gradient, its type, angle, centre, shape, size, options and every stop, in the address of the page and copies that link. Anyone who opens it sees the same gradient, ready to edit. The design is packed into the part of the link after the # sign, which browsers do not send to the server. The Gradient text and Animated switches are not part of the link.

Separately, your current gradient is saved in your browser's own storage after every change, so a reload or a later visit brings it back. Clearing your site data removes it, and a private window starts fresh each time.

This gradient generator online works in any current browser on Windows, Mac, Linux, ChromeOS, Android, iPhone and iPad. On a computer, the settings sit beside the preview; on a phone they move below it. The colour bar handles respond to touch as well as a mouse, and the colour box opens the system colour picker of your device.

Downloads on iPhone and iPad go to the Downloads folder in the Files app, from where Save Image or Share can move a PNG into Photos to use as wallpaper. On Android they land in Downloads or the gallery. Once the page has loaded, building a gradient needs no connection, because everything is worked out on your device.

Using the gradient generator free of charge here means the whole tool, not a trial: every type, all 10 stops, every export and every image size, with no account, no email address, no watermark and no daily limit. The code you copy is yours to use in personal and commercial projects, and CSS gradients are a standard part of the web, so there is nothing to credit.

It can stay free because your own browser does the work. A gradient is a little bit of maths, and drawing even a 4K picture takes a modern phone a moment, so there is no server time to pay for.

Start with fewer colours than you think. Two or three well-chosen stops almost always look cleaner than six, and they are easier to keep readable. Colours that are close in lightness blend smoothly; a very light and a very dark colour make a strong, dramatic fade.

If a blend looks gray or dirty in the middle, try Smooth (OKLab), or add a stop in the middle with a cleaner colour. If a long gradient shows visible bands on a screen, add a third colour or make the change shorter; banding shows most on slow, dark blends across large areas.

Keep text readable. Put text on the calmest part of the gradient, add a semi-transparent dark or light layer behind it if needed, and test the contrast at the lightest and darkest point under the text. Gradients can carry a mood, but they should not be the only way information is shown, so never rely on colour alone to mark a state such as an error.

Nothing you make here is sent to our server. The preview, the code, the pictures and the photo you use for From a photo are all handled by your browser on your own device. Only the page itself loads from our site. Your last gradient is kept in your browser's storage, which you can clear at any time, and a share link only carries the gradient settings, never a photo.

A finished gradient often goes on to other jobs. The Color Palette Generator builds matching colour schemes for the rest of a design, and the Color Picker finds the HEX code of any colour you see in a picture. Add Text to Image turns a gradient picture into a quote card or a banner, Resize Image fits it to an exact size, and the Favicon Generator makes a site icon from a gradient square.