Streaming live at 10am (PST)

Transparent background PNG drop shadow


#1

I am getting ready to start on a project, and have a question if something I want to do is actually possible to do in Webflow. If anyone has done this or knows how to do this in Webflow, I would definitely appreciate some tips and guidance as to how to do this.

I have a PNG image that is not square, it is free form. With a transparent background. I want to apply a drop-shadow effect to the image. But if I just add the effect to the image div, then I get a square shadow (the shape of the image div). Is there any way to make it so the shadow follows the free form of the image? A dynamic shadow around the alpha masked PNG.

I don’t even know if this is possible in Webflow, but I’m hoping it is.

I haven’t started on the website yet, so I do not have a link to share. But if there’s any other info I can provide that would be helpful, please let me know.

Thanks in advance.


#2

Honestly I have tried this as I can do it in shop. I to wanted to put the drop on a logo PNG simple right so went and made the PNG and went to set it in the brand location as a BG then did what you said put the drop on the Brand Div in the NAV BAR. This is when of course you realize eh the file image is Alpha inside but has the edge of the file size set in the crop of the PNG if this makes any sense. So when you make the file file dimensions be it square or other Ratio this is what the drop is going off. I tried to do this diff by actually putting the logo image in the Brand Link Box in the nav bar thinking maybe I could work it out with the image nested and not just a BG image in Brand Link box. This is when I saw it and that as long as the file dimensions hold the outside original file width and height that is what the drop will be around.

Now that you have me thinking about this problem I am wondering something. Isn’t what we want happening with font inherently could you use the font Drop effect on the image file and maybe trick it into following the image inside? I am new to Webflow and am working on a page with a bit of drop one thing that is cool is a little neet thing about being able to do alpha drop tints and color overlay. I don’t use the color picker for anything in webflow for this page just made with 7 global colors CYMKWRB With this global color palette I can make any tint pastel any color the wheel can make with a huge grayscale with white on black or black on white bottom is solid and the other gets alpha then the tint IE color or sometimes several color overlays So you set your grey tones for the site and then tint using a solid color overlay with alpha set to like 1 or 2 and you will get a very soft and rich two tone color that makes the overall color for your block. just like in block printing.


#3

Hey @Nathan_Kickbush, thanks for dropping in and sharing your info. It seems that having a dynamic drop shadow is somewhat of a challenge outside of Webflow as well. I did some research and found some information about how to do it, but I am not sure how to apply the solution in Webflow. So I am going to share it, and hopefully, with the community’s help we can figure it out, then we can all use it to make our sites better. :grinning:

Here are the links to the sites where I found this information i am about to share in this thread:

So from what I found, in order to use the alpha channel to guide the shadow, one must add some code for each browser type.

This is the SVG syntax that you can add as a separate file or embedded on the webpage.

<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>

You would change the stdDeviation, dx, and dy to control the parameters of the shadow.

Then you would need to add the following CSS:

.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')";
}

So I kind of understand how to add this to the code outside of Webflow, but I am not sure how I would go about doing this within Webflow. Is this something that can be added and used in the Webflow environment/dashboard? Or is this something that can only be added after exporting the code?

Here is my read only link:https://preview.webflow.com/preview/tooth-flair?preview=0b4398c6cd5640a8e63a8b3c7d1019c5

If anyone understands how to do this within Webflow, please share.


#4

eh thanks for the reply will look at this right away as it would be very cool


#5

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. :slight_smile:

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.


#6

Yep this is cool would like to see this work in Webflow even if we could just pop the code in. I am not there yet and have yet to try anything in code. I do understand it just not how to pop it in Via webflow. The class thing makes sense, To ID the images you want to shadow would be perfect. A subclass would be better as you could set your class to “Shadow” Then subclass “SH001” This would let you set attributes for many Shadows per site. Does this make sense? Boy sure would be nice to have this part of Webflow with out the code but will work it in code if I have to as it would sure look nice. I do think they have bigger fish to fry right now with the EU thing going on right now. So maybe once they get this all sorted out they can look into this for us.


#7

It is actually much easier than you think to implement. First assign your image an ID
image

Next go to the custom code section of the page and add this css with as many ID’s as you wish to apply the drop shadow to :slight_smile:

<style> 
#eraser, #pencil, #sketchbook {
  -webkit-filter: drop-shadow(5px 5px 5px #222 );
  filter: drop-shadow(5px 5px 5px #222);
} 
</style>

Just a heads up, it will only show published. Will not show in preview mode.