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:
cl_image_tag("sheep.jpg")
PHP:
cl_image_tag("sheep.jpg")
Python:
CloudinaryImage("sheep.jpg").image()
Node.js:
cloudinary.image("sheep.jpg")
Java:
cloudinary.url().imageTag("sheep.jpg")
JS:
cl.imageTag('sheep.jpg').toHtml();
jQuery:
$.cloudinary.image("sheep.jpg")
React:
<Image publicId="sheep.jpg" >

</Image>
Angular:
<cl-image public-id="sheep.jpg" >

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("sheep.jpg")
Android:
MediaManager.get().url().generate("sheep.jpg")
Original

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

Ruby:
cl_image_tag("sheep.jpg", :opacity=>50)
PHP:
cl_image_tag("sheep.jpg", array("opacity"=>50))
Python:
CloudinaryImage("sheep.jpg").image(opacity=50)
Node.js:
cloudinary.image("sheep.jpg", {opacity: 50})
Java:
cloudinary.url().transformation(new Transformation().opacity(50)).imageTag("sheep.jpg")
JS:
cl.imageTag('sheep.jpg', {opacity: 50}).toHtml();
jQuery:
$.cloudinary.image("sheep.jpg", {opacity: 50})
React:
<Image publicId="sheep.jpg" >
  <Transformation opacity="50" />
</Image>
Angular:
<cl-image public-id="sheep.jpg" >
  <cl-transformation opacity="50">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Opacity(50)).BuildImageTag("sheep.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().opacity(50)).generate("sheep.jpg")
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:
cl_image_tag("sheep.png", :opacity=>50)
PHP:
cl_image_tag("sheep.png", array("opacity"=>50))
Python:
CloudinaryImage("sheep.png").image(opacity=50)
Node.js:
cloudinary.image("sheep.png", {opacity: 50})
Java:
cloudinary.url().transformation(new Transformation().opacity(50)).imageTag("sheep.png")
JS:
cl.imageTag('sheep.png', {opacity: 50}).toHtml();
jQuery:
$.cloudinary.image("sheep.png", {opacity: 50})
React:
<Image publicId="sheep.png" >
  <Transformation opacity="50" />
</Image>
Angular:
<cl-image public-id="sheep.png" >
  <cl-transformation opacity="50">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Opacity(50)).BuildImageTag("sheep.png")
Android:
MediaManager.get().url().transformation(new Transformation().opacity(50)).generate("sheep.png")
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:
cl_image_tag("sheep.jpg", :background=>"purple", :opacity=>70)
PHP:
cl_image_tag("sheep.jpg", array("background"=>"purple", "opacity"=>70))
Python:
CloudinaryImage("sheep.jpg").image(background="purple", opacity=70)
Node.js:
cloudinary.image("sheep.jpg", {background: "purple", opacity: 70})
Java:
cloudinary.url().transformation(new Transformation().background("purple").opacity(70)).imageTag("sheep.jpg")
JS:
cl.imageTag('sheep.jpg', {background: "purple", opacity: 70}).toHtml();
jQuery:
$.cloudinary.image("sheep.jpg", {background: "purple", opacity: 70})
React:
<Image publicId="sheep.jpg" >
  <Transformation background="purple" opacity="70" />
