.row {
height: 300px;
width: 300px;
margin: 0 auto;
box-shadow: 0 -20px 0px 0px white, 0 20px 0px 0px white, 12px 0 30px -4px rgba(0, 0, 0, 0.3), -12px 0 30px -4px rgba(0, 0, 0, 0.3);
}<div class="row"></div>
<div class="row"></div>
<div class="row"></div>.row {
height: 300px;
width: 300px;
margin: 0 auto;
box-shadow: -8px 0 8px -8px black, 10px -1px 8px -8px black;
}<div class="row"></div>
<div class="row"></div>
<div class="row"></div>Upon thorough examination of this issue: How to achieve left and right side box shadow only
The proposed solutions are commendable. However, I encounter inconsistency due to varying rows in the website layout. Is there a way to rectify this?
I will attach some visual aids for better understanding.
Your assistance is greatly appreciated!
Here is the first approach: https://i.sstatic.net/jzyVk.png
And the second method: https://i.sstatic.net/DLx5p.png