Create beautiful CSS gradients visually — copy the code with one click
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
The CSS Gradient Generator is a free, browser-based tool for building linear-gradient(), radial-gradient(), and conic-gradient() values without memorizing syntax. You add color stops, pick their positions, set the angle or shape, and the tool outputs ready-to-paste CSS you can drop into a background or background-image property.
It is aimed at front-end developers, UI designers, and anyone styling a webpage who wants a live preview instead of guessing hex codes and degrees. You work with real CSS units and keywords — degrees (deg), percentages for stop positions, keyword directions like to right or to bottom left, and shape keywords such as circle and ellipse.
A CSS gradient is not an image file — it is a value the browser paints at render time, so it stays crisp at any size and adds no HTTP request. The three functions differ in how color is distributed. A linear-gradient() runs color along a straight axis defined by an angle (0deg points up, 90deg points right) or a direction keyword. A radial-gradient() spreads color outward from a center point in a circle or ellipse. A conic-gradient() sweeps color around a center point like a clock face, which is why it is used for pie charts and color wheels.
Each function takes a comma-separated list of color stops, for example linear-gradient(90deg, #ff0000 0%, #0000ff 100%). A stop is a color plus an optional position; between two stops the browser interpolates the colors smoothly. Placing two stops at the same percentage produces a hard edge with no blend, and adding intermediate stops lets you build multi-color bands. You can stack multiple gradients in one background property, and using rgba() or hsla() colors lets a gradient fade to transparent for overlay effects.
Yes, it is completely free with no sign-up. The gradient is generated entirely in your browser using JavaScript, so your colors and settings are never uploaded to a server.
Linear gradients transition color along a straight line at a set angle, radial gradients spread color outward from a center point in a circle or ellipse, and conic gradients rotate color around a center point in a sweep, which is ideal for pie charts and color wheels.
Yes. Add as many color stops as you need. Each stop can have its own color and position percentage, letting you build multi-color gradients or hard-edged color bands.
Use an rgba() or hsla() color for one of the stops and set its alpha value to 0. For example, rgba(0,0,0,0) at one end gives a fade-to-transparent effect useful for image overlays.
linear-gradient() and radial-gradient() are supported in all modern browsers without prefixes. conic-gradient() is supported in current Chrome, Firefox, Safari, and Edge, but very old browsers may need a fallback background color.
Paste the value into a CSS background or background-image property, for example background: linear-gradient(90deg, #ff0000, #0000ff); on the element you want to style.
Gradients are rendered by the browser, so they scale to any size without losing quality, add no extra file to download, and can be edited directly in your stylesheet.