Skip to main content

Give Your Images an Extra Style Boost

Sun, Oct 2nd, 2022

You don’t have to be a professional graphic designer to give your website’s images some extra style. Check out our code snippet that will let you overlay a gradient on any image!

At Allen Media, we love giving our images a little extra style. Whether it’s a color-burn effect or a gradient overlay on a background image, we always think it makes our site look more polished and professional. However, we recently came across a webkit solution that allows us to place a gradient overlay on an image that isn’t a background. This was something we had been wanting to do for awhile, and we’re excited to now be able to share this code snippet with you all. So if you’re looking to add a little extra pizazz to your images, feel free to use this code on your own site or project.

.amdd-image-overlay {
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0) 15%,
    rgba(0,0,0,0.65) 100%);