CSS Gradient Generator

This CSS gradient generator is a web-based tool that allows users to create custom gradient backgrounds for their websites or web applications. With this generator it will simplify the process of generating CSS code for gradients, eliminating the need for manual coding. Users can customize the gradient by selecting colors, defining gradient direction, adjusting color stops, and fine-tuning various properties. Once the desired gradient is created, the generator provides the corresponding CSS code, which can be easily copied and pasted into the user's stylesheet. This tool is particularly helpful for designers and developers looking to enhance the visual appeal of their websites with stylish and dynamic background gradients without the need for in-depth CSS knowledge.

If you're finding it hard to know where to start, then just select one of our preset colors to see the resulting gradient.

Don't forget to check out our CSS Text Gradient Generator.

Gradient Examples (click to experiment with)

About CSS Gradients

The days when it was possible to make a gradient on a website only using pictures are long gone. It is now easy enough to create gradients inside CSS styles.

To set the gradient, we use the CSS property background-image or an abbreviated version of background-image. We can create both linear and radial gradients by using either linear-gradient or radial-gradient functions and specifying the start and end colors. Here's an example syntax:

background: linear-gradient(#23EC05, #D712C5);

It is also possible to change the direction by specifying it first, before the first color. Options are: to top left, to top, to top right, to right, to bottom right, to bottom, to bottom left and to left.

background: linear-gradient(to right, #0cbaba, #380036);

If you replace this parameter with to top right you will get a diagonal gradient. The same effect can be created by specifying a parameter in degrees, for example, 45deg.

You can also use more than 2 colors, colors values can be specified in HEX, RGB, RGBA, HSL, HSLA and color name.

background: linear-gradient(to right, #0cbaba, #380036, darksalmon);

Each of the colors specified will take up an equal amount of available space, giving us a smooth and balanced gradient.

If we want one color to take up more space than another, we can add a percentage value immediately after the color. Practice with the css gradient generator above to see how this alters the gradients.

background: linear-gradient(to right, #0cbaba 50%, #380036, darksalmon);

Radial Gradients

Let's use everything we've learned so far to create a radial gradient. In fact, it is quite simple, it is enough to specify the value at the beginning radial-gradient.

background: radial-gradient(#23EC05, #D712C5);

This radial gradient takes the shape of the parent block, so instead of a circle, we get an ellipse. For the gradient to be in the shape of a circle, regardless of the proportions of the parent, the keyword circle must be specified.

background: radial-gradient(circle, #23EC05, #D712C5);

In addition, we can specify where the center of the radial gradient will be. Let's make it in .the upper left corner:

background: radial-gradient(circle at top left, #23EC05, #D712C5);