CSS Gradient Maker
Build a linear, radial or conic gradient, copy the CSS code and download it as a PNG image.
Gradient colors
Everything runs in your browser: no data is sent.
About this tool
This CSS gradient generator lets you visually build a linear, radial or conic gradient and get ready-to-paste CSS code. Choose 2 to 6 colors, place each one where you want and set the angle: the preview updates live. Handy for a website background, a button, a banner or a social media visual.
The generated code has a first line with a solid fallback color, followed by the gradient. The Reverse and Random buttons help you explore ideas quickly. You can also download the gradient as a PNG image at 1920 × 1080, 1080 × 1080, 1080 × 1920 or 3840 × 2160 px, and share your creation with a link that contains its colors.
- Linear, radial or conic gradients
- 2 to 6 colors with adjustable positions
- Angle from 0 to 360° in 5° steps
- CSS code with a solid fallback color
- PNG export up to 3840 × 2160 px
How to use it
- Choose the "Gradient type" and set the "Angle".
- Set the "Gradient colors" and their positions; add more if needed.
- Click "Copy" to get the CSS code.
- Or pick a size and click "Download PNG".
Frequently asked questions
Are my colors sent anywhere?
No. The gradient is computed and drawn in your browser and no data is sent. The colors are only stored in the page address for the share link.
Is the gradient maker free?
Yes, it is free and works without an account or sign-up.
How do I use the gradient CSS code?
Copy both background lines and paste them into your element’s CSS rule. The first line applies a solid color if the browser does not support the gradient, the second applies the gradient.
Does the PNG image carry a watermark?
Yes, the downloaded PNG has a small, discreet "kspnai.com/tools/gradient-maker" mark with the KSPNAI logo in the bottom right corner. The copied CSS code contains no mark.