Mesh Gradient Generator
Drag colour points into a soft mesh, animate it, export it.
CSS Gradient Generator
A CSS gradient maker for backgrounds, text and buttons
The Wensity CSS Gradient Generator is a free tool that builds linear, radial and conic gradients in your browser and writes the CSS for you. Start from one of 43 presets or from a single colour, shape the gradient on a live canvas, and copy code that pastes straight into a stylesheet, a Tailwind class or a React component.
What you see on the canvas is drawn by the same CSS you copy, so the preview never drifts from the result.
How to make a CSS gradient
Three steps, and no account at any point.
1. Start from a colour
Pick a preset, or type one colour and choose shades, tints, analogous or complementary stops.
2. Shape it
Switch between linear, radial and conic, then drag the handles to set the angle or centre.
3. Copy the code
Copy CSS, Tailwind classes or SVG, or download the gradient as an image.
CSS gradient examples to start from
Three of the 43 presets, across 8 sets from classics, pastels and sweeps to light. Each one opens in the generator above, ready to change.
Linear, radial and conic gradients in CSS
One switch changes the type and keeps your colours, so you can compare all three on the same palette.
A linear gradient blends colours along a line at an angle, written as linear-gradient(). It is the usual choice for a page background or a button. Drag the two handles to set the angle, and add an easing curve when the blend feels too sudden in the middle.
A radial gradient spreads colours out from a centre point as a circle or an ellipse, written as radial-gradient(). Move the centre to place a glow, and set how far it reaches, from the closest side to the farthest corner.
A conic gradient sweeps colours around a centre point, written as conic-gradient(). It makes colour wheels, pie charts and metallic sheens. Switch on Rotate and linear and conic layers turn in pure CSS, through an animated custom property that stops for visitors who prefer reduced motion.
Stack up to 8 layers with up to 16 colour stops each, and blend them with CSS blend modes for mesh-like fields. To build one from colour points instead, use the Mesh Gradient Generator.
Text gradient generator and gradient buttons
Use on switches the same gradient between a background, a heading and a button, and the copied code changes with it.
Background
A plain background declaration, with an optional grain layer and a solid colour fallback.
Text
Your own words in the gradient, written with background-clip: text and a transparent colour.
Button
A styled button with white text, padding and rounded corners around the gradient.
Colours are mixed in OKLab by default, which keeps the middle of a blend bright instead of grey. OKLCH, a longer hue path and plain sRGB are one click away, and Fallback adds an sRGB version to the copied CSS for older browsers. A text contrast panel reports how white and black type read on the gradient against the WCAG levels.
Copy CSS, Tailwind gradient classes or SVG
Every format is free, with no watermark and no account.
Code
CSS, Tailwind classes, a Tailwind v4 utility, CSS variables, SCSS, a React style object and JSON tokens.
Images
PNG, JPG, WebP or SVG at the canvas size, and PNG at double size when it fits the size limit.
Wallpapers
One-click PNG sizes: 4K wallpaper, Laptop wallpaper, Phone wallpaper, Story, Instagram post, Open Graph and X header.
Paste any CSS gradient onto the page to open it for editing, and save designs you want to keep with Command S. Share link copies the whole design into a URL, and Open in full studio carries it into Background Studio.
Add grain, glass or motion in Background Studio
When a flat gradient is not enough, open it in Background Studio and add grain, halftone or glass over it, or start from a shader that moves.
Background Studio is Wensity's full background editor, and Open in full studio carries your design into it: 224 gradient, shader and texture backgrounds in 19 sections, layers, and export to PNG, MP4 video or a React component.
CSS gradient questions, answered
What people ask about CSS gradients and this generator: the gradient types, text gradients, Tailwind output and what is free.
Yes. Every preset, control and export in the Wensity CSS Gradient Generator is free, with no account and no watermark. That includes the CSS, Tailwind, SCSS, React and SVG code, and PNG, JPG, WebP and SVG downloads.
Pick a preset or type one colour and let the tool build the stops, choose linear, radial or conic, then drag the handles on the canvas to set the angle or centre. Copy CSS puts the finished background declaration on your clipboard, ready to paste into a stylesheet.
A linear gradient blends colours along a straight line at an angle. A radial gradient spreads them out from a centre point as a circle or an ellipse. A conic gradient sweeps them around a centre point like the hands of a clock, which suits pie shapes, colour wheels and sheens.
Yes. Set Use on to Text and the generator writes the gradient with background-clip: text and a transparent text colour, which is how a text gradient works in CSS. A contrast panel reports how readable white or black text is on the gradient when you use it as a background instead.
Yes. Copy Tailwind classes gives arbitrary value classes you can paste into a className, and Tailwind v4 utility gives an @utility rule, so the gradient becomes a named class such as bg-gradient-brand.
The generator mixes colours in OKLab by default, which avoids the grey, muddy middle that sRGB mixing gives between some colours. With Fallback switched on, the copied CSS also includes a solid colour and an sRGB version for browsers without OKLab support.
Yes. Paste a CSS gradient anywhere on the page, or into Import CSS, and the generator opens it as editable layers with their stops, angle and position.
Yes. Switch on Rotate under Motion and linear and conic layers turn on a loop in pure CSS, using a registered custom property and keyframes, with no JavaScript. The copied CSS includes a reduced motion rule, so the gradient stays still for visitors who ask for less motion.
Parth
Founder, Wensity
Still have a question?
Ask about plans, licensing, or templates and you will hear back from me directly.
Email hey@wensity.comMore free design tools
Pair a gradient with grain from the Noise Texture Generator, or build a softer field from colour points. See all free tools.
