CSS Gradient Generator

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);