Change image opacity

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:

Ruby:
Copy to clipboard
cl_image_tag("sheep.jpg")
PHP:
Copy to clipboard
cl_image_tag("sheep.jpg")
Python:
Copy to clipboard
CloudinaryImage("sheep.jpg").image()
Node.js:
Copy to clipboard
cloudinary.image("sheep.jpg")
Java:
Copy to clipboard
cloudinary.url().imageTag("sheep.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('sheep.jpg').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("sheep.jpg")
React:
Copy to clipboard
<Image publicId="sheep.jpg" >

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="sheep.jpg" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="sheep.jpg" >

</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("sheep.jpg")
Android:
Copy to clipboard
MediaManager.get().url().generate("sheep.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("sheep.jpg")!, cloudinary: cloudinary)
Original

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

Ruby:
Copy to clipboard
cl_image_tag("sheep.jpg", :opacity=>50)
PHP:
Copy to clipboard
cl_image_tag("sheep.jpg", array("opacity"=>50))
Python:
Copy to clipboard
CloudinaryImage("sheep.jpg").image(opacity=50)
Node.js:
Copy to clipboard
cloudinary.image("sheep.jpg", {opacity: 50})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().opacity(50)).imageTag("sheep.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('sheep.jpg', {opacity: 50}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("sheep.jpg", {opacity: 50})
React:
Copy to clipboard
<Image publicId="sheep.jpg" >
  <Transformation opacity="50" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="sheep.jpg" >
  <cld-transformation opacity="50" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="sheep.jpg" >
  <cl-transformation opacity="50">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Opacity(50)).BuildImageTag("sheep.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().opacity(50)).generate("sheep.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOpacity(50)).generate("sheep.jpg")!, cloudinary: cloudinary)
50% opacity

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:

Ruby:
Copy to clipboard
cl_image_tag("sheep.png", :opacity=>50)
PHP:
Copy to clipboard
cl_image_tag("sheep.png", array("opacity"=>50))
Python:
Copy to clipboard
CloudinaryImage("sheep.png").image(opacity=50)
Node.js:
Copy to clipboard
cloudinary.image("sheep.png", {opacity: 50})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().opacity(50)).imageTag("sheep.png");
JS:
Copy to clipboard
cloudinary.imageTag('sheep.png', {opacity: 50}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("sheep.png", {opacity: 50})
React:
Copy to clipboard
<Image publicId="sheep.png" >
  <Transformation opacity="50" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="sheep.png" >
  <cld-transformation opacity="50" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="sheep.png" >
  <cl-transformation opacity="50">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Opacity(50)).BuildImageTag("sheep.png")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().opacity(50)).generate("sheep.png");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOpacity(50)).generate("sheep.png")!, cloudinary: cloudinary)
50% opacity-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):

Ruby:
Copy to clipboard
cl_image_tag("sheep.jpg", :background=>"purple", :opacity=>70)
PHP:
Copy to clipboard
cl_image_tag("sheep.jpg", array("background"=>"purple", "opacity"=>70))
Python:
Copy to clipboard
CloudinaryImage("sheep.jpg").image(background="purple", opacity=70)
Node.js:
Copy to clipboard
cloudinary.image("sheep.jpg", {background: "purple", opacity: 70})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().background("purple").opacity(70)).imageTag("sheep.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('sheep.jpg', {background: "purple", opacity: 70}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("sheep.jpg", {background: "purple", opacity: 70})
React:
Copy to clipboard
<Image publicId="sheep.jpg" >
  <Transformation background="purple" opacity="70" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="sheep.jpg" >
  <cld-transformation background="purple" opacity="70" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="sheep.jpg" >
  <cl-transformation background="purple" opacity="70">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Background("purple").Opacity(70)).BuildImageTag("sheep.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().background("purple").opacity(70)).generate("sheep.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setBackground("purple").setOpacity(70)).generate("sheep.jpg")!, cloudinary: cloudinary)
Purple background

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

Ruby:
Copy to clipboard
cl_image_tag("sheep.jpg", :overlay=>"cloudinary_icon")
PHP:
Copy to clipboard
cl_image_tag("sheep.jpg", array("overlay"=>"cloudinary_icon"))
Python:
Copy to clipboard
CloudinaryImage("sheep.jpg").image(overlay="cloudinary_icon")
Node.js:
Copy to clipboard
cloudinary.image("sheep.jpg", {overlay: "cloudinary_icon"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId("cloudinary_icon"))).imageTag("sheep.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('sheep.jpg', {overlay: new cloudinary.Layer().publicId("cloudinary_icon")}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("sheep.jpg", {overlay: new cloudinary.Layer().publicId("cloudinary_icon")})
React:
Copy to clipboard
<Image publicId="sheep.jpg" >
  <Transformation overlay="cloudinary_icon" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="sheep.jpg" >
  <cld-transformation overlay="cloudinary_icon" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="sheep.jpg" >
  <cl-transformation overlay="cloudinary_icon">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId("cloudinary_icon"))).BuildImageTag("sheep.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId("cloudinary_icon"))).generate("sheep.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("cloudinary_icon")).generate("sheep.jpg")!, cloudinary: cloudinary)
