5 ms·

A few people have mentioned that it seems the author didn't realize this is already the 4th parameter in `box-shadow`, so I made a quick demo: https://codepen.

A few people have mentioned that it seems the author didn't realize this is already the 4th parameter in `box-shadow`, so I made a quick demo: https://codepen.io/gkoberger/pen/rNOommB https://codepen.io/gkoberger/pen/rNOommB

speedgoose 6y ago
You can also apply multiple box-shadow on the same element separated by commas if you want even more control on the shadow. box-shadow: 0 18px 16px -15px rgba(0,0,0,0.3), 0 10px 10px -20px rgba(0,0,0,0.8);
bradley_taunt 6y ago
Thanks for sharing! I am aware of the spread property and using it as you have in the demo works well. The main reason I use a separate element most times is for when I want the shadow to render at ~60-70% the width of its parent. Not sure there is a way to do that with box-shadow directly, unless I've overlooked something?
- huhtenberg 6y ago
  If you were aware of this option, you should've mentioned it in the intro of your post, before getting into a solution for a specific case not covered by it.
  - bradley_taunt 6y ago
    You're absolutely correct. Once I get a little time I will update the post with those details (and be sure to link you credit for giving me a heads up)
    - huhtenberg 6y ago
      Credit gkoberger, not me.
thomasahle 6y ago
So you use a negative spread-radius to make the shadow more narrow than the box. Cool!
- Zecar 6y ago
  The only problem with this (and it is infuriating) is that while Chrome and Firefox render box positive box-shadow values identically, they differ substantially with negative values. As a result, to get matching shadows you will need to use browser-specific shadows.
spiralganglion 6y ago
I avoid using this 4th param "spread", as the effect varies wildly between browsers. Safari and Chrome, the two most popular browsers on mobile, are also the two most different, with Firefox and IE/Edge (pre-Chromium) landing in between.

speedgoose 6y ago

You can also apply multiple box-shadow on the same element separated by commas if you want even more control on the shadow. box-shadow: 0 18px 16px -15px rgba(0,0,0,0.3), 0 10px 10px -20px rgba(0,0,0,0.8);

bradley_taunt 6y ago

Thanks for sharing! I am aware of the spread property and using it as you have in the demo works well. The main reason I use a separate element most times is for when I want the shadow to render at ~60-70% the width of its parent. Not sure there is a way to do that with box-shadow directly, unless I've overlooked something?

huhtenberg 6y ago
If you were aware of this option, you should've mentioned it in the intro of your post, before getting into a solution for a specific case not covered by it.
- bradley_taunt 6y ago
  You're absolutely correct. Once I get a little time I will update the post with those details (and be sure to link you credit for giving me a heads up)
  - huhtenberg 6y ago
    Credit gkoberger, not me.

thomasahle 6y ago

So you use a negative spread-radius to make the shadow more narrow than the box. Cool!

Zecar 6y ago
The only problem with this (and it is infuriating) is that while Chrome and Firefox render box positive box-shadow values identically, they differ substantially with negative values. As a result, to get matching shadows you will need to use browser-specific shadows.

spiralganglion 6y ago

I avoid using this 4th param "spread", as the effect varies wildly between browsers. Safari and Chrome, the two most popular browsers on mobile, are also the two most different, with Firefox and IE/Edge (pre-Chromium) landing in between.