CSS Shadow Gradients

The CSS Shadows Gradient Generator was a tool that I was missing.

One day I thought it'd be nice to add some beautiful gradients in a shadow for a web design I was working in.

I then searched for a CSS generator to find the fastest way to do it, and I got shocked to find out there was no tool to generate these CSS gradients for my shadow.

I then found a simple way to get gradient shadows by using the linear-gradient function for the CSS background property.

Now, it was time to make the world a better place and make it easy for others too.

A shadow gradient is a shadow that contains a transition between two or more colors.

The use of gradients is a very popular trend in web design nowadays. They are usually used as a way to grab the attention of the visitor or to create a modern kind of look. They are used in logos, apps, web design, and practically anywhere nowadays.

Traditionally gradients have been used mainly on backgrounds due to technical restrictions. But nowadays there are workarounds to bring gradients into shadows too.

Ironically, a shadow gradient is not using any CSS shadow property.

You've probably heard of `box-shadow` and `text-shadow` properties. Both are used to create shadows in elements or texts.

However, these properties won't provide developers the flexibility they need in order to create shadows with gradients on them.

The shadow is created using the CSS pseudo-elements `:before` and `:after` and applying a gradient background on each of them.

Then, you apply a blur effect on those elements and you position them behind the main element by using an absolute positioned element and the `z-index` property.

So, put in other words. The gradient shadow is a blurred gradient background that is behind the main element.

To create a gradient of colors in CSS you have to use the linear-gradient function within the `background` property. It looks like this:

                    
background: linear-gradient(20deg, black, yellow);
                    
                

So, in this case, we would have a gradient from black to yellow at a 20deg angle.

You can change the angle for a direction instead. Such as `to top left` or `to bottom right`. And you can also add as many colors as you want.

Something else you can do is change the distribution of the colors. Let's say that you want 80% of the gradient to be black, and only 20% yellow. Then you can add this parameter too.

Here's another example with 3 colors, a direction instead of a degree and different color distributions:

                    
background: linear-gradient(to top left, black 20%, yellow 60%, green 20%);
                    
                

Here's the codepen: