Como usar: CSS Gradient Generator
- Pick a preset or start from the default gradient.
- Choose Linear, Radial or Conic and set the angle, shape or position.
- Edit the color stops: click the bar to add one, drag handles to move them, type exact colors and positions in the list.
- Optionally pick an OKLab/OKLCH interpolation for smoother blends, then click Copy CSS.
What is a CSS gradient?
A CSS gradient is an image generated by the browser that transitions between two or more colors. Because it’s an <image>, you use it in background, background-image, border-image or mask-image — not in background-color. Gradients need no HTTP request, scale to any size without blurring and can be animated or layered.
Linear, radial and conic gradients
| Type | Example | Typical use |
|---|---|---|
| Linear | linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%) | Hero backgrounds, buttons, image overlays |
| Radial | radial-gradient(circle at top, #fff 0%, #312e81 100%) | Spotlights, glows, vignettes |
| Conic | conic-gradient(from 0deg at center, red, yellow, lime, aqua, blue, magenta, red) | Color wheels, pie charts, loaders |
In a linear gradient 0deg points up and 90deg points right (the same as to right). Conic angles start at the top and run clockwise.
Color stops and hard edges
Each stop is a color plus an optional position. When two stops share the same position the transition becomes a hard edge — that’s how you build stripes or the Pie chart preset: #4f46e5 0% 40%, #22c55e 40% 75%. To fade content into the page, end with a transparent version of the same color (e.g. #00000000), which avoids a muddy gray band.
Smoother gradients with OKLab and OKLCH
By default browsers interpolate in sRGB, so blue → yellow passes through a dull gray. CSS Color 4 lets you choose the color space: linear-gradient(90deg in oklab, blue, yellow) stays bright and even, and in oklch travels around the hue wheel. The generator outputs a plain sRGB declaration first and the interpolated version second, so browsers that don’t understand the syntax simply ignore the last line.
Using gradients in Webflow
Webflow’s Style panel has built-in linear and radial gradient editors under Backgrounds — copy the angle and stop colors from this tool into it. For anything the panel doesn’t expose, such as conic gradients or in oklch interpolation, paste the CSS into a <style> block in an Embed element or the page’s custom code and target your class. Need matching shadows? Try the Box Shadow Generator, or check text on top of your gradient with the Contrast Checker.
Também pesquisado como: gradient generator, linear-gradient, radial-gradient, conic-gradient, css background, color stops, gradient maker, oklch gradient.
Ferramentas que combinam com: CSS Gradient Generator
- SVG Pattern Generator — Give sections and cards a subtle texture with seamless SVG patterns: dots, grids, diagonal lines, zigzags, waves, plus signs, checkerboards, circles, triangles and more.
- Color Converter — Paste any CSS color — HEX, rgb(), hsl(), hwb(), oklch() or a name like tomato — and get every other format instantly, plus a ready-to-use 50–950 palette.
- SVG to CSS Converter — Paste an SVG and get a compact, URL-encoded data URI plus ready-made background-image and recolorable mask-image CSS.
- Gerador de imagens OG — Crie uma imagem de pré-visualização de link bem feita para o Facebook, LinkedIn, X, Slack e WhatsApp em segundos — escolha um modelo, digite o título, adicione um logotipo e, em seguida, baixe o arquivo PNG e as metatags correspondentes.
Perguntas frequentes
How do I make a gradient transparent?
linear-gradient(180deg, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0)). Fading to the same color at zero alpha avoids the gray band you can get with the transparent keyword in older browsers.Why is my gradient muddy or gray in the middle?
Can I apply a gradient to text?
background-clip: text; -webkit-background-clip: text; color: transparent;. Keep a solid color fallback for readability, and check contrast against the page.Why does the CSS include a solid background color first?
How do I animate a CSS gradient?
background-position on an oversized gradient, or registering custom properties with @property and animating the stop colors or angle.