Color & Design
CSS Gradient Generator
CSS Gradient Generator is a free tool that builds CSS gradient code from a visual editor — just set the colors, direction, and color stops. It supports all three gradient types, linear, radial, and conic, with a live preview, so you can quickly create gradients for website backgrounds, buttons, headings, and more.
Color stops (color anchor points)
Gradient type
Preview
CSS code
.gradient {
background-image: linear-gradient(90deg, #6366F1 0%, #EC4899 100%);
}
Every gradient is generated entirely in your browser, and the values you enter are never sent to any server.
Related Tools
Color Picker
Pick colors from an image and get the HEX, RGB, or HSL code. Zoom in with the loupe for pixel-level accuracy and export your palette. Free, no signup.
Color Code Converter
Convert color codes between HEX, RGB, HSL, HSV, and OKLCH, with alpha and a CMYK reference. Copy any format in one click. Runs entirely in your browser.
Contrast Checker
Check color contrast against WCAG 2.1 / 2.2 AA and AAA, with passing-color suggestions, color-blindness simulation, and APCA. Runs entirely in your browser.
Color Palette Generator
Free color palette generator. Pick one base color to generate complementary, analogous, triadic, and other color schemes from color theory. Export as CSS variables, Tailwind, SCSS, or JSON. Runs entirely in your browser.
About CSS Gradient Generator
CSS Gradient Generator is a free tool that builds CSS gradient code from a visual editor — just set the colors, direction, and color stops. It supports all three gradient types, linear, radial, and conic, with a live preview, so you can quickly create gradients for website backgrounds, buttons, headings, and more.
Pick a type, then adjust the angle with a slider for linear and conic gradients, or set the shape (circle or ellipse) and center position for radial gradients. Add and remove colors freely as color stops, drag the handles along the bar to reposition them, and choose colors with the color picker or HEX input. Each stop also has an opacity (alpha) value, so you can create transparent gradients with rgba(). Hit "Randomize" to explore color ideas in seconds.
Copy the finished gradient with one click as CSS (background-image), CSS variables (:root { --gradient }), a Tailwind backgroundImage value, or SCSS variables, then paste it straight into your project. Press "Copy URL" to get a shareable link that reproduces the current gradient — handy for sharing with your team or bookmarking.
Every gradient is generated entirely in your browser, and the values you enter are never sent to any server. No account and no ad clicks required — just start creating.
How to use
- Click the color stop bar to add a color, then drag the handles to reposition them. Set each color with the color picker or HEX input and adjust opacity (alpha) with the slider. Hit "Randomize" to explore color ideas in seconds.
- Choose a gradient type (linear, radial, or conic). Adjust the angle with the slider for linear and conic gradients, or set the shape (circle or ellipse) and center position for radial gradients.
- Check the gradient in the live preview. Press "Copy URL" to get a shareable link that reproduces the current settings.
- Under "CSS code", switch between the CSS, CSS variables, Tailwind, and SCSS tabs, then use "Copy CSS code" to grab the code and paste it into your project.
Use cases
- Designers and coders who want a gradient for a website or button background and need ready-to-paste CSS.
- Front-end engineers trying out linear, radial, and conic gradients to settle on a design direction.
- Developers who want to drop a gradient straight into code as CSS variables or a Tailwind config.
- Anyone building image overlays or glass-style effects with gradients that include transparency.
- Anyone who wants to hand a chosen gradient to their team via a share URL or reproduce the same settings later.
Notes
- Every gradient is generated in your browser, and the values you enter are never sent anywhere.
- Conic gradients (`conic-gradient`) may not render in some older browsers. Check support for your target environment.
- You can add up to 8 color stops. A stop outputs `#RRGGBB` at 100% opacity and `rgba()` below 100%.
- The share URL contains the type, angle, shape, center position, and each color stop (color, opacity, and position). Opening the URL reproduces the gradient with the same settings.