CSS Gradient Generator — Linear, Radial & Conic
Build CSS gradients visually. Up to 5 color stops with alpha, angle and position controls, 8 presets, and live preview. Copy the CSS in one click.
background: linear-gradient(135deg, #F28C28 0%, #F5C76B 100%);
Free. Runs in your browser. No signup.
About this tool
WRRK's CSS gradient generator outputs production-ready linear-gradient(), radial-gradient(), and conic-gradient() declarations. Every modern browser supports these natively without vendor prefixes — Chrome, Safari, Firefox, Edge — so the CSS you copy works everywhere.
The visual gradient bar shows your stops in real time, and each stop has independent color, alpha, and position (0-100%) controls. Alpha below 100% switches output to rgba() so transparency renders correctly when layered over photos or other elements. Radial and conic modes add shape (circle vs ellipse) and center position controls — letting you build spotlight effects, pie-chart progress rings, color wheels, and conic-sweep loaders. Eight presets — Sunset, Ocean, Aurora, Peach, Mint, Royal, Candy, and the WRRK Amber gradient — give you instant starting points you can fine-tune.
How to build a gradient (5 steps)
- Pick a type. Choose linear, radial, or conic. Linear is the most common — great for backgrounds and buttons.
- Set direction. For linear, drag the angle slider. For radial, choose circle/ellipse and a center position. For conic, set the start angle and center.
- Add color stops. Click 'Add stop' to insert a color (up to 5). Each stop has its own color, alpha, and position along the gradient.
- Tune alpha. Drop a stop's alpha below 100% to fade into transparency — useful when layering over photos.
- Copy the CSS. Click 'Copy CSS' to grab the full background declaration. Paste into your stylesheet, Tailwind arbitrary value, or inline style.
When to use a gradient
- Hero sections — soft brand-color sweeps grab attention without imagery
- Buttons and CTAs — subtle two-stop gradients add depth
- Card backgrounds — radial highlights make tiles feel premium
- Loading states and progress rings — conic gradients work natively
- Photo overlays — translucent linear gradients aid text legibility
- Mesh backgrounds — stack multiple radial gradients for trendy blurry-blob effects
- Decorative dividers and section breaks
Frequently asked questions
+−What's the difference between linear, radial, and conic gradients?
Linear gradients blend colors along a straight line at a chosen angle — great for backgrounds and buttons. Radial gradients blend outward from a point as a circle or ellipse — perfect for spotlight effects. Conic gradients sweep colors around a center point like a pie chart — useful for color wheels, progress rings, and decorative shapes.
+−How do I add transparency to a gradient stop?
Each stop has an alpha slider (0-100%). When alpha is below 100%, the tool emits rgba() syntax instead of HEX so the transparency renders correctly. Useful for layering a gradient over a photo or another color.
+−How many color stops can I add?
Between 2 and 5. Two stops give you a clean blend; three or more let you build sunset-style or rainbow effects. Each stop has its own color, alpha, and position (0-100%) along the gradient axis.
+−Why does my gradient look banded?
Browsers render gradients with limited color precision (8-bit per channel), so subtle blends between similar colors can show stepped 'bands'. Fix it by adding a third intermediate stop, increasing contrast between endpoint colors, or applying a small noise/grain overlay above the gradient.
+−Can I use these gradients in Tailwind CSS?
Yes — copy the generated CSS and apply it via Tailwind's arbitrary value syntax: bg-[linear-gradient(135deg,#F28C28,#F5C76B)]. For complex gradients, define a CSS variable in your stylesheet and reference it. Tailwind's bg-gradient-to-r utilities are limited to 3 stops with no angle control, which is why a generator helps.
+−Are gradients accessible? Will they affect contrast?
Gradients can hurt text contrast because the background color shifts across the element. If you place text on a gradient, check the lightest and darkest stops against your text color using a contrast tool. For long blocks of text, prefer a flat background; reserve gradients for hero sections, buttons, and decorative cards.
+−Is the gradient generator free? Any signup?
Free, no signup, runs entirely in your browser. The tool emits standard CSS that works in every modern browser without prefixes.