Home › Forums › CSS › How do i create this shadow effect? › Reply To: How do i create this shadow effect?
November 29, 2013 at 9:25 am
#157390
Participant
http://codepen.io/Merri/pen/jGbiz
Only the part that is of interest:
.your-topbar-element:after {
border-radius: 0 0 100% 100%;
box-shadow: 0 1em .5em rgba(64, 48, 0, .4);
content: '';
bottom: .5em;
left: 1em;
right: 1em;
top: 0;
position: absolute;
z-index: -1;
}
The after
pseudo element is the only thing required, and position: relative;
on the parent element in addition to the properties above.
Just adjust the left and right values in the pseudo element and that lets you align the shadow to the position you want it to appear in.