how can I make shadow like this (image example). I've tried with after
pseudo element, with radius and clip, but the result is not even close.
.page{
width: 100%;
display: flex;
justify-content: center;
min-height:100%;
background: #ebebeb;
padding-top: 100px;
padding-bottom: 100px;
}
.sidebar{
width: 260px;
height: 500px;
background: #ebebeb;
position: relative;
}
.sidebar::after{
content: '';
position: absolute;
top: 0;
bottom: 0;
height: 500px;
right: 0;
width: 40px;
box-shadow: 5px 0 20px 0 rgba(0, 0, 0, 0.4);
display: block;
border-radius: 50% / 20px;
clip: rect(auto, 80px, auto, 40px);
}
<div class="page">
<div class="sidebar">Sidebar</div>
<div class="content"></div>
</div>
How about just putting the box shadow on the right side:
.page{
width: 100%;
display: flex;
justify-content: center;
min-height:100%;
background: #ebebeb;
padding-top: 100px;
padding-bottom: 100px;
}
.sidebar{
width: 260px;
height: 500px;
background: #ebebeb;
box-shadow: 15px 0 15px -15px rgba(0, 0, 0, 0.8);
}
<div class="page">
<div class="sidebar">Sidebar</div>
<div class="content"></div>
</div>
If you need it on a pseudo element:
.page {
width: 100%;
display: flex;
justify-content: center;
min-height: 100%;
background: #ebebeb;
padding-top: 100px;
padding-bottom: 100px;
}
.sidebar {
width: 260px;
height: 500px;
background: #ebebeb;
position: relative;
}
.sidebar:after {
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 100%;
width: 50px;
transform: translateX(-50px);
box-shadow: 15px 0 15px -15px rgba(0, 0, 0, 0.9);
}
<div class="page">
<div class="sidebar">Sidebar</div>
<div class="content"></div>
</div>
With more curve (but would need an inner element)
.page {
width: 100%;
display: flex;
justify-content: center;
min-height: 100%;
background: #ebebeb;
padding-top: 100px;
padding-bottom: 100px;
}
.sidebar {
width: 260px;
height: 500px;
position: relative;
}
.sidebar .inner {
min-height:100%;
background: #ebebeb;
position: relative;
z-index:2;
}
.sidebar:after {
content:'';
position: absolute;
z-index:1;
bottom: 3%;
left:100%;
transform: translateX(-18px);
width: 15px;
height: 94%;
background: #999999;
border-radius: 15px / 100%;
box-shadow: 0 0 10px 10px #999999;
}
<div class="page">
<div class="sidebar"><div class="inner">Sidebar</div></div>
<div class="content"></div>
</div>