Question 246559 in CSS Question posted in
Some basic documentation can be found here.

Css – How can I achieve that shadow?

enter image description here

How can I achieve that shadow in the middle of the div? I am dividing this by 2 colors using

.box {
    width: 300px;
    height: 400px;
    background: linear-gradient(-10deg, #ffffff 50%, #d6fa02 50%);
  }

I tried using box shadow but it gave me the shadow at the top of the section not in that divide part. I am expecting this shadow exactly like this image.

Tags:

2

Answers


  1. 0

    Add it to the gradient

    .box {
  width: 300px;
  height: 400px;
  background: linear-gradient(-10deg, #ffffff 47%,#bbb 50%, #d6fa02 50.5%);
}
    <div class="box"></div>
    Login or Signup to reply.
  2. 0

    If you’re not married to a gradient and want a true box shadow, you can compose two separate divs

    <div class="container">
  <div class="top-part">
  </div>
</div>

    .container {
  overflow: hidden;
  background-color: #d6fa02;
  height: 100vh;
}

.top-part {
  background-color: yellow;
  height: 100vh;
  box-shadow: black 0px 4px 8px;
  rotate: -10deg;
  position: relative;
  transform: translate(-5vw, -50vh);
  width: 110vw;
}

    Box shadow

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search