Create engaging web graphics by combining Adobe Stock images with CSS

Begin your quest on Adobe Stock to find beautiful images for your animation. Adobe Stock allows you to search on a wide range of criteria, including keywords that describe the content of a photo.

Locate a photo that you like and download a preview — or add it to a Creative Cloud Library.

Locate and save another photo of a clear sky full of evening stars.

In Photoshop, use a combination of the Quick Select tool and Layer Masks to remove the sky from the city skyline photo. Save the file as a transparent PNG file to preserve the transparency.

Add in a light transparent gradient behind the city in order to simulate the glow of the city lights against the nighttime sky.

Once you have masked out the evening sky, use the convenient Export As option to create a PNG file. In the Export dialog box, be sure to enable the Transparency option so we can see through the image.

Extend the canvas in Photoshop so the stars photo is large enough to be rotated without showing the edges. Using the Clone Stamp tool, fill the canvas with stars sampled from the original image.

Add an animation property to the #stars CSS rule and define a few values. Keep the stars moving slowly and consistently by setting a duration of 210 seconds, an animation style of linear and a looping limit of infinite.

Combining Adobe Stock with CSS allows us to create an engaging animation for your website.

Check out this curated collection from Adobe Stock with more images that you can use in your next project.