CSS gradient generator
Create a linear, radial or conic CSS gradient with several colors, see it live and copy the CSS or Tailwind code. Export as a PNG image.
- Free
- No sign-up
- No file uploaded
- Windows, Mac, Android, iPhone
Loading the tool…
About this tool
Build a CSS gradient live: linear, radial or conic, up to 8 colors with their position and opacity, adjustable angle and center. Copy the CSS code or the Tailwind class, or save the gradient as an image for a wallpaper or a mockup.
When to use it
Section and button backgrounds
A subtle gradient adds depth to a hero banner or a primary button without loading an image: the code fits on one line.
Overlay on a photo
A gradient from transparent to black over the bottom of an image makes white headings readable whatever the photo.
Wallpapers and visuals
Saved at 1920 × 1080, the gradient works as a wallpaper, a slide background or the base of a social media visual.
How to use
- Pick the gradient type and its angle.
- Set each color and its position, up to 8 colors.
- Copy the CSS or Tailwind code, or save the gradient as an image.
How it works
The tool writes the same syntax as stylesheets: colors are sorted by position, opacity becomes rgba(), and the angle follows the CSS convention (0deg points up, 90deg points right).
For the image export, the gradient is redrawn in a canvas with the same rules as CSS: a linear gradient's line is computed so that the corners get the end colors, and a radial gradient reaches the farthest corner.
Tips for best results
- Two neighboring colors on the color wheel make the most natural gradients.
- Avoid passing through gray: between two complementary colors, add a bright intermediate color.
- For text on top, check the contrast against the lightest color of the gradient.
- Repeating conic gradients make lovely fan patterns with two close colors.
Common problems and fixes
A gray band appears in the middle
Blending two opposite colors goes through gray. Add an intermediate color or bring the hues closer.
The gradient looks banded
Very soft gradients over large areas can show bands. Increase the color difference or add slight noise in an image.
The Tailwind class doesn't work
The bg-[…] class requires Tailwind 3 or later with arbitrary values enabled (the default).
Frequently asked questions
What is the difference between linear, radial and conic gradients?
Linear blends colors along a straight line, radial spreads from a center outward, and conic turns around a center like clock hands (useful for pie charts and color wheels).
Does the code work in every browser?
Yes. linear-gradient, radial-gradient and conic-gradient are supported by all recent browsers. A solid color is added on the first line for very old browsers.
Can I use transparency?
Yes: each color has its own opacity. A gradient to a transparent color is often used to darken the bottom of a photo so text can sit on it.
What does the “Repeat” option do?
It produces a repeating gradient: the pattern repeats, creating stripes or concentric circles from two or three close colors.
Related searches
Still stuck?
Ask on the forum: the category, the tool, your device sheet and the test result will be filled in for you.