Adding watermarks as an overlay

Add your watermark as an overlay on top of any image by setting the overlay parameter (l in URLs) as your watermark image's public ID. The overlaid image's size and position is customizable.

Watermarks can be easily added to your images. Watermarks can be used for either overlaying another image, adding your logo, a custom user badge, etc. Cloudinary allows adding your watermark by using the overlay parameter (l in URLs).

Here's an original image:

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

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

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("envelope.jpg")
Original

And here's how to add a logo on top of the 'pasta' image:

Ruby:
cl_image_tag("envelope.jpg", :overlay=>"cloudinary_icon")
PHP:
cl_image_tag("envelope.jpg", array("overlay"=>"cloudinary_icon"))
Python:
CloudinaryImage("envelope.jpg").image(overlay="cloudinary_icon")
Node.js:
cloudinary.image("envelope.jpg", {overlay: "cloudinary_icon"})
Java:
cloudinary.url().transformation(new Transformation().overlay("cloudinary_icon")).imageTag("envelope.jpg")
JS:
cl.imageTag('envelope.jpg', {overlay: "cloudinary_icon"}).toHtml();
jQuery:
$.cloudinary.image("envelope.jpg", {overlay: "cloudinary_icon"})
React:
<Image publicId="envelope.jpg" >
  <Transformation overlay="cloudinary_icon" />
</Image>
Angular:
<cl-image public-id="envelope.jpg" >
  <cl-transformation overlay="cloudinary_icon">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay("cloudinary_icon")).BuildImageTag("envelope.jpg")
Overlaying

In default, the overlay image is placed in the center of the base image, however the size and the positioning of the overlaid image can be specified. Here's the same logo, scaled-down, placed in a custom offset from the center the image, while rotating 12 degrees clockwise:

Ruby:
cl_image_tag("envelope.jpg", :overlay=>"cloudinary_icon", :width=>200, :x=>-30, :y=>30, :angle=>12, :crop=>"scale")
PHP:
cl_image_tag("envelope.jpg", array("overlay"=>"cloudinary_icon", "width"=>200, "x"=>-30, "y"=>30, "angle"=>12, "crop"=>"scale"))
Python:
CloudinaryImage("envelope.jpg").image(overlay="cloudinary_icon", width=200, x=-30, y=30, angle=12, crop="scale")
Node.js:
cloudinary.image("envelope.jpg", {overlay: "cloudinary_icon", width: 200, x: -30, y: 30, angle: 12, crop: "scale"})
Java:
cloudinary.url().transformation(new Transformation().overlay("cloudinary_icon").width(200).x(-30).y(30).angle(12).crop("scale")).imageTag("envelope.jpg")
JS:
cl.imageTag('envelope.jpg', {overlay: "cloudinary_icon", width: 200, x: -30, y: 30, angle: 12, crop: "scale"}).toHtml();
jQuery:
$.cloudinary.image("envelope.jpg", {overlay: "cloudinary_icon", width: 200, x: -30, y: 30, angle: 12, crop: "scale"})
React:
<Image publicId="envelope.jpg" >
  <Transformation overlay="cloudinary_icon" width="200" x="-30" y="30" angle="12" crop="scale" />
</Image>
Angular:
<cl-image public-id="envelope.jpg" >
  <cl-transformation overlay="cloudinary_icon" width="200" x="-30" y="30" angle="12" crop="scale">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay("cloudinary_icon").Width(200).X(-30).Y(30).Angle(12).Crop("scale")).BuildImageTag("envelope.jpg")
Scale and position

Cloudinary supports applying semi-transparent overlays as well. This is done by setting the opacity parameter to the percentage of the overlay's visibility. In addition, you can use the colorize effect to color your images. It uses the color specified by the color transformation parameter (co in URLs) that accepts a color name or an RGB value.

Here's an example of a watermark coloring and setting its opacity to 60%:

Ruby:
cl_image_tag("envelope.jpg", :overlay=>"cloudinary_icon", :effect=>"colorize", :color=>"white", :opacity=>60)
PHP:
cl_image_tag("envelope.jpg", array("overlay"=>"cloudinary_icon", "effect"=>"colorize", "color"=>"white", "opacity"=>60))
Python:
CloudinaryImage("envelope.jpg").image(overlay="cloudinary_icon", effect="colorize", color="white", opacity=60)
Node.js:
cloudinary.image("envelope.jpg", {overlay: "cloudinary_icon", effect: "colorize", color: "white", opacity: 60})
Java:
cloudinary.url().transformation(new Transformation().overlay("cloudinary_icon").effect("colorize").color("white").opacity(60)).imageTag("envelope.jpg")
JS:
cl.imageTag('envelope.jpg', {overlay: "cloudinary_icon", effect: "colorize", color: "white", opacity: 60}).toHtml();
jQuery:
$.cloudinary.image("envelope.jpg", {overlay: "cloudinary_icon", effect: "colorize", color: "white", opacity: 60})
React:
<Image publicId="envelope.jpg" >
  <Transformation overlay="cloudinary_icon" effect="colorize" color="white" opacity="60" />
</Image>
Angular:
<cl-image public-id="envelope.jpg" >
  <cl-transformation overlay="cloudinary_icon" effect="colorize" color="white" opacity="60">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay("cloudinary_icon").Effect("colorize").Color("white").Opacity(60)).BuildImageTag("envelope.jpg")
Semi-transparent

Any further transformations can be further applied for both the base image and the overlaid image.
More information and examples of watermarks embedding and manipulation by Cloudinary can be found in the following blog posts: Image opacity manipulation and dynamic watermark generation
Adding watermarks, credits, badges and text overlays to images

by Itay Taragano