Add a shadow effect to an image

Add a shadow effect to any image just by setting the effect parameter to shadow (e_shadow in URLs). You can customize the x and y offsets of the shadow and the blurring level. The shadow's color can be also changed by setting the color parameter (co in URLs).

Here's an uploaded image for example:

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

</Image>
Angular:
<cl-image public-id="cloudinary_icon.png" >

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

Below you can see the same image while applying the 'shadow' effect:

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

The offset of the shadow can be customized by setting the x and y parameters:

Ruby:
cl_image_tag("cloudinary_icon.png", :effect=>"shadow", :x=>13, :y=>13)
PHP:
cl_image_tag("cloudinary_icon.png", array("effect"=>"shadow", "x"=>13, "y"=>13))
Python:
CloudinaryImage("cloudinary_icon.png").image(effect="shadow", x=13, y=13)
Node.js:
cloudinary.image("cloudinary_icon.png", {effect: "shadow", x: 13, y: 13})
Java:
cloudinary.url().transformation(new Transformation().effect("shadow").x(13).y(13)).imageTag("cloudinary_icon.png")
JS:
cl.imageTag('cloudinary_icon.png', {effect: "shadow", x: 13, y: 13}).toHtml();
jQuery:
$.cloudinary.image("cloudinary_icon.png", {effect: "shadow", x: 13, y: 13})
React:
<Image publicId="cloudinary_icon.png" >
  <Transformation effect="shadow" x="13" y="13" />
</Image>
Angular:
<cl-image public-id="cloudinary_icon.png" >
  <cl-transformation effect="shadow" x="13" y="13">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("shadow").X(13).Y(13)).BuildImageTag("cloudinary_icon.png")
Custom shadow

You can also control the shadow's blurring level (level range: 0-100, default level: 40)

Ruby:
cl_image_tag("cloudinary_icon.png", :effect=>"shadow:90", :x=>15, :y=>15)
PHP:
cl_image_tag("cloudinary_icon.png", array("effect"=>"shadow:90", "x"=>15, "y"=>15))
Python:
CloudinaryImage("cloudinary_icon.png").image(effect="shadow:90", x=15, y=15)
Node.js:
cloudinary.image("cloudinary_icon.png", {effect: "shadow:90", x: 15, y: 15})
Java:
cloudinary.url().transformation(new Transformation().effect("shadow:90").x(15).y(15)).imageTag("cloudinary_icon.png")
JS:
cl.imageTag('cloudinary_icon.png', {effect: "shadow:90", x: 15, y: 15}).toHtml();
jQuery:
$.cloudinary.image("cloudinary_icon.png", {effect: "shadow:90", x: 15, y: 15})
React:
<Image publicId="cloudinary_icon.png" >
  <Transformation effect="shadow:90" x="15" y="15" />
</Image>
Angular:
<cl-image public-id="cloudinary_icon.png" >
  <cl-transformation effect="shadow:90" x="15" y="15">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("shadow:90").X(15).Y(15)).BuildImageTag("cloudinary_icon.png")
Position+blur

You can also specify the shadow's color. You can specify the color name:

Ruby:
cl_image_tag("cloudinary_icon.png", :effect=>"shadow:90", :x=>15, :y=>15, :color=>"brown")
PHP:
cl_image_tag("cloudinary_icon.png", array("effect"=>"shadow:90", "x"=>15, "y"=>15, "color"=>"brown"))
Python:
CloudinaryImage("cloudinary_icon.png").image(effect="shadow:90", x=15, y=15, color="brown")
Node.js:
cloudinary.image("cloudinary_icon.png", {effect: "shadow:90", x: 15, y: 15, color: "brown"})
Java:
cloudinary.url().transformation(new Transformation().effect("shadow:90").x(15).y(15).color("brown")).imageTag("cloudinary_icon.png")
JS:
cl.imageTag('cloudinary_icon.png', {effect: "shadow:90", x: 15, y: 15, color: "brown"}).toHtml();
jQuery:
$.cloudinary.image("cloudinary_icon.png", {effect: "shadow:90", x: 15, y: 15, color: "brown"})
React:
<Image publicId="cloudinary_icon.png" >
  <Transformation effect="shadow:90" x="15" y="15" color="brown" />
</Image>
Angular:
<cl-image public-id="cloudinary_icon.png" >
  <cl-transformation effect="shadow:90" x="15" y="15" color="brown">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("shadow:90").X(15).Y(15).Color("brown")).BuildImageTag("cloudinary_icon.png")
Colored shadow

As an alternative, you can specify the color by an RGB value to match the exact color you need:

Ruby:
cl_image_tag("cloudinary_icon.png", :effect=>"shadow:90", :x=>15, :y=>15, :color=>"#0B70B6")
PHP:
cl_image_tag("cloudinary_icon.png", array("effect"=>"shadow:90", "x"=>15, "y"=>15, "color"=>"#0B70B6"))
Python:
CloudinaryImage("cloudinary_icon.png").image(effect="shadow:90", x=15, y=15, color="#0B70B6")
Node.js:
cloudinary.image("cloudinary_icon.png", {effect: "shadow:90", x: 15, y: 15, color: "#0B70B6"})
Java:
cloudinary.url().transformation(new Transformation().effect("shadow:90").x(15).y(15).color("#0B70B6")).imageTag("cloudinary_icon.png")
JS:
cl.imageTag('cloudinary_icon.png', {effect: "shadow:90", x: 15, y: 15, color: "#0B70B6"}).toHtml();
jQuery:
$.cloudinary.image("cloudinary_icon.png", {effect: "shadow:90", x: 15, y: 15, color: "#0B70B6"})
React:
<Image publicId="cloudinary_icon.png" >
  <Transformation effect="shadow:90" x="15" y="15" color="#0B70B6" />
</Image>
Angular:
<cl-image public-id="cloudinary_icon.png" >
  <cl-transformation effect="shadow:90" x="15" y="15" color="#0B70B6">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("shadow:90").X(15).Y(15).Color("#0B70B6")).BuildImageTag("cloudinary_icon.png")
RGB colored shadow

by Itay Taragano