CSS Gradient Tool

CSS Gradient Tool

The CSS Gradient Tool is a free online generator for creating linear and radial gradients. Choose your colors, adjust their positions, and customize the gradient settings while viewing the results instantly.

Create gradients with two or more colors, adjust transparency with HEXA color values, and copy the generated CSS for use in webpages and other design projects. Linear gradients include an adjustable angle, while radial gradients include shape and position controls.

CSS Gradients

CSS gradients create smooth transitions between two or more colors without requiring a background image. A gradient can include multiple color stops, with each stop controlling a color and its position within the transition.

Linear Gradients

A linear gradient transitions colors along a straight line. The angle controls the direction of the gradient, while the position of each color stop determines where its color appears within the transition.

Radial Gradients

A radial gradient transitions colors outward from a starting point. The gradient can use a circle or ellipse shape, and its starting position can be placed in the center, along an edge, or in a corner.

Color Stops

Color stops define the individual colors used in a gradient and where each color is positioned. Adding additional color stops makes it possible to create gradients that transition through several colors rather than only two.

Gradient Transparency

Gradients can include transparent or partially transparent colors. Enter an 8-digit HEXA color value to control the alpha channel of an individual color stop, such as #0088cc80 for a partially transparent blue.

Using CSS Gradients

The generated gradient can be used as a CSS background on elements such as sections, buttons, banners, cards, and other webpage components. Copy the generated CSS and add it to the appropriate CSS rule in your stylesheet.