I want to make a shadow at the div block, but that it was only on one side - on top.

Original style:

 div { box-shadow: 0 15px 30px 10px rgba(0, 0, 0, .5); width: 200px; height: 150px; overflow: hidden; margin: 30px; } 
 <div></div>

The problem is that the shadow is also present on the left and on the right (quite a drop and below, which is also unacceptable). Various manipulations with 2-4 values ​​did not lead to anything (and I want to keep the current positioning). Shadow anyway is still present on the sides.

How to achieve the desired result?

    4 answers 4

     section { width: 200px; height: 150px; padding-top: 30px; margin: 0 30px 30px; overflow: hidden; } div { box-shadow: 0 15px 30px 10px rgba(0, 0, 0, .5); width: 100%; height: 100%; background: antiquewhite; } 
     <section><div></div></section>

      In my case, it turned out to beat the situation with the help of the inner shadow:

       div { box-shadow: inset 0 -7px 20px -10px rgba(0, 0, 0, .5);/* получившаяся тень */ width: 200px; height: 150px; overflow: hidden; margin: 30px; } 
       <div></div>

      In fact, the earlier external positioning on the top of the block went to the inner lower positioning of the neighboring block. As a result, everything looks clean enough.

      Also, while writing this answer, an alternative idea for internal implementation in the next block came to mind - this is using the linear-gradient .

        I wanted to make a shadow only from above and only inside. The box-shadow property didn’t work, but with the background:

         div { background: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0) 20%); width: 200px; height: 150px; overflow: hidden; margin: 30px; outline: 1px dotted red; } 
         <div></div>

        • Is this your answer or question? - YurySPb ♦
        • 2
          @Yuriy SPb, the answer is. Added a snippet. - Qwertiy ♦

        To top, box-shadow: 0 -6px 4px -4px rgba(0, 0, 0, .2);

         div { box-shadow: 0 -6px 4px -4px rgba(0, 0, 0, .2); width: 200px; height: 150px; overflow: hidden; margin: 30px; outline: 1px dotted red; } 
         <div></div>

        • Did you copy the previous answer? :) No wonder the author has deleted it. - Colibri
        • need -6px and not 6px. I wanted to comment, but deleted and got an answer. - koshe
        • I can copy the code and paste it into the editor. Please look at my sample and then yours. There is only one similarity without alpha channel - this is the color. As I already wrote - with the positioning I already played. - Colibri
        • Throw off all the css rule for your div - Aliaksandr Pitkevich
        • @AliaksandrPitkevich Here it is: box-shadow: 0 -6px 4px -4px rgba(0, 0, 0, .2) . Well, the truth is that there is: background-color: #fff; padding: 1.5rem; background-color: #fff; padding: 1.5rem; . Nothing criminal. - Colibri