Menu
I have an element that has inset box shadows, but I want the shadow on only the top.
Is there no way to set only the top shadow? Do I have to resort to creating additional elements to overlay the side shadows?
984
Box-Shadow on One Side In order to create a shadow that would, in theory, have a light source coming from a singular point, the shadow would need to only exist on one side of the box. For instance, the bottom of the box. When creating a box-shadow on one side only, we have to focus on the last value, the spread radius.
Simply apply the following CSS to the element in question: box-shadow: 0 0 Xpx Ypx [hex/rgba]; /* note 0 offset values */ clip-path: inset(Apx Bpx Cpx Dpx);
1) Set your shadow's horizontal alignment to the left (negative values). box-shadow: -30px 0px 10px 10px #888888; Although this way you won't have the same shadow size in the top and bottom. 2) Use a div inside a div and apply shadow to each one.
That syntax is: box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color]; The horizontal offset (required) of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.
This is technically the same answer as @ChrisJ, with a few more details on how to make box-shadow do your bidding:
for reference the * items are optional:
box-shadow: <inset*> <offset-x> <offset-y> <blur-radius*> <spread-radius*> <color*>; The <spread-radius> needs to be negative <blur-radius> (so that none of the other blurred sides show up), and then you need to bump the <offset-y> down by the same amount:
box-shadow: inset 0 20px 20px -20px #000000; It will give you a single gradient band across the top of the element.
192
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
