CSS Gradient Generator
Design linear and radial gradients visually. Add up to six color stops, check contrast for text, and copy production-ready CSS, Tailwind, or SCSS. Runs entirely in your browser.
Gradient editor
background: linear-gradient(135deg, #00ff88 0%, #00d4ff 100%);
How to use the gradient generator
Choose linear or radial
Use the type toggle at the top of the controls. Linear blends along a straight line — good for backgrounds and buttons. Radial blends outward from a point — good for spotlights and glows.
Set your color stops
Each row is one stop. Click the swatch to open the system color picker, or type a hex value directly. Drag the position slider or type a number to move the stop. Add up to six stops with the button below the list.
Adjust direction
For linear gradients, drag the angle slider or tap one of the four preset angles. For radial gradients, choose a shape, a size keyword, and a center position as a percentage of the preview.
Check contrast for text
The contrast panel shows the WCAG ratio for black and white text against each end of the gradient. Aim for 4.5:1 for body text or 3:1 for large text before you place any copy over the gradient.
Copy the code
Pick your output format — CSS, CSS variable, SCSS, Tailwind arbitrary value, JavaScript, or React inline style — then click Copy. The snippet is ready to paste.
Share or save
Click Share URL to copy a link with the full gradient state encoded. Anyone who opens it sees the same design. Click Save to keep it in your local favourites, or use the browser's back button to undo changes.
Popular gradient palettes
Thirty-two hand-picked gradients. Click any card to load it into the editor above. Three-color palettes load with a middle stop at 50%.
Why use CSS gradients instead of images
A CSS gradient is drawn by the browser, not downloaded from your server. That single fact changes everything about how it behaves. An image asset has a fixed resolution; a gradient does not. An image needs a new export for every breakpoint; a gradient does not. An image adds weight to the page; a gradient adds a few bytes of text.
On a modern site, a hero section with a photographic background can easily
cost 200 to 400 kilobytes. The same visual weight can be achieved with a
background
gradient that costs roughly 80 characters. On a slow mobile connection that
is the difference between a fast paint and a visible stall.
Gradients also behave predictably with color management, dark mode toggles, and CSS variables. Swap one variable and the entire site theme shifts. There is no re-export step, no cache invalidation, no forgotten asset. For teams that ship frequently, this alone is worth the switch.
The tool above exports gradients as plain CSS. There is nothing proprietary, nothing that depends on this site. Paste the code into your project and delete this tab — the gradient is yours.
Frequently asked questions
Copy the CSS from the code box and paste it into your stylesheet as the background property. The output is standard CSS3 and works in all modern browsers without vendor prefixes.
A linear gradient blends colors along a straight line at an angle you choose. A radial gradient blends outward from a center point, in a circular or elliptical shape. Use linear for directional backgrounds and radial for spotlight or button effects.
Yes. This tool supports up to six color stops. Click Add stop to insert another one, then set its color and position. Stops are automatically sorted by position when the CSS is generated, so the render order matches the visual order.
Click Share URL to copy a link that contains the full gradient state. Anyone who opens that link will see the same gradient loaded into the editor.
The contrast panel under the code box shows the WCAG contrast ratio of both black and white text against each endpoint of the gradient. Use it to pick a text color that meets AA (4.5:1) or AAA (7:1) before publishing.
No. The gradient editor runs entirely in your browser. Your saved favourites and preferences stay in localStorage on your device. Analytics are disabled until you opt in through the cookie banner, and the site does not sell or share personal information. See the privacy policy for details.
Other tools on SkillsInsider
Base64 Studio
Encode and decode text, images, and files.
JSON Converter
Format, validate, convert JSON to CSV or XML.
Image Optimizer
Compress images without visible quality loss.
FAQ Generator
Build FAQ sections with matching schema.
Color Picker
HEX, RGB, HSL, and CSS variable export.
Meta Tag Generator
Open Graph, Twitter, and SEO tags.