-1

I am trying to soften those sharp edges of the orange div when sub divs got overflown as I scroll down. Can I do that with CSS? Sorry if my explanation is confusing.

screenshot

eren
  • 31
  • 6
  • Include some of your code and take a look at this https://stackoverflow.com/help/minimal-reproducible-example Screenshots are not really helpful. – Scurgery Dec 21 '20 at 22:43
  • Sorry, I didn't add because my code had lots of different things. Anyways I did what you said and it solved my problem. – eren Dec 21 '20 at 23:46

1 Answers1

0

I've mad you an example, you can add box-shadow to the header and the footer and in that way you can create a blur effect between your elements.

body{
background-color: #888888;
}

header{
width: 100%;
height: 50px;
box-shadow: 0 10px 8px 10px #888888;
background-color: #888888;

/* this is important so the box-shadow is displayd on top of the next element */
position: relative;
z-index: 1
}

div{
width: 100%;
height: 100px;
background-color: red;
}
<body>
  <header></header>
  <div> </div>
</body>
Scurgery
  • 241
  • 1
  • 7