Generate your photo collage online
Generate your photo collage online
Presentation
E-commerce
Photography
Advanced

Take your base image and use the overlay parameter (l in URLs) to add any further images. Set the required width and height (w and h in URLs) with the required crop mode, and add any further transformations, effects and texts.

Cloudinary allows taking any of your uploaded images and add them as overlays on any base image. The base image can be either from your uploaded images, remotely fetched images and more.

Here are four upload images we'd like to generate a collage from: yellow_tulip

https://res.cloudinary.com/demo/image/upload/yellow_tulip.jpg
brown_sheep
https://res.cloudinary.com/demo/image/upload/brown_sheep.jpg
horses
https://res.cloudinary.com/demo/image/upload/horses.jpg
white_chicken
https://res.cloudinary.com/demo/image/upload/white_chicken.jpg

Now we'll take these four images and place them one next to the other: Various images

https://res.cloudinary.com/demo/image/upload/w_220,h_140,c_fill/l_brown_sheep,w_220,h_140,c_fill,x_220/l_horses,w_220,h_140,c_fill,y_140,x_-110/l_white_chicken,w_220,h_140,c_fill,y_70,x_110/yellow_tulip.jpg

We can add a fifth image (with the public ID 'butterfly') while rotating it a bit: Five images

https://res.cloudinary.com/demo/image/upload/w_220,h_140,c_fill/l_brown_sheep,w_220,h_140,c_fill,x_220/l_horses,w_220,h_140,c_fill,y_140,x_-110/l_white_chicken,w_220,h_140,c_fill,y_70,x_110/l_butterfly.png,h_200,x_-10,a_10/yellow_tulip.jpg

Now we'll round the corners of the image by setting the radius parameter (r in URLs) to the required pixels: Rounded corners collage

https://res.cloudinary.com/demo/image/upload/w_220,h_140,c_fill/l_brown_sheep,w_220,h_140,c_fill,x_220/l_horses,w_220,h_140,c_fill,y_140,x_-110/l_white_chicken,w_220,h_140,c_fill,y_70,x_110/l_butterfly.png,h_200,x_-10,a_10/r_20/yellow_tulip.jpg

Now let's add a nice caption text: Collage with text

https://res.cloudinary.com/demo/image/upload/w_220,h_140,c_fill/l_brown_sheep,w_220,h_140,c_fill,x_220/l_horses,w_220,h_140,c_fill,y_140,x_-110/l_white_chicken,w_220,h_140,c_fill,y_70,x_110/l_butterfly.png,h_200,x_-10,a_10/w_400,h_260,c_crop,r_20/l_text:Parisienne_35_bold:Memories from our trip,co_rgb:990C47,y_155/yellow_tulip.jpg

Finally, we'll add a nice shadow effect by setting the effect parameter to shadow (e_shadow in URLs): Collage with text

https://res.cloudinary.com/demo/image/upload/w_220,h_140,c_fill/l_brown_sheep,w_220,h_140,c_fill,x_220/l_horses,w_220,h_140,c_fill,y_140,x_-110/l_white_chicken,w_220,h_140,c_fill,y_70,x_110/l_butterfly.png,h_200,x_-10,a_10/w_400,h_260,c_crop,r_20/l_text:Parisienne_35_bold:Memories from our trip,co_rgb:990C47,y_155/e_shadow/yellow_tulip.jpg

Here's another collage example: Another collage

https://res.cloudinary.com/demo/image/upload/w_100,h_100,c_fill/l_sample,w_100,h_100,c_fill,x_100/l_kitten,w_100,h_100,c_fill,y_100,x_-50/l_autumn_leaves,w_100,h_100,c_fill,y_50,x_50/r_max/e_shadow/fat_cat.jpg