CSS Gradient Generator

This generator will produce CSS Gradient code using a simple graphical user interface. The CSS code that is generated will work in all browsers that support CSS3. The generator will produce code for linear gradients and also radial gradients, plus has the ability to import existing CSS gradient code to edit.
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 Options
  • Orientation
  • Size
  • Position
  • Position
  • Start Color
    0%
  • End Color
    100%
Preview
CSS Markup

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

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL