1

In an attempt to create shadows around custom shapes, I discovered the drop-shadow filter CSS property. However after having implemented it, I realised that it slowed the website down significantly.

I am therefore searching for an alternative to gain the same effect without compromising the load speed of the page.

The main content of the site is surrounded by a shadow-box wrapper using a box shadow, but this could not be used for the end section due to the transparent part of the background.

I am trying to achieve a shadow which resembles the shadow of the shadow-box.

Here is a jsFiddle illustrating how it currently looks

and here it can bee seen on the real site

HTML

<div class="container shadow-box no-padding"></div>
  <div class="container justify-content-center">
  <section class="light-bg end-section" id="portfolio"></section>
</div>

CSS

.container{
  width:70%;
  margin:auto;
}    
.shadow-box{
  background:green;
  height:200px;
  -webkit-box-shadow: 0px 0px 21px 8px rgba(0, 0, 0, 0.6) !important;
  -moz-box-shadow: 0px 0px 21px 8px rgba(0, 0, 0, 0.6) !important;
  -ms-box-shadow: 0px 0px 21px 8px rgba(0, 0, 0, 0.6) !important;
  -o-box-shadow: 0px 0px 21px 8px rgba(0, 0, 0, 0.6) !important;
  box-shadow: 0px 0px 21px 8px rgba(0, 0, 0, 0.6) !important;
}    
.end-section {
  background: radial-gradient(circle at 50% 100%, transparent 50px, #c1c1c1 50px);
  z-index: 5;
  height:200px;
  filter: drop-shadow(0 30px 15px rgba(0, 0, 0, 0.6))
  drop-shadow(0 10px 5px rgba(0, 0, 0, 0.6));
}    
.light-bg:before {
  content: '';
  position: absolute;
  z-index: 3;
  top: -50px;
  left: 50%;
  margin-left: -50px;
  height: 50px;
  width: 100px;    
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  background: #c1c1c1;
}
Dharmesh Vekariya
  • 1,138
  • 2
  • 13
  • 31
Jonas Mohr Pedersen
  • 427
  • 7
  • 19
  • `filters` are CPU/GPU intensive...not a lot you can do about that. – Paulie_D Aug 07 '18 at 11:10
  • I realise this, that is why i'm looking for an alternative :) – Jonas Mohr Pedersen Aug 07 '18 at 11:12
  • Best I could offer is a gradient (multiple backgrounds) of some kind but that's just as likely to be a speed-hog. – Paulie_D Aug 07 '18 at 11:13
  • If it could by any chance at least make it a bit faster, the suggestion is more than welcome. I have also experimented with making the end part of `.end-section` a pseudo element, and only putting a filter on that. It makes the performance better, but i still experience lag. – Jonas Mohr Pedersen Aug 07 '18 at 11:19

0 Answers0