Click bar to add stop · Drag handles · Click handle to select
background: linear-gradient(135deg, #7c6dfa 0%, #c47fff 50%, #4dd9c0 100%);
You Might Also Like
CSS Gradient Generator — Linear, Radial, Conic & Animated
About this tool
What Is This CSS Gradient Generator?
This is a free, browser-based CSS gradient generator for building linear, radial, conic, and animated CSS gradients entirely visually — no code required until you export. The interactive gradient bar at the top of the tool shows your current gradient with a draggable handle for each color stop. Drag any handle left or right to reposition it. Click any empty area of the bar to add a new color stop — the color is automatically interpolated from the gradient at the exact click position, so new stops always blend seamlessly into the existing gradient. Click any handle to select it, then change the stop's color with the color picker and adjust its opacity with the opacity slider. The live preview pane updates in real time as you make every change, showing exactly how the gradient will render in a browser.
A CSS gradient is a smooth color transition generated entirely by the browser's rendering engine — no image files, no SVG, no JavaScript. CSS supports three gradient functions: linear-gradient() for straight-line transitions in any direction, radial-gradient() for circular transitions outward from a center point, and conic-gradient() for rotational sweeps around a center, producing color-wheel and pie-chart effects. All three types support multiple color stops at arbitrary positions, RGBA colors with transparency, and the same set of browser-native color formats. This generator handles all three types with dedicated controls for each — a direction picker and degree input for linear gradients, and a focal point control for radial gradients.
What separates this CSS gradient generator from most online tools is full animated gradient support. Six animation presets are available: Slide (animates background-position for a flowing left-right motion), Diagonal (corner-to-corner flow), Hue Shift (continuously cycles all hues via CSS filter: hue-rotate, requiring no color stop changes), Breathe (pulses background-size in and out for a breathing effect), Pulse (fades opacity in and out), and Spin (rotates the gradient angle using the modern @property CSS custom property, supported in Chrome and Edge). The animation speed is adjustable from 1 second to 12 seconds. The full @keyframes block and all required CSS is included in the CSS export tab — paste it directly into your stylesheet and the animation runs with no JavaScript.
Three preview modes let you see the gradient in different contexts before exporting. Background mode fills the entire preview area with the gradient — the most common use case for hero backgrounds and section fills. Text mode clips the gradient to large display text using CSS background-clip: text and color: transparent — showing exactly how the gradient will look on text without needing to write any code. Border mode previews the gradient as a card outline border and a filled button, demonstrating two common UI use cases. Switching between modes takes one click and the export updates to include the correct CSS for whichever mode you are previewing.
Features
- Interactive gradient bar — drag color stop handles, click to add new stops with auto-interpolated color
- Three gradient types: linear (any angle), radial (focal point control), and conic (rotational)
- Six animated gradient presets — Slide, Diagonal, Hue Shift, Breathe, Pulse, Spin (@property)
- Adjustable animation speed from 1s to 12s — preview plays live
- Three preview modes — Background, Text clip (background-clip: text), Border/Button
- 8+ curated one-click gradient presets to start from
- Angle and direction controls for linear gradients with degree input
- Opacity slider per color stop — full RGBA transparency support
- Export as CSS with @keyframes, Tailwind utility classes, or SCSS variables
- One-click Copy for any export format
- 100% client-side — no data sent to any server, no sign-up required
How to Use
Select a gradient type from the toolbar at the top: Linear, Radial, or Conic. The gradient bar below immediately shows your current gradient with color stop handles. Click the bar anywhere to add a new stop — the color is auto-interpolated from the gradient at that position so new stops blend naturally. Drag any handle left or right to reposition it. Click a handle to select it, then use the color picker to change that stop's color and the opacity slider to adjust its transparency.
For linear gradients, use the angle control below the gradient bar to set the direction — drag the dial or type a degree value directly. Common values: 0deg (top to bottom), 90deg (left to right), 135deg (diagonal). For radial gradients, the focal point control lets you position the center of the gradient. For conic gradients, colors sweep rotationally around the center — great for color wheels and pie-chart effects.
Browse the curated preset palette on the right to start with a professionally chosen color combination. Click any preset to load it instantly, then customize from there. Presets cover common design patterns: ocean blues, sunset oranges, purple-to-pink, neon glows, monochrome fades, and warm neutrals.
To add a CSS animation, select one of the six presets in the animation panel: Slide creates a flowing background-position animation, Hue Shift continuously rotates all colors through the hue wheel using filter: hue-rotate, Breathe pulses the background-size, Pulse fades opacity in and out, and Spin rotates the gradient angle (Chrome/Edge). Drag the speed slider to adjust duration from 1s (fast and urgent) to 12s (slow and ambient).
Switch the preview mode between Background (full area fill), Text (gradient clipped to display text), and Border (card outline and filled button) to see the gradient in different UI contexts. When you are ready to export, switch between the CSS, Tailwind, and SCSS tabs in the export panel at the bottom and click Copy. The CSS export includes the background property, any animated @keyframes, and any additional CSS needed for the active preview mode (e.g. background-clip: text for text mode).
Common Use Cases
Frequently Asked Questions
A CSS gradient is a smooth color transition generated entirely by the browser — no image file required. CSS supports linear-gradient() for straight-line transitions, radial-gradient() for circular transitions from a center point, and conic-gradient() for rotational sweeps. Each gradient takes a list of color stops — colors at specific percentage positions — and the browser interpolates between them. Gradients are applied as CSS background images using the background or background-image property.
Linear gradients transition along a straight line at a specified angle — 0deg is top-to-bottom, 90deg is left-to-right, and any value between creates a diagonal. Radial gradients transition outward from a focal center point in a circular or elliptical pattern. Conic gradients sweep colors around a center point rotationally — like a color wheel or pie chart. All three support multiple color stops and RGBA transparency.
The interactive gradient bar at the top of the tool shows a handle for each color stop. Drag any handle left or right to reposition it. Click any empty area of the bar to add a new stop — the color is automatically interpolated from the gradient at that point, ensuring the new stop blends naturally. Click a handle to select it, then use the color picker to change its color and the opacity slider to adjust transparency. To remove a stop, select it and click the delete button.
Six animated gradient presets are available. Slide animates background-position from 0% to 100% — requires background-size: 200% to have room to scroll. Diagonal flows corner-to-corner. Hue Shift continuously rotates all colors through the hue wheel using CSS filter: hue-rotate — no color stop changes needed. Breathe pulses background-size in and out for a subtle breathing motion. Pulse fades opacity in and out. Spin rotates the gradient angle using the CSS @property custom property for smooth rotation — supported in Chrome and Edge. All presets export a complete @keyframes block and the required animation property.
Text mode clips the gradient to the foreground text using CSS background-clip: text and color: transparent. This produces the popular gradient text effect used in modern headings and logos. The CSS export for this mode includes both the required -webkit-background-clip: text prefix for Safari compatibility and the standard background-clip: text. The exported CSS is ready to paste directly onto any heading or paragraph element.
When an animation preset is active, select the CSS tab in the export panel at the bottom of the tool. The export includes the background property with the gradient value, the background-size or other properties required for the animation, and the complete @keyframes block. Paste everything into your stylesheet and the animation runs immediately. No JavaScript is required for any of the six animation presets.
Yes. The Tailwind tab generates bg-gradient-to-* direction classes (bg-gradient-to-r, bg-gradient-to-br, etc.) combined with from-, via-, and to- color stop classes for simple gradients. For complex gradients with more than three stops or arbitrary angles, the export uses Tailwind arbitrary value syntax: bg-[linear-gradient(135deg,#667eea_0%,#764ba2_100%)]. Copy from the Tailwind tab and paste directly into any className attribute.
A conic gradient sweeps colors around a center point rotationally — producing a color wheel, pie chart, or spinner effect. Unlike radial gradients (which radiate outward), conic gradients rotate the color transition around the center. Use conic-gradient() for pie charts (each color stop covers a different arc percentage), color wheel backgrounds, loading spinners with a gradient arc, and progress rings. Browser support is excellent across all modern browsers.
Yes. The SCSS export tab generates the gradient as SCSS variables ($gradient-from, $gradient-to, $gradient-angle) and the compiled background property. This makes the gradient configurable from a single source of truth in your SCSS design tokens file, and changes to the color variables automatically update all elements using the gradient mixin.
Yes — completely free, no sign-up required. All gradient calculation and code generation runs entirely in your browser using JavaScript. No gradient data, color values, or settings are sent to any server. You can use the tool offline once the page has loaded.