Expanding CSS Shadow Effects – Frontend Masters Blog 관련

CSS > Article(s)

---

Article(s)

• The Power of Shadows
• Types of Shadows
• Focus on Inset Box Shadows
• Changing the Shadow’s Shape
• Animating Only Parts of a Shadow
• Other Examples

---

Expanding CSS Shadow Effects – Frontend Masters Blog

Shadows don't have to be used for... shadows. Inset shadows can layer over backgrounds and because they are animatable, it's just another tool for drawing what we want to the page.

Design principles tell us a shadow is conveys that light is hiding an object, which casts the shadow behind it, giving us a sense of depth. However, if that’s all a shadow is ever used for, then it has not been utilized to its full potential.

---

The Power of Shadows

Shadows in CSS can be multi-directional, layered, and are animate-able. On top of being all that, they don’t affect the layout and computed size of an element even though they can make it appear bigger or smaller, which makes them an efficient tool for making visual changes.

---

Types of Shadows

There are different types of shadows based on the type of component they affect.

• box-shadow
• filter: drop-shadow()
• text-shadow

The difference between box-shadow and drop-shadow() is worth knowing!

See the Pen Box Shadow Effects by rpsthecoder on CodePen.

All of this is proof that you’ll benefit from understanding CSS shadows and learning ways to expand their uses beyond simply creating a proverbial shadow.

---

Focus on Inset Box Shadows

In this article, for the purpose of simplicity, my examples will focus on box shadows, specifically, inset box shadows. However, the principles we’ll be working with are same for all types of CSS shadows.

Below is an example of what could be possible with the things I’ll be covering in this article. I’ll show you more examples and design variants as we proceed further.

See the Pen by let’s on CodePen.

```html

 

Golduck

```

.pokemon {
  box-shadow: 0 0 10px #eee,
    inset 3px 3px 10px white,
    inset -160px -160px 0 royalblue,
    inset 160px -160px 0 green,
    inset -160px 160px 0 blue,
    inset 160px 160px 0 yellow;
    /* etc. */
  &:hover {
    box-shadow: none;
    transition: box-shadow linear 0.6s;
    .text {
      opacity: 0;
    }
  }
}

See the Pen Box Shadow Effects by rpsthecoder on CodePen.

The above shows off the inset keyword that box-shadow can use in a couple of different ways. Inward shadows make for terrific overlays, since it’s painted on top of an element’s background and originates from the edges of the element’s padding box. The other thing we got to confirm is that the box-shadow is indeed animate-able.

---

Changing the Shadow’s Shape

CSS shadows, by default, follow the shape of the component they are applied to — a box, text, or the opaque area of an element, depending on which shadow is used. By playing around with the shadows’ vertical and horizontal offsets, you can reshape them to a degree. Here’s an example:

.selected {
  /* etc. */
  box-shadow: 
    inset -30px 30px 0 white, 
    inset 30px -30px 0 white,
    inset 0 0 80px lime;
  transform: rotatez(360deg);
  transition: transform 1s linear;
}

The element we’ll apply this to is already a circle, and this will make the shadow somewhat football (🏈) shaped.

See the Pen Box Shadow Effects by rpsthecoder on CodePen.

In similar ways you can play around with a shadow’s blur radius, spread distance (in box-shadow), and color.

Tips

Add a thin border matching the page’s background to the element if there’s any inset shadow bleeding outside the box

---

Animating Only Parts of a Shadow

We can take this a step further. So far we’ve been animating the box-shadow property as a whole, but how about pin-pointing the animation to individual values of a shadow? That will not only produce a different result, but you can also assign different animation times for different aspects of a shadow:

@property --l {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --c {
  syntax: "<color>";
  inherits: false;
  initial-value: red;
}
.selected {
  /* etc. */
  --l: 160px;
  --c: black;
  box-shadow: inset 0 0 0 var(--l) var(--c);
  transition: --l 1s linear, --c 0.5s linear;
}

See the Pen Box Shadow Effects by rpsthecoder on CodePen.

You can also use @keyframes, instead of transition, for the animations to keep frame stops. For instance, in the following example, there’s multiple color changes throughout the animation sequence as defined by the @keyframes ruleset, colorChange:

@property --c {
  syntax: "<color>";
  inherits: false;
  initial-value: dodgerblue;
}
@keyframes colorChange {
  40% { --c: yellow }
  80% { --c: red }
}
.selected {
  /* etc. */
  box-shadow: inset 0 0 0 var(--l) var(--c);
  animation: 1s linear colorChange;
}

See the Pen Box Shadow Effects by rpsthecoder on CodePen.

For our main demo, let’s keep transition, and then combine the things we’ve seen so far as well as include a few more colors.

@property --l {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
.selected {
  /* etc. */
  --l: 100px;
  box-shadow: 
    inset var(--l) calc(-1 * var(--l)) 60px azure,
    inset calc(-1 * var(--l)) var(--l) 60px white,
    inset calc(-1 * var(--l)) calc(-1 * var(--l)) 60px white,
    inset var(--l) var(--l) 60px white,
    inset calc(-1 * var(--l)) calc(-1 * var(--l)) 5px fuchsia,
    inset var(--l) var(--l) 5px lime, inset var(--l) calc(-1 * var(--l)) 5px red,
    inset calc(-1 * var(--l)) var(--l) 5px green;
  transition: --l 1s linear;
}

See the Pen Box Shadow Effects by rpsthecoder on CodePen.

.selected {
  /* etc. */
  box-shadow: 
    inset 0 0 10px 30px white, 
    inset -40px 0px 0 white,
    inset 40px 0px 0 white, 
    inset 0 0 100px red, 
    inset 0 -60px 0 white, 
    inset 60px 30px 0 white, 
    inset 0 0 100px blue;
  transform: rotatez(360deg);
  transition: box-shadow 1s linear, transform 1s linear;
}

See the Pen Box Shadow Effects by rpsthecoder on CodePen.

This is where you can really see how layering can be helpful.

---

Other Examples

Here’s a collection of a few on-hover animation designs using CSS shadows to help you get started:

See the Pen Crafting shadow effects by rpsthecoder on CodePen.

If you want to keep exploring shadow animations further, I recommend combining them with other possible visual effects from CSS properties like filter and blend modes. Also, make sure to see how the animations work out both when individual values are animated and when the shadow as a whole property is animated.

Further Reference

Learn CSS - Box shadow playground

...

• “A Few Interesting Ways To Use CSS Shadows For More Than Depth” by me on Smashing Magazine

@property - CSS: Cascading Style Sheets | MDN

The @property CSS at-rule is part of the CSS Houdini set of APIs. It allows developers to explicitly define CSS custom properties, allowing for property type checking and constraining, setting default values, and defining whether a custom property can inherit values or not.

Expanding CSS Shadow Effects – Frontend Masters Blog

---

Shadows don't have to be used for... shadows. Inset shadows can layer over backgrounds and because they are animatable, it's just another tool for drawing what we want to the page.