Free Online CSS Gradient Generator

The CSS gradient has become the lightest and most flexible way to dress up a background, a button or a card. No more exporting a PNG from an image editor: the browser calculates the transition between your colors, in vector format, in a few dozen bytes. The CSS gradient generator from Volade produces the exact code — angle, stops, origin position — while you compose it on screen.

linear-gradient: the directional gradient

The function linear-gradient() takes an angle followed by the stops: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%). The angle 0deg points up, 90deg to the right, 180deg down. Without an angle, the browser goes from top to bottom. This is the most widely used syntax for headers, call-to-action buttons and section banners.

radial-gradient: the glow and the ellipse

The function radial-gradient() starts from a point (the center by default) and spreads as a circle or ellipse. The origin position is written as at X% Y%: radial-gradient(circle at 50% 50%, …). Perfect for a glow effect behind a heading, a hero background centered on the middle, or a synthetic soft shadow. The tool provides two X and Y sliders to place the origin to the pixel.

conic-gradient: rotation around a point

The function conic-gradient() rotates around a point, like the hands of a clock. It is written conic-gradient(from 90deg at 50% 50%, …) and lets you create rings, circular gauges, colored borders or prism effects. Each stop takes up an angular sector: by placing several colors, you draw a CSS pie chart without a single image.

Color stops

Each stop pairs a color with a percentage position: #7a2fe2 0%, #a358ee 55%, #f3e8ff 100%. Identical positions on two colors create a hard transition (hard edge); positions set further apart produce a gradual fade. More than two stops allow multi-color palettes, bands or material simulations (metal, pearl, northern lights).

Layering a gradient and adding a fallback

In the shorthand background, order matters: foreground first. A dark overlay on a photo is written background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,0)), url(photo.webp);. Always place a solid color as a fallback (background-color) for very old browsers or while the image loads.

Performance best practices

A CSS gradient is recalculated on every resize: keep the number of stops reasonable (2 to 5 are enough in 90% of cases) and avoid multiple overlays on very large surfaces on mobile. Prefer stable hex or HSL values, and freeze the angle as soon as the design is approved to avoid micro-differences between browsers.

Gradients in the Volade brand style

To build a cohesive palette before rolling out your gradients, combine the palette generator and the color picker : identify your brand shades, then paste them here as stops. The result copies straight into your CSS, your design system or your theme — on desktop and on mobile, with no account and no data sent.