Overlay

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

Ruby:
Copy to clipboard
cl_image_tag("sheep.jpg", :overlay=>"cloudinary_icon", :opacity=>50)
PHP:
Copy to clipboard
cl_image_tag("sheep.jpg", array("overlay"=>"cloudinary_icon", "opacity"=>50))
Python:
Copy to clipboard
CloudinaryImage("sheep.jpg").image(overlay="cloudinary_icon", opacity=50)
Node.js:
Copy to clipboard
cloudinary.image("sheep.jpg", {overlay: "cloudinary_icon", opacity: 50})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId("cloudinary_icon")).opacity(50)).imageTag("sheep.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('sheep.jpg', {overlay: new cloudinary.Layer().publicId("cloudinary_icon"), opacity: 50}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("sheep.jpg", {overlay: new cloudinary.Layer().publicId("cloudinary_icon"), opacity: 50})
React:
Copy to clipboard
<Image publicId="sheep.jpg" >
  <Transformation overlay="cloudinary_icon" opacity="50" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="sheep.jpg" >
  <cld-transformation overlay="cloudinary_icon" opacity="50" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="sheep.jpg" >
  <cl-transformation overlay="cloudinary_icon" opacity="50">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId("cloudinary_icon")).Opacity(50)).BuildImageTag("sheep.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId("cloudinary_icon")).opacity(50)).generate("sheep.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("cloudinary_icon").setOpacity(50)).generate("sheep.jpg")!, cloudinary: cloudinary)
Overlay opacity

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:

Ruby:
Copy to clipboard
cl_image_tag("sheep.jpg", :transformation=>[
  {:background=>"black", :opacity=>30},
  {:overlay=>"sheep.png", :width=>400, :height=>400, :radius=>"max", :effect=>"vignette", :crop=>"crop"}
  ])
PHP:
Copy to clipboard
cl_image_tag("sheep.jpg", array("transformation"=>array(
  array("background"=>"black", "opacity"=>30),
  array("overlay"=>"sheep.png", "width"=>400, "height"=>400, "radius"=>"max", "effect"=>"vignette", "crop"=>"crop")
  )))
