CSS Gradient Generator
🔒ブラウザ内処理
Create beautiful CSS gradients visually and copy the code. Everything runs in your browser — nothing is sent to any server.
Color stop positions — drag to move, click to add
Presets
Gradient type
Angle: 135°
Color stops
%
%
Color format
CSS
background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Tailwind CSS
bg-linear-to-br from-[#667eea] to-[#764ba2]
よくある質問
Are my gradients sent to a server?
No. All processing happens entirely in your browser. Nothing is uploaded or transmitted.
What is the difference between Linear, Radial, and Conic?
Linear blends colors in a straight direction. Radial radiates from a center point. Conic sweeps colors around a center like a pie chart.
Can I use the Tailwind CSS output directly?
Yes. For Linear gradients with a standard 8-direction angle and up to 3 color stops, standard Tailwind utility classes are generated. Otherwise, arbitrary value syntax ([background:...]) is used, which works with Tailwind CSS v3 and above.
How many color stops can I add?
Up to 8 color stops. A minimum of 2 is required.
What does the HEX / RGB / HSL toggle do?
It changes the color format used in the CSS output. Switch between formats to match your design tool or existing codebase.