Inner box shadow that is curved

Question

I am trying to make a sidebar that is similar to the one shown here: https://www.sketchapp.com/docs/ .I made everything working fine except making the box shadow opacity at top and bottom, I tried box shadow but couldn't make it the way its shown in the page. what I did so far

Thanks in advance! ^^

image to see

Answer 1

Welcome to SO. You can use pseudo selectors and add to them a background with a linear gradient. for example:

div::before {
  background: linear-gradient(180deg, #fcfcfc, rgba(252,252,252,0));
  content: '';
  display: block;
  width: 100%;
  height: 4rem;
  position: absolute;
  z-index: 0;
}

here i am doing the following: I set the background to a linear gradient fades the color, I put display block in order to make it behave like a div, finally I set the z-index to 0 in order to place it at the top of the other elements. here is a working demo: https://jsfiddle.net/hdsma1fv/5/

references:

• about pseudo elements: https://www.w3schools.com/CSS/css_pseudo_elements.asp
• about linear gradients: https://www.w3schools.com/css/css3_gradients.asp

Edit:

If you need the shadow to hide with the scroll then you need to attach the pseudo selector ::before to an element inside the scroll and remove the position: absolute;. Also if you want it to show in the bottom also, you need two things: first - rotate the linear gradient angle and second - use the pseudoselector ::after instead of the ::before one. check https://jsfiddle.net/hdsma1fv/34/ for an updated example with both modifications.