Python:
Copy to clipboard
CloudinaryImage("sheep.jpg").image(transformation=[
  {'background': "black", 'opacity': 30},
  {'overlay': "sheep.png", 'width': 400, 'height': 400, 'radius': "max", 'effect': "vignette", 'crop': "crop"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("sheep.jpg", {transformation: [
  {background: "black", opacity: 30},
  {overlay: "sheep.png", width: 400, height: 400, radius: "max", effect: "vignette", crop: "crop"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .background("black").opacity(30).chain()
  .overlay(new Layer().publicId("sheep.png")).width(400).height(400).radius("max").effect("vignette").crop("crop")).imageTag("sheep.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('sheep.jpg', {transformation: [
  {background: "black", opacity: 30},
  {overlay: new cloudinary.Layer().publicId("sheep.png"), width: 400, height: 400, radius: "max", effect: "vignette", crop: "crop"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("sheep.jpg", {transformation: [
  {background: "black", opacity: 30},
  {overlay: new cloudinary.Layer().publicId("sheep.png"), width: 400, height: 400, radius: "max", effect: "vignette", crop: "crop"}
  ]})
React:
Copy to clipboard
<Image publicId="sheep.jpg" >
  <Transformation background="black" opacity="30" />
  <Transformation overlay="sheep.png" width="400" height="400" radius="max" effect="vignette" crop="crop" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="sheep.jpg" >
  <cld-transformation background="black" opacity="30" />
  <cld-transformation overlay="sheep.png" width="400" height="400" radius="max" effect="vignette" crop="crop" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="sheep.jpg" >
  <cl-transformation background="black" opacity="30">
  </cl-transformation>
  <cl-transformation overlay="sheep.png" width="400" height="400" radius="max" effect="vignette" crop="crop">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Background("black").Opacity(30).Chain()
  .Overlay(new Layer().PublicId("sheep.png")).Width(400).Height(400).Radius("max").Effect("vignette").Crop("crop")).BuildImageTag("sheep.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .background("black").opacity(30).chain()
  .overlay(new Layer().publicId("sheep.png")).width(400).height(400).radius("max").effect("vignette").crop("crop")).generate("sheep.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setBackground("black").setOpacity(30).chain()
  .setOverlay("sheep.png").setWidth(400).setHeight(400).setRadius("max").setEffect("vignette").setCrop("crop")).generate("sheep.jpg")!, cloudinary: cloudinary)
Flashlight effect

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

Ruby:
Copy to clipboard
cl_image_tag("fat_cat.png", :transformation=>[
  {:overlay=>{:font_family=>"Montserrat", :font_size=>150, :font_weight=>"bold", :text=>"Cloudinary"}, :flags=>"cutter"},
  {:underlay=>"fat_cat.jpg", :opacity=>30, :background=>"black"}
  ])
PHP:
Copy to clipboard
cl_image_tag("fat_cat.png", array("transformation"=>array(
  array("overlay"=>array("font_family"=>"Montserrat", "font_size"=>150, "font_weight"=>"bold", "text"=>"Cloudinary"), "flags"=>"cutter"),
  array("underlay"=>"fat_cat.jpg", "opacity"=>30, "background"=>"black")
  )))
Python:
Copy to clipboard
CloudinaryImage("fat_cat.png").image(transformation=[
  {'overlay': {'font_family': "Montserrat", 'font_size': 150, 'font_weight': "bold", 'text': "Cloudinary"}, 'flags': "cutter"},
  {'underlay': "fat_cat.jpg", 'opacity': 30, 'background': "black"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("fat_cat.png", {transformation: [
  {overlay: {font_family: "Montserrat", font_size: 150, font_weight: "bold", text: "Cloudinary"}, flags: "cutter"},
  {underlay: "fat_cat.jpg", opacity: 30, background: "black"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .overlay(new TextLayer().fontFamily("Montserrat").fontSize(150).fontWeight("bold").text("Cloudinary")).flags("cutter").chain()
  .underlay(new Layer().publicId("fat_cat.jpg")).opacity(30).background("black")).imageTag("fat_cat.png");
JS:
Copy to clipboard
cloudinary.imageTag('fat_cat.png', {transformation: [
  {overlay: new cloudinary.TextLayer().fontFamily("Montserrat").fontSize(150).fontWeight("bold").text("Cloudinary"), flags: "cutter"},
  {underlay: new cloudinary.Layer().publicId("fat_cat.jpg"), opacity: 30, background: "black"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("fat_cat.png", {transformation: [
  {overlay: new cloudinary.TextLayer().fontFamily("Montserrat").fontSize(150).fontWeight("bold").text("Cloudinary"), flags: "cutter"},
  {underlay: new cloudinary.Layer().publicId("fat_cat.jpg"), opacity: 30, background: "black"}
  ]})
React:
Copy to clipboard
<Image publicId="fat_cat.png" >
  <Transformation overlay={{fontFamily: "Montserrat", fontSize: 150, fontWeight: "bold", text: "Cloudinary"}} flags="cutter" />
  <Transformation underlay="fat_cat.jpg" opacity="30" background="black" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="fat_cat.png" >
  <cld-transformation overlay={{fontFamily: "Montserrat", fontSize: 150, fontWeight: "bold", text: "Cloudinary"}} flags="cutter" />
  <cld-transformation underlay="fat_cat.jpg" opacity="30" background="black" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="fat_cat.png" >
  <cl-transformation overlay="text:Montserrat_150_bold:Cloudinary" flags="cutter">
  </cl-transformation>
  <cl-transformation underlay="fat_cat.jpg" opacity="30" background="black">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new TextLayer().FontFamily("Montserrat").FontSize(150).FontWeight("bold").Text("Cloudinary")).Flags("cutter").Chain()
  .Underlay(new Layer().PublicId("fat_cat.jpg")).Opacity(30).Background("black")).BuildImageTag("fat_cat.png")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .overlay(new TextLayer().fontFamily("Montserrat").fontSize(150).fontWeight("bold").text("Cloudinary")).flags("cutter").chain()
  .underlay(new Layer().publicId("fat_cat.jpg")).opacity(30).background("black")).generate("fat_cat.png");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("text:Montserrat_150_bold:Cloudinary").setFlags("cutter").chain()
  .setUnderlay("fat_cat.jpg").setOpacity(30).setBackground("black")).generate("fat_cat.png")!, cloudinary: cloudinary)
Opacity with text

by Itay Taragano