Loading…
Loading…
Create beautiful gradients with a visual editor
background: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);
bg-[linear-gradient(135deg,_#7c3aed_0%,_#06b6d4_100%)]
Run your projects on Claude Code?
We packaged the .claude config that runs this site — 26 specialist agents, 14 workflow skills, and 6 rule files from 31 real production incidents. From $9.
Get the Claude Code Production Pack — $29CSS gradients — defined in the CSS Images Level 3 and Level 4 specifications — replace image files for background effects that scale perfectly at any resolution. The three gradient types (linear-gradient, radial-gradient, conic-gradient) each accept multiple color stops with optional percentage or length positions, opacity values, and color hints that control the midpoint of each transition. Generating these by hand requires memorizing the exact syntax for angles, at-position syntax for radial gradients, and the from angle syntax for conic gradients.
The generator maintains an in-memory gradient model: type, angle or position, and an ordered array of color stops. Each stop stores a color (in HSL internally for UI controls, converted to hex or rgba for CSS output) and a position percentage. The live preview renders an actual CSS gradient on a canvas element, so what you see matches exactly what browsers will render.
Linear gradients accept an angle in degrees (0deg points upward, 90deg points right, following the CSS specification's clock-wise convention from the top). The generator lets you drag a direction dial or type a degree value. Radial gradients accept a shape (circle or ellipse) and an at position (center, top left, or custom percentage coordinates). Conic gradients accept a from angle and an at position.
Color stop positions are expressed as percentages of the gradient length. When no position is given, stops are evenly distributed. The generator adds explicit positions to every stop in the output so the CSS is portable and predictable regardless of how stops are reordered.
A frontend developer creates a brand-specific hero background gradient and exports the CSS to paste directly into a Tailwind arbitrary value class.
A UI designer tests multiple color stop combinations to find the gradient that best transitions between two brand colors without producing an unsightly muddy midpoint.
A developer replicates a gradient from a design mockup by adjusting color stops until the live preview matches the Figma frame exactly.
A web developer uses the conic gradient type to generate a CSS-only pie chart progress indicator without any SVG or JavaScript.
Choose gradient type — Linear, Radial, or Conic
Adjust the angle/position and add color stops with the color picker
Click any preset for instant beautiful gradients, or hit Random
Copy the CSS code or Tailwind arbitrary value class
About the CSS Gradient Generator
Linear (directional), Radial (circular/elliptical from a point), and Conic (color sweep around a center point). Each has specific controls for angle, shape, and position.
Yes. The tool generates Tailwind arbitrary value syntax like bg-[linear-gradient(...)] that you can paste directly into your className.
There is no hard limit. Add as many color stops as you need, each with its own color and position percentage.
Yes. 10 carefully curated presets (Sunset, Ocean, Forest, Lavender, Peach, Midnight, Aurora, Flamingo, Emerald, Cosmic) that you can use as starting points.
A linear gradient transitions colors along a straight line at a given angle. A radial gradient radiates from a center point outward in a circle or ellipse. A conic gradient sweeps colors around a center point like a color wheel, which is useful for pie charts and spinner effects.
Place two color stops at the same position percentage. For example, red at 50% and blue at 50% creates a sharp line between the two colors with no gradient transition. This technique is used for striped backgrounds and split designs.
Linear and radial gradients are supported in all modern browsers with identical rendering. Conic gradients require Chrome 69+, Firefox 83+, and Safari 12.1+. The generated code does not include vendor prefixes since all major browsers have supported unprefixed gradient syntax since 2015.
Builder/critic agent prompts with brakes built in
Open →DeveloperFormat, validate & diff JSON — runs entirely in browser
Open →DeveloperTest regex live — railroad diagrams + plain English explained
Open →DeveloperOne color in, full design system out
Open →