Transparency psd docs for buttons

I just started using Hype and want to make buttons out of psd docs with transparency. When I want to work with the psd docs in Hype and change hue, saturation or place a drop shadow the effect is placed on the whole canvas, including the transparent sections. Is there a way around this?

You can do this using custom CSS:

Download: (23.0 KB)

Add this CSS to your HEAD Html

	.dropShadow { 
		-webkit-filter: drop-shadow(5px 5px 5px #222);
		filter:         drop-shadow(5px 5px 5px #222); 

Then add the class dropShadow to your image and you’re all set! Good luck!

Edit: more information and in depth research here:

1 Like


This, I think, would be nice to have build into Hype, so you can choose between filter and box shadow.

Thank you for the tip as I was just grumbling about this getting a boxy shadow around a non-boxy png. :grin: