So I was able to get it to work, outside of Webflow. I’ll describe the process in case anyone else wants to try this workaround for an exported site. Or in case it inspires someone to figure out a better solution.
First, you must assign a class to the image. I went with “shadowed” to keep it simple. Unless needed, you do not have to add any styles.
When you site is completed and you export the code, go to the CSS folder and find your site’s CSS file (I used the one with the site name: mysite.webflow.css). In there you’ll need to add the CSS code for your “shadowed” class. If you have added other styles to this class, just place the dropshadow code at the end.
.shadowed {
-webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
filter: url(#drop-shadow);
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}
Obviously, you can change the parameters for the shadow as you please.
Then you need to open up the HTML page that your shadowed object exists in, and add the SVG syntax right after your <body>
tag.
<svg height="0" xmlns="http://www.w3.org/2000/svg">
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
<feOffset dx="12" dy="12" result="offsetblur"/>
<feFlood flood-color="rgba(0,0,0,0.5)"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</svg>
Obviously, you will need to update the parameters here to match the ones in the CSS.
And that is it. Every element with the drop shadow class you assigned will have that drop shadow. If you want to make more than one style of drop shadow, you’ll need to make a different class and different svg syntax (with a unique ID) to satisfy the needs of that particular element.
Here is what the drop shadow looks like:
I tried to use the page’s “code” section in the page settings to add the SVG syntax, but it wasn’t working for me. I added the code inside the <head>
tag and another time before the </body>
tag, but it did not work… the shadow covered the image. So instead of a drop shadow, I got a black mask over the image.
If anyone knows or can figure out of a better way to do this, especially if it is inside of Webflow, please share.
And if anyone from the Webflow team is reading this, I hope you can figure out a way to add this feature.