CSS Gradient Generator: Linear, Radial and Conic

Type

Color stops

    About the CSS Gradient Generator

    A CSS gradient is a smooth blend between two or more colors, drawn by the browser with no image file. Gradients are used for backgrounds, buttons, banners, overlays and loading skeletons, and they stay sharp at any size.

    This generator builds linear, radial and conic gradients. Choose the type, set the angle or the center, add as many color stops as you need and move each one along the gradient. The preview updates as you work, and the CSS is ready to copy as a background shorthand or as background-image.

    How to make a CSS gradient

    1. Pick linear, radial or conic.
    2. Set the angle, or the center, shape and size.
    3. Edit the colors and positions of the stops, adding or removing stops as needed.
    4. Press Copy and paste the CSS into your stylesheet.

    Frequently asked questions

    What is a CSS gradient?

    A CSS gradient is an image the browser draws for you, a smooth blend between two or more colors. You use it anywhere CSS accepts an image, most often as a background. There are three kinds: linear-gradient, radial-gradient and conic-gradient.

    What is the difference between linear, radial and conic gradients?

    A linear gradient blends colors along a straight line at an angle. A radial gradient spreads colors outward from a center point in a circle or ellipse. A conic gradient sweeps colors around a center point like the hands of a clock, which makes it good for color wheels and pie charts.

    How do I use the CSS this tool generates?

    Press Copy and paste the line into your stylesheet, for example inside a rule for a div or the body. The background shorthand sets the gradient directly. The background-image version sets only the image, so it leaves a background-color or other background properties alone.

    How do color stops work?

    A color stop is a color at a position along the gradient, from 0% to 100%. The browser blends smoothly between neighboring stops. Put two stops at the same position to get a hard edge instead of a blend.

    How do I make a smooth gradient without banding?

    Use stops that are close in lightness and add a middle stop if the blend looks muddy. Gradients between very different hues can pass through a dull gray, so a third color in between often looks better. Small, subtle gradients on large areas may show faint bands on some screens.

    Does it work in all browsers?

    Yes. linear-gradient and radial-gradient work in every current browser without prefixes. conic-gradient is supported in all modern browsers too.

    Are my colors sent anywhere?

    No. Everything runs in your browser and nothing is uploaded. The gradient is only added to the page address so you can share or bookmark it.