background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
This is a free visual tool for creating CSS gradients without writing code by hand. It supports all four CSS gradient types — linear, radial, conic, and mesh — and generates production-ready code you can copy with one click. Pick colors from 120+ curated presets or build your own from scratch. The live preview updates instantly as you adjust angles, colors, and positions. Output formats include vanilla CSS, Tailwind utility classes, SCSS with variables, and CSS custom properties.
Step 1: Choose a gradient type. Select Linear, Radial, Conic, or Mesh from the tab buttons at the top. Each type has its own controls.
Step 2: Set your colors. Click on the color stop bar to add stops, click a stop to edit its color, and drag stops to reposition them. Use the color picker or type a hex code directly.
Step 3: Adjust direction and position. For linear gradients, set the angle using the slider or direction presets. For radial and conic, click on the preview to set the center point.
Step 4: Copy the code. Switch between CSS, Tailwind, SCSS, and CSS Variables tabs, then click Copy Code. The code is ready to paste into your project.
Step 5: Explore extras. Try the animation toggle, text gradient mode, preset gallery, randomize button, or share your gradient via URL.
Four gradient types in one tool. Linear gradients follow a straight line at any angle. Radial gradients radiate outward from a center point as circles or ellipses. Conic gradients sweep around a center point like a color wheel. Mesh gradients blend four color points with organic, natural-looking transitions.
120+ curated preset gradients. Browse a gallery of handpicked gradients organized into 10 categories: Warm, Cool, Nature, Sunset, Pastel, Dark, Neon, Monochrome, Rainbow, and Popular. Search by name or color, click any preset to load it, then customize it further.
Multiple code output formats. Get your gradient as plain CSS, Tailwind utility classes, SCSS with named variables, or CSS custom properties for theming. Each format is copy-ready and optimized for its ecosystem.
Animation system. Add flowing CSS animations to any gradient. Choose shift, hue-rotate, or pulse effects with adjustable speed. The generated code includes complete @keyframes rules and animation properties — no JavaScript required.
Text gradient mode. Apply your gradient to text using the CSS background-clip technique. Adjust font size, weight, and preview your text gradient in real-time. The code output automatically includes the required text gradient properties.
Share and randomize. Every gradient state is encoded into the URL, so you can share your creation by copying the link. The randomize button generates harmonious color combinations using HSL color theory for consistently beautiful results.
Linear gradients use linear-gradient(angle, color1 position, color2 position). The angle defaults to 180deg (top to bottom). Use degree values (0-360) or direction keywords like to right or to bottom left. Add repeating- prefix for striped patterns.
Radial gradients use radial-gradient(shape size at position, color1, color2). The shape can be circle or ellipse. Size keywords include closest-side, farthest-corner, and more. Position defaults to center.
Conic gradients use conic-gradient(from angle at position, color1 degree, color2 degree). Colors are distributed around 360 degrees from the starting angle. Perfect for color wheels and pie charts.
Mesh gradients aren't natively supported in CSS yet. This tool simulates them by layering multiple radial gradients with different positions and blend modes, producing a similar organic multi-point color blend effect.
Completely free, no signup, no limits. Everything runs in your browser — no data is sent to any server. Create as many gradients as you want.
Yes. Switch to the Tailwind tab to get Tailwind utility classes for your gradient. Simple 2-3 stop linear gradients use native Tailwind utilities (bg-gradient-to-r, from-color, via-color, to-color). Complex gradients use arbitrary value syntax.
Yes. Toggle 'Animate gradient' to add CSS animations. Choose from shift, hue-rotate, or pulse effects with adjustable speed. The generated code includes the @keyframes rule.
There is no hard limit. Add as many color stops as you need by clicking on the color stop bar or using the + button. Most gradients look best with 2-5 stops.
CSS gradients are supported in all modern browsers including Chrome, Firefox, Safari, and Edge. Linear and radial gradients have 98%+ global support. Conic gradients work in all current browsers.
A mesh gradient blends multiple colors from different positions, creating smooth organic transitions. Since native CSS mesh gradients aren't supported yet, this tool generates the effect using layered radial gradients.