Gradient Generator
Design CSS gradients with draggable color stops and export CSS, Tailwind, and config.
This tool runs entirely in your browser. Your input is never uploaded.
Preview
linear-gradient(135deg, #4b5563 0%, #e5e7eb 100%)
Color stops
Click the bar to add a stop, drag a node to move it
Stop details
Click the swatch to open the color picker, or type a CSS color in the field. Add two more hex digits (e.g. #16653480) to set transparency.
Parameters
Export
background: linear-gradient(135deg, #4b5563 0%, #e5e7eb 100%);bg-[linear-gradient(135deg,_#4b5563_0%,_#e5e7eb_100%)]colors: {
gradient: {
0: '#4b5563',
1: '#e5e7eb',
}
}
Gradient Generator
Build CSS gradients visually and export ready-to-use code. Pick a type — linear, radial, or conic — then tune the parameters that apply:
- Linear: rotation angle (0–360°).
- Radial: circle or ellipse shape, edge size (
closest-side,closest-corner,farthest-side,farthest-corner), and center position. - Conic: start angle and center position.
Edit the color stops on the gradient bar: click an empty spot to add a stop (its color is sampled from the gradient), drag a node to move it, or refine each stop below with its color, an optional 8-digit hex alpha, and an exact position. Stops can share a position to create a crisp boundary.
A random button generates fresh gradients in any, vivid, pastel, or grayscale styles. Semi-transparent stops are previewed against a checkerboard.
Export
- CSS declaration:
background: linear-gradient(…);ready to paste. - Tailwind class: the same gradient as an arbitrary-value class, e.g.
bg-[linear-gradient(135deg,#4b5563_0%,#e5e7eb_100%)]. - Tailwind config: the stop colors as a
colors.gradienttheme snippet.
Everything runs locally in your browser.
Related tools
Color Converter
Convert colors, generate palettes, and check WCAG contrast locally.
Open ToolSVG Badge & Placeholder
Create Shields-style SVG badges or placeholder images locally and export them as SVG or PNG.
Open ToolImage Color Extractor & Picker
Pick colors from any image with a magnifier, copy HEX, RGB, and HSL, extract the dominant palette, and export ASE, JSON, CSS, GIMP, or PNG.
Open Tool