All tools

CSS Gradient

CSS

Visual CSS gradient builder with linear, radial, and conic support

Drag color stops and an angle slider to build a linear, radial, or conic gradient visually, then copy the resulting CSS, no hand-writing gradient syntax or guessing stop percentages. Linear gradients transition along a straight line at an angle, radial ones radiate from a center point, and conic ones rotate around a center like a color wheel, which makes conic mode a natural fit for pie-chart-style visuals or button highlights that plain linear/radial can't produce. Any number of color stops is supported, not just two. Linear and radial gradients have universal modern browser support; conic gradients work in all current major browsers but may need a fallback for very old ones. Output is CSS only. There's no image export, so if you need a rendered image you'd have to paint the CSS onto a canvas yourself.

cssgradientcolor

How to use CSS Gradient

  • 1.Pick 2 or more colors and drag their stop positions to visually build a linear, radial, or conic gradient.
  • 2.Adjust the angle slider for linear gradients to get the exact direction you want, then copy the generated CSS.
  • 3.Use the radial or conic modes to create button highlights, background effects, or pie-chart-style visuals without hand-writing gradient syntax.

Frequently asked questions

What's the difference between linear, radial, and conic gradients?
Linear gradients transition along a straight line at a given angle, radial gradients radiate outward from a center point, and conic gradients rotate around a center point like a color wheel.
Can I use more than 2 colors?
Yes, you can add as many color stops as you need, each with its own position along the gradient.
Does the generated CSS work in all browsers?
Linear and radial gradients have universal modern browser support; conic gradients are supported in all current major browsers but may need a fallback for very old browser versions.
Can I export this as an image instead of CSS?
This tool outputs CSS only. For an image, you'd need to render the CSS gradient to a canvas or use a design tool — copy the CSS here and paste it into a browser dev tools canvas snippet if needed.

Use via API, SDK, or MCP

cURL# Free: 1,000 req/day · Pro: 10,000 req/day
curl -X POST https://api.utilix.tech/v1/tools/css-gradient \
  -H "Authorization: Bearer utx_live_..." \
  -H "Content-Type: application/json" \
  -d '{"type":"linear","colors":["#16a37f","#0ea5e9"],"angle":135,"shape":"circle"}'

Get an API key from your dashboard · Full API docs →

Related tools

Color BlenderBlend two colors with intermediate steps and explore complementary/analogous/triadic relationshipsColorColor Shades GeneratorGenerate tints and shades scale from any base color with CSS variable outputColorBorder RadiusVisual CSS border-radius builder with live preview and presetsCSS