Want to add character to your website design? Add visual interest by making visual elements pop off the page! When Asher House wanted to highlight a few images on their home page, we knew a custom image shadow would do the trick. 

Custom image shadows draw attention to certain elements by creating an elevated look. Elevation creates visual hierarchy, drawing the eye to specific sections of a page first. How can you use “elevation” to your advantage on a flat screen? Well – elevation is defined as the relative distance between two surfaces on a z-axis. When we layer two images on top of one another, the distance between them appears to be zero. But when we add shadowing, we gain the illusion of dimension – proving once again that good design is like magic.

In our case study today, the surfaces we’d like to create elevation between are:

• The background
• The shape element (shadow)
• The image itself

By adding a shadow to the image, the photo looks like it's floating above the background, making it stand out. Want to try this tip in your own design? Follow these steps or check out this video to watch each step in real time, and you, too, can create some magic. 

Step 1: Create your shadow.

The great thing about custom shadows is that you can build them to your liking until you have the perfect look! We like to create our shadows with this tool. As you start to design, think about your image. Where would you like your shadow to appear? How big should it be? How intense of a color variation do you want to implement?

In our Asher House example, there is a shadow to the left of the first images, and to the right of the second one – check them out for some inspiration! Once you’ve created the shadow, copy the code and open your Duda site. Here’s the code we landed on for that first image on the Asher House homepage.

Step 2: Select the image on your Duda site.

Navigate to the page your image is already on and select it. Once it’s selected, you can right-click to select "Edit HTML/CSS."

Step 3: Paste your shadow code.

Once you’ve opened the CSS tab, you can paste the copied code from the custom shadow generator. It should look like this:

Step 4: Update and enjoy!

That simple three-step process adds definition, elevation, and visual interest to any webpage. Here’s our finished product!

With Duda, it’s easier than ever to create websites with that “wow” factor without endless hours of coding or frustration. Hope this helped! We’ll see you again soon for another tip.