Change image opacity
Change image opacity
Creative
Layers
Photography
Beginner

Change the image's opacity level by setting the opacity parameter (o in URLs) to a value between 0 to 100 which represents the visibility percentage. Control the opacity level of either the main image or overlaid images.

Here's a sample image uploaded to Cloudinary: Original

https://res.cloudinary.com/demo/image/upload/sheep.jpg

In order to change the opacity to 50% for example, set the opacity parameter to 50 (o_50 in URLs):

50% opacity

https://res.cloudinary.com/demo/image/upload/o_50/sheep.jpg

Note that the JPG format doesn't support transparency. If you have a background color set on the webpage, the image won't be transparent and therefore the image won't blend in to the background color (a default white background color is applied for JPG images). If you require transparency, you might want to consider converting the image to a transparency-supported format, e.g., PNG: 50% opacity-PNG

https://res.cloudinary.com/demo/image/upload/o_50/sheep.png

Alternatively, tell Cloudinary to set the background color of the image. This is done by setting the background parameter (b in URLs) to any color instead of the default white (this parameter is only supported for JPGs): Purple background

https://res.cloudinary.com/demo/image/upload/b_purple,o_70/sheep.jpg

The opacity level can be customized for overlay images too. Here's the same image with Cloudinary's logo as an overlay:

Overlay

https://res.cloudinary.com/demo/image/upload/l_cloudinary_icon/sheep.jpg

And here it is after the overlay's opacity level is customized to 50%, which results a more blended image: Overlay opacity

https://res.cloudinary.com/demo/image/upload/l_cloudinary_icon,o_50/sheep.jpg

Here's an example of a more advanced technique to generate a cool "flashlight" effect. Firstly we'll decrease the opacity level to 30 while setting a black background, then we'll add the same image as an overlay, cropped as a circle and applied with the vignette effect: Flashlight effect

https://res.cloudinary.com/demo/image/upload/b_black,o_30/l_sheep.png,w_400,h_400,r_max,c_crop,e_vignette/sheep.jpg

Here's another nice example which combines opacity with a textured text overlay (as explained in the cookbook recipe - Use images as text textures): Opacity with text

https://res.cloudinary.com/demo/image/upload/l_text:Montserrat_150_bold:Cloudinary,fl_cutter/u_fat_cat.jpg,o_30,b_black/fat_cat.png