How to create images with reflection

There is no direct ‘reflection’ option for images in Sparkle, but, following this tutorial, you can re-create the same effect manually. To begin with, add an image to your page by selecting ‘image’ and then ‘add’ on the inspector, or else copy and paste. Then, make the image bottom-aligned using the icon furthest to the right of the six alignment icons.

Now duplicate this image: copying and pasting it will place it automatically on top of the original, which is ideal for this tutorial. Drag the top handle of the image below the bottom one, inverting the duplicated image vertically and bringing it directly below the original. For a reflection effect, it is better to reduce the height of the image to approximately half of the original.

At this point, overlay a box onto the bottom image (select ‘box’ from the toolbar) and give this box a ‘gradient’ content, with the top part transparent (shown as a black-and-white cube grid) and the bottom part white (as this matches the background of our page).

Finally, adjust the bottom image and box distance from the top image, and make sure the box is aligned with the bottom image. In this example there is a little spacing to separate the images, producing a slight “height” effect, but they can be joined closer together. For further info see the ‘images’ section.

Updated for Sparkle 3.1

Auf Deutsch

En Français

In Italiano

Please report any shortcoming in this documentation and we’ll fix it as soon as possible!

Sparkle combines an all-in-one approach, an understandable interface and a focus on producing high performance and search engine optimized websites. 

All in a powerful native Mac app. 

Nothing else comes close.

Copyright ©2021 River SRL 

IT06208340486 — REA FI-609716

This site uses cookies. Some are essential to make our site work; others help us improve the user experience and display third party content. By using the site, you agree to our site sending these cookies. Read our privacy policy to learn more or opt out.