I often ask a question: Can I create shadows with gradient colors instead of solid colors? There are no special properties in CSS to achieve this (believe me, I've looked for it), and any blog posts you find about this are basically some similar gradient CSS tricks. We'll cover some of these tips next.

But first...is another article about gradient shadows? Really?

Yes, this is another post on this topic, but it's different. Together, we will push the limits and find a solution that covers something I have never seen anywhere else: Transparency. Most tips work when elements have non-transparent backgrounds, but what if we have transparent backgrounds? We will discuss this situation here!

Before we get started, let me introduce my gradient shadow generator. You just need to adjust the configuration and you can get the code. But keep reading because I will help you understand all the logic behind generating the code.

Catalog

• Non-transparent solution
• Transparent Solution
• Add rounded corners
• Summary

Non-transparent solution

Let's start with solutions that work for 80% of common situations. The most typical case is that you are using an element with a background and you need to add a gradient shadow to it. There is no need to consider transparency here.

The solution is to rely on a pseudo-element that defines the gradient. You put it behind the actual element and apply a blur filter to it.

<code>.box {
  position: relative;
}
.box::before {
  content: "";
  position: absolute;
  inset: -5px; /* 控制擴(kuò)散 */
  transform: translate(10px, 8px); /* 控制偏移量 */
  z-index: -1; /* 將元素置于后面 */
  background: /* 你的漸變色在這里 */;
  filter: blur(10px); /* 控制模糊 */
}</code>

The code looks a lot, because it does have a lot. Here's how to use box-shadow instead of a gradient if we use solid colors instead of gradients.

<code>box-shadow: 10px 8px 10px 5px orange;</code>

This should give you a good idea of ??what the value in the first piece of code does. We have X and Y offsets, fuzzy radius, and diffusion distance. Note that we need a negative diffusion distance value from the inset property.

This is a demo showing gradient shadows side by side with classic box-shadow:

If you look closely, you will notice that the two shadows are slightly different, especially the blurred parts. This is not surprising, because I'm pretty sure the algorithm for filter attributes is different from that of box-shadow. It's no big deal, because the end result is very similar.

This solution is good, but still has some disadvantages related to the z-index:-1 declaration. Yes, there is a "stack context" happening there!

I applied a transformation to the main element, and then the shadow is no longer below the element. This is not a mistake, but a logical result of stacking contexts. Don't worry, I won't start giving boring explanations of stacking contexts (I've done this in Stack Overflow threads), but I'll still show you how to fix it.

The first solution I recommend is to use 3D conversion:

<code>.box {
  position: relative;
}
.box::before {
  content: "";
  position: absolute;
  inset: -5px; /* 控制擴(kuò)散 */
  transform: translate(10px, 8px); /* 控制偏移量 */
  z-index: -1; /* 將元素置于后面 */
  background: /* 你的漸變色在這里 */;
  filter: blur(10px); /* 控制模糊 */
}</code>

We do not use z-index: -1, but use a negative translation along the Z axis. We put everything in translate3d(). Don't forget to use transform-style: preserve-3d on the main element; otherwise, the 3D conversion will not take effect.

As far as I know, this solution has no side effects...but maybe you will see one. If so, please share in the comment section and let's try to find a solution!

If for some reason you can't use 3D conversion, another solution is to rely on two pseudo-elements—::before and::after. One creates a gradient shadow, the other copys the main background (and other styles you might need). This way, we can easily control the stacking order of two pseudo-elements.

<code>box-shadow: 10px 8px 10px 5px orange;</code>

It is important to note that we are forcing the to create a stacking context by declaring z-index: 0 on it or any other attribute that does the same. Also, don't forget that the pseudo-element treats the fill box of the main element as a reference. Therefore, if the main element has borders, this needs to be considered when defining the pseudo-element style. You will notice that I use inset: -2px on ::after to consider borders defined on main elements.

. Indeed, there is no way to do this, but we can simulate it with a specific polygon pattern:

<code>.box {
  position: relative;
  transform-style: preserve-3d;
}
.box::before {
  content: "";
  position: absolute;
  inset: -5px;
  transform: translate3d(10px, 8px, -1px); /* (X, Y, Z) */
  background: /* .. */;
  filter: blur(10px);
}</code>

The blue area is the part that is visible after applying the clip-path. I only use blue to illustrate the concept, but in reality, we only see shadows within the area. As you can see, we define four points, and their values ??are very large (B). My big value is 100vmax, but it can be whatever big value you want. The idea is to make sure we have enough shadow space. We have four more points that are the corner points of the pseudo-element.

Arrows indicate the path that defines the polygon. We start from (-B, -B) and until we reach (0,0). In total, we need 10 points. Not 8 points, because the two points ((-B,-B) and (0,0)) are repeated twice in the path.

We also need to do the last thing , which is to consider the diffusion distance and the offset. The above demonstration works simply because this is a special case, both the offset and diffusion distance are equal to 0.

inside (the area inside the green border in the example). We need to adjust the position of the four points in the clip-path.

<code>.box {
  position: relative;
}
.box::before {
  content: "";
  position: absolute;
  inset: -5px; /* 控制擴(kuò)散 */
  transform: translate(10px, 8px); /* 控制偏移量 */
  z-index: -1; /* 將元素置于后面 */
  background: /* 你的漸變色在這里 */;
  filter: blur(10px); /* 控制模糊 */
}</code>

<code>box-shadow: 10px 8px 10px 5px orange;</code>

Do we still need 3D conversion skills?

This part is very tedious and I have a hard time finding a general solution that does not rely on magic numbers. I ended up with a very complex solution that only uses one pseudo-element, but the code is a mess and covers only some specific situations. I don't think it's worth exploring this path.

To simplify the code, I decided to insert an extra element. The following are the marks:

<code>.box {
  position: relative;
}
.box::before {
  content: "";
  position: absolute;
  inset: -5px; /* 控制擴(kuò)散 */
  transform: translate(10px, 8px); /* 控制偏移量 */
  z-index: -1; /* 將元素置于后面 */
  background: /* 你的漸變色在這里 */;
  filter: blur(10px); /* 控制模糊 */
}</code>

I use custom element to avoid any potential conflicts with external CSS. I can use

<code>box-shadow: 10px 8px 10px 5px orange;</code>

<code>.box {
  position: relative;
  transform-style: preserve-3d;
}
.box::before {
  content: "";
  position: absolute;
  inset: -5px;
  transform: translate3d(10px, 8px, -1px); /* (X, Y, Z) */
  background: /* .. */;
  filter: blur(10px);
}</code>

<code>.box {
  position: relative;
  z-index: 0; /* 我們強(qiáng)制創(chuàng)建一個堆疊上下文 */
}
/* 創(chuàng)建陰影 */
.box::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -5px;
  transform: translate(10px, 8px);
  background: /* .. */;
  filter: blur(10px);
}
/* 復(fù)制主元素樣式 */
.box::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  /* 繼承在主元素上定義的所有裝飾 */
  background: inherit;
  border: inherit;
  box-shadow: inherit;
}</code>

<code>clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax 100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,0 0)</code>

<code>.box {
  position: relative;
}
.box::before {
  content: "";
  position: absolute;
  inset: -5px; /* 控制擴(kuò)散 */
  transform: translate(10px, 8px); /* 控制偏移量 */
  z-index: -1; /* 將元素置于后面 */
  background: /* 你的漸變色在這里 */;
  filter: blur(10px); /* 控制模糊 */
}</code>

<code>box-shadow: 10px 8px 10px 5px orange;</code>

<code>.box {
  position: relative;
  transform-style: preserve-3d;
}
.box::before {
  content: "";
  position: absolute;
  inset: -5px;
  transform: translate3d(10px, 8px, -1px); /* (X, Y, Z) */
  background: /* .. */;
  filter: blur(10px);
}</code>

The above is the detailed content of Different Ways to Get CSS Gradient Shadows. For more information, please follow other related articles on the PHP Chinese website!