</Image>
Angular:
<cl-image public-id="sheep.jpg" >
  <cl-transformation background="purple" opacity="70">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Background("purple").Opacity(70)).BuildImageTag("sheep.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().background("purple").opacity(70)).generate("sheep.jpg")
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:
cl_image_tag("sheep.jpg", :overlay=>"cloudinary_icon")
PHP:
cl_image_tag("sheep.jpg", array("overlay"=>"cloudinary_icon"))
Python:
CloudinaryImage("sheep.jpg").image(overlay="cloudinary_icon")
Node.js:
cloudinary.image("sheep.jpg", {overlay: "cloudinary_icon"})
Java:
cloudinary.url().transformation(new Transformation().overlay("cloudinary_icon")).imageTag("sheep.jpg")
JS:
cl.imageTag('sheep.jpg', {overlay: "cloudinary_icon"}).toHtml();
jQuery:
$.cloudinary.image("sheep.jpg", {overlay: "cloudinary_icon"})
React:
<Image publicId="sheep.jpg" >
  <Transformation overlay="cloudinary_icon" />
</Image>
Angular:
<cl-image public-id="sheep.jpg" >
  <cl-transformation overlay="cloudinary_icon">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay("cloudinary_icon")).BuildImageTag("sheep.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().overlay("cloudinary_icon")).generate("sheep.jpg")
Overlay

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

Ruby:
cl_image_tag("sheep.jpg", :overlay=>"cloudinary_icon", :opacity=>50)
PHP:
cl_image_tag("sheep.jpg", array("overlay"=>"cloudinary_icon", "opacity"=>50))
Python:
CloudinaryImage("sheep.jpg").image(overlay="cloudinary_icon", opacity=50)
Node.js:
cloudinary.image("sheep.jpg", {overlay: "cloudinary_icon", opacity: 50})
Java:
cloudinary.url().transformation(new Transformation().overlay("cloudinary_icon").opacity(50)).imageTag("sheep.jpg")
JS:
cl.imageTag('sheep.jpg', {overlay: "cloudinary_icon", opacity: 50}).toHtml();
jQuery:
$.cloudinary.image("sheep.jpg", {overlay: "cloudinary_icon", opacity: 50})
React:
<Image publicId="sheep.jpg" >
  <Transformation overlay="cloudinary_icon" opacity="50" />
</Image>
Angular:
<cl-image public-id="sheep.jpg" >
  <cl-transformation overlay="cloudinary_icon" opacity="50">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay("cloudinary_icon").Opacity(50)).BuildImageTag("sheep.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().overlay("cloudinary_icon").opacity(50)).generate("sheep.jpg")
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:
cl_image_tag("sheep.jpg", :transformation=>[
  {:background=>"black", :opacity=>30},
  {:overlay=>"sheep.png", :width=>400, :height=>400, :radius=>"max", :effect=>"vignette", :crop=>"crop"}
  ])
PHP:
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:
CloudinaryImage("sheep.jpg").image(transformation=[
  {"background": "black", "opacity": 30},
  {"overlay": "sheep.png", "width": 400, "height": 400, "radius": "max", "effect": "vignette", "crop": "crop"}
  ])
Node.js:
cloudinary.image("sheep.jpg", {transformation: [
  {background: "black", opacity: 30},
  {overlay: "sheep.png", width: 400, height: 400, radius: "max", effect: "vignette", crop: "crop"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .background("black").opacity(30).chain()
  .overlay("sheep.png").width(400).height(400).radius("max").effect("vignette").crop("crop")).imageTag("sheep.jpg")
JS:
cl.imageTag('sheep.jpg', {transformation: [
  {background: "black", opacity: 30},
  {overlay: "sheep.png", width: 400, height: 400, radius: "max", effect: "vignette", crop: "crop"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("sheep.jpg", {transformation: [
  {background: "black", opacity: 30},
  {overlay: "sheep.png", width: 400, height: 400, radius: "max", effect: "vignette", crop: "crop"}
  ]})
React:
<Image publicId="sheep.jpg" >
  <Transformation background="black" opacity="30" />
  <Transformation overlay="sheep.png" width="400" height="400" radius="max" effect="vignette" crop="crop" />
</Image>
Angular:
<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:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Background("black").Opacity(30).Chain()
  .Overlay("sheep.png").Width(400).Height(400).Radius("max").Effect("vignette").Crop("crop")).BuildImageTag("sheep.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
  .background("black").opacity(30).chain()
  .overlay("sheep.png").width(400).height(400).radius("max").effect("vignette").crop("crop")).generate("sheep.jpg")
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:
cl_image_tag("fat_cat.png", :transformation=>[
  {:overlay=>"text:Montserrat_150_bold:Cloudinary", :flags=>"cutter"},
  {:underlay=>"fat_cat.jpg", :opacity=>30, :background=>"black"}
  ])
PHP:
cl_image_tag("fat_cat.png", array("transformation"=>array(
  array("overlay"=>"text:Montserrat_150_bold:Cloudinary", "flags"=>"cutter"),
  array("underlay"=>"fat_cat.jpg", "opacity"=>30, "background"=>"black")
  )))
Python:
CloudinaryImage("fat_cat.png").image(transformation=[
  {"overlay": "text:Montserrat_150_bold:Cloudinary", "flags": "cutter"},
  {"underlay": "fat_cat.jpg", "opacity": 30, "background": "black"}
  ])
Node.js:
cloudinary.image("fat_cat.png", {transformation: [
  {overlay: "text:Montserrat_150_bold:Cloudinary", flags: "cutter"},
  {underlay: "fat_cat.jpg", opacity: 30, background: "black"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .overlay("text:Montserrat_150_bold:Cloudinary").flags("cutter").chain()
  .underlay("fat_cat.jpg").opacity(30).background("black")).imageTag("fat_cat.png")
JS:
cl.imageTag('fat_cat.png', {transformation: [
  {overlay: "text:Montserrat_150_bold:Cloudinary", flags: "cutter"},
  {underlay: "fat_cat.jpg", opacity: 30, background: "black"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("fat_cat.png", {transformation: [
  {overlay: "text:Montserrat_150_bold:Cloudinary", flags: "cutter"},
  {underlay: "fat_cat.jpg", opacity: 30, background: "black"}
  ]})
React:
<Image publicId="fat_cat.png" >
  <Transformation overlay="text:Montserrat_150_bold:Cloudinary" flags="cutter" />
  <Transformation underlay="fat_cat.jpg" opacity="30" background="black" />
</Image>
Angular:
<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:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay("text:Montserrat_150_bold:Cloudinary").Flags("cutter").Chain()
  .Underlay("fat_cat.jpg").Opacity(30).Background("black")).BuildImageTag("fat_cat.png")
Android:
MediaManager.get().url().transformation(new Transformation()
  .overlay("text:Montserrat_150_bold:Cloudinary").flags("cutter").chain()
  .underlay("fat_cat.jpg").opacity(30).background("black")).generate("fat_cat.png")
Opacity with text

by Itay Taragano