Build CSS gradients visually — linear, radial, or conic. Copy the CSS instantly.
CSS gradients create smooth transitions between colors without using images. linear-gradient() transitions along a straight line at any angle, radial-gradient() radiates from a center point, and conic-gradient() sweeps around a center like a color wheel.
Each gradient takes color stops — the colors and optional positions where they appear. Two stops create a simple fade; multiple stops create complex patterns. Stops can overlap (creating hard lines) or be spread apart (creating smooth blends). You can layer multiple gradients using comma separation for advanced effects.
Gradients are resolution-independent (they scale perfectly to any size), file-size free (no image download), and easily animated with CSS transitions. They're used for backgrounds, overlays, text effects, progress bars, and decorative elements. This tool lets you build gradients visually and copy the exact CSS.
This tool in other languages:
Français:
Générateur de dégradés CSS
Español:
Generador de gradientes CSS
Deutsch:
CSS-Farbverlauf-Generator
Português:
Gerador de gradientes CSS
日本語:
CSSグラデーションジェネレーター
中文:
CSS 渐变生成器
한국어:
CSS 그라디언트 생성기
العربية:
مولد التدرجات CSS
Pick the Linear type above, drag the angle slider to set direction (0° points up, 90° points right, 180° points down), and add as many color stops as you need. The linear-gradient() CSS is generated instantly below the preview — click Copy CSS and paste it into your stylesheet. No signup, no watermark, runs entirely in your browser.
Linear gradients transition colors along a straight line at a chosen angle — useful for backgrounds and buttons. Radial gradients radiate outward from a center point in a circle or ellipse — good for spotlights and soft glows. Conic gradients sweep colors around a center point like a pie chart or color wheel — used for loaders, pie charts, and hue pickers. This generator supports all three with a single click.
Click + Add stop under the Color Stops section. Each stop takes a color and a position (0–100%). You can add as many stops as you need to build multi-color gradients, rainbows, or smooth blends. Drag the position slider on each stop to control where that color peaks.
Yes. Copy the generated background: linear-gradient(...) value and use it in Tailwind's arbitrary-value syntax: bg-[linear-gradient(135deg,#00d4aa_0%,#7c3aed_100%)]. For cleaner code, add it to your tailwind.config.js under backgroundImage and reference it as a utility class like bg-brand-gradient.
Select the Conic type, then add color stops at specific percentages to define each slice. For a pie chart with three equal sections, use stops at 0%, 33%, 33%, 66%, 66%, and 100% with hard transitions (same position for adjacent stops creates a sharp edge). Adjust the starting angle with the Angle slider.
Yes, in most cases. CSS gradients are rendered by the browser with zero network requests, no file size cost, and scale perfectly to any resolution or screen density. A background image is a separate HTTP request and can blur on high-DPI displays. Gradients are also easily animated with CSS transitions, which is difficult with raster images.
Yes. DeskTools runs 100% in your browser — no data is ever sent to a server. Once the page is loaded, the gradient generator works fully offline. Nothing you create is logged, tracked, or stored outside your own device.