{"id":21931,"date":"2019-08-21T16:51:11","date_gmt":"2019-08-21T16:51:11","guid":{"rendered":"http:\/\/rotating_or_removing_image_backgrounds_with_cloudinary"},"modified":"2025-05-03T15:11:37","modified_gmt":"2025-05-03T22:11:37","slug":"rotating_or_removing_image_backgrounds_with_cloudinary","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/rotating_or_removing_image_backgrounds_with_cloudinary","title":{"rendered":"Automatic Background Image Rotation and Removal"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>As a rule, user interfaces, whether for mobile or desktop apps, encompass a significant amount of visual media (images and videos), necessitating close collaboration among designers and front-end developers. The process for building UIs entails a designer-to-developer handoff, at which the designer transfers to the developer blueprints produced with such tools as Photoshop, InVision, and Sketch. The developer then implements the blueprints with Cascading Style Sheets (CSS).<\/p>\n<p>Rotating image backgrounds is a common task. An <a href=\"https:\/\/www.sitepoint.com\/css3-transform-background-image\/\">excellent tutorial<\/a> written by <a href=\"https:\/\/twitter.com\/craigbuckler\">Craig Buckler<\/a> in July 2018 describes how to do that with CSS. With Cloudinary, you can transform images in many ways\u2014<strong>without<\/strong> using CSS or involving the designer. For example:<\/p>\n<ul>\n<li>Remove image backgrounds.<\/li>\n<li>Rotate images.<\/li>\n<li>Place an image over another.<\/li>\n<li>Make the image background transparent so that it blends with a background color.<\/li>\n<\/ul>\n<h2>Overview<\/h2>\n<p>This article steps you through the procedures. Overall, Cloudinary shines as an end-to-end solution for visual media: it effectively processes their uploads and on-the-fly transformations, automates optimizations, and delivers images and videos responsively across all devices.<\/p>\n<p>CSS, particularly the <code>transform<\/code> property, offers a direct and efficient way to manipulate images. For instance, the <code>rotate()<\/code> function within CSS can be used to rotate an image by a specified degree. This method is straightforward and doesn\u2019t require external services, making it a great starting point for developers.<\/p>\n<p>The integration of HTML and CSS is crucial in creating and manipulating elements on a web page. By structuring HTML with elements like divs and applying CSS properties, developers can achieve transformations such as rotation, scaling, moving, or skewing of elements directly in the browser. This approach, while basic, forms the bedrock of more complex image manipulations in web development.<\/p>\n<h2>Rotating Images Programmatically<\/h2>\n<p>Remarkably, you can transform images on Cloudinary by simply adding parameters to their URLs.<\/p>\n<p>To rotate an image, such as this one\u2014 :<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/f_auto,q_auto,dpr_2.0\/180_yacaar.png\" alt=\"Logo\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"180\" height=\"180\"\/><\/p>\n<p>\u2014upload it to Coudinary and then add to its URL the <code>angle<\/code> parameter with the number of degrees by which to rotate the image clockwise. An example is <code>a_60<\/code>, where <code>60<\/code> denotes a 60-degree rotation. The URL then reads\u2014<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;180_yacaar.png\\&quot;, {angle: 60})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;180_yacaar.png\\&quot;, {angle: 60})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;).rotate(byAngle(60));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;).rotate(byAngle(60));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;180_yacaar.png\\&quot; &gt; &lt;Transformation angle=\\&quot;60\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;180_yacaar.png\\&quot; &gt;\\n\\t&lt;Transformation angle=\\&quot;60\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;).rotate(byAngle(60));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;).rotate(byAngle(60));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;180_yacaar.png\\&quot; &gt; &lt;cld-transformation angle=\\&quot;60\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;180_yacaar.png\\&quot; &gt;\\n\\t&lt;cld-transformation angle=\\&quot;60\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;).rotate(byAngle(60));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;).rotate(byAngle(60));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;180_yacaar.png\\&quot; &gt; &lt;cl-transformation angle=\\&quot;60\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;180_yacaar.png\\&quot; &gt;\\n\\t&lt;cl-transformation angle=\\&quot;60\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;).rotate(byAngle(60));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;).rotate(byAngle(60));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;180_yacaar.png&#039;, {angle: 60}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;180_yacaar.png&#039;, {angle: 60}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;180_yacaar.png\\&quot;).image(angle=60)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;180_yacaar.png\\&quot;).image(angle=60)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;180_yacaar.png&#039;))\\n\\t-&gt;rotate(Rotate::byAngle(60));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;180_yacaar.png&#039;))\\n\\t-&gt;rotate(Rotate::byAngle(60));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;180_yacaar.png\\&quot;, array(\\&quot;angle\\&quot;=&gt;60))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;180_yacaar.png\\&quot;, array(\\&quot;angle\\&quot;=&gt;60))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().angle(60)).imageTag(\\&quot;180_yacaar.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().angle(60)).imageTag(\\&quot;180_yacaar.png\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;180_yacaar.png\\&quot;, angle: 60)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;180_yacaar.png\\&quot;, angle: 60)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Angle(60)).BuildImageTag(\\&quot;180_yacaar.png\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Angle(60)).BuildImageTag(\\&quot;180_yacaar.png\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;180_yacaar.png&#039;).transformation(Transformation()\\n\\t.rotate(Rotate.byAngle(60)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;180_yacaar.png&#039;).transformation(Transformation()\\n\\t.rotate(Rotate.byAngle(60)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAngle(60)).generate(\\&quot;180_yacaar.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAngle(60)).generate(\\&quot;180_yacaar.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().angle(60)).generate(\\&quot;180_yacaar.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().angle(60)).generate(\\&quot;180_yacaar.png\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;180_yacaar.png&#039;).transformation(Transformation()\\n\\t.rotate(Rotate.byAngle(60)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;180_yacaar.png&#039;).transformation(Transformation()\\n\\t.rotate(Rotate.byAngle(60)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;180_yacaar.png\\&quot;)\\n\\t rotate(Rotate.byAngle(60)) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;180_yacaar.png\\&quot;)\\n\\t rotate(Rotate.byAngle(60)) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;180_yacaar.png\\&quot;, {angle: 60})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;180_yacaar.png\\&quot;, {angle: 60})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;).rotate(byAngle(60));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;).rotate(byAngle(60));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/a_60\\\/180_yacaar.png&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;angle&quot;:&quot;60&quot;}],&quot;transformation_string&quot;:&quot;a_60&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;180_yacaar.png&quot;,&quot;extension&quot;:&quot;png&quot;,&quot;format&quot;:&quot;png&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/a_60\/180_yacaar.png\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/a_60\/180_yacaar.png\" alt=\"Logo\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"246\" height=\"246\"\/><\/a><\/p>\n<p>Programmatically, you can rotate images with only one codeline in Ruby, PHP, Python, Node.js, Java, JavaScript, JQuery, React, Angular, .Net, Android, and iOs.<\/p>\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p>A positive value for the <code>angle<\/code> parameter rotates the image clockwise; a negative value rotates it counterclockwise.<\/p><\/div>\n<h2>Enhancing Rotated Image Programmatically<\/h2>\n<p>Cloudinary offers dozens of transformation effects for images. For example, for a <strong>shadow effect<\/strong> to the preceding rotated image, add a shadow-transformation parameter (<code>e_shadow<\/code>) before the <code>angle<\/code> parameter (<code>a_60<\/code>) in the URL, like this:<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;180_yacaar.png\\&quot;, {transformation: [ {effect: \\&quot;shadow:40\\&quot;}, {angle: 60} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;180_yacaar.png\\&quot;, {transformation: [\\n  {effect: \\&quot;shadow:40\\&quot;},\\n  {angle: 60}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;)\\n  .effect(shadow().strength(40))\\n  .rotate(byAngle(60));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;)\\n  .effect(shadow().strength(40))\\n  .rotate(byAngle(60));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;180_yacaar.png\\&quot; &gt; &lt;Transformation effect=\\&quot;shadow:40\\&quot; \\\/&gt; &lt;Transformation angle=\\&quot;60\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;180_yacaar.png\\&quot; &gt;\\n\\t&lt;Transformation effect=\\&quot;shadow:40\\&quot; \\\/&gt;\\n\\t&lt;Transformation angle=\\&quot;60\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;)\\n  .effect(shadow().strength(40))\\n  .rotate(byAngle(60));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;)\\n  .effect(shadow().strength(40))\\n  .rotate(byAngle(60));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;180_yacaar.png\\&quot; &gt; &lt;cld-transformation effect=\\&quot;shadow:40\\&quot; \\\/&gt; &lt;cld-transformation angle=\\&quot;60\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;180_yacaar.png\\&quot; &gt;\\n\\t&lt;cld-transformation effect=\\&quot;shadow:40\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation angle=\\&quot;60\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;)\\n  .effect(shadow().strength(40))\\n  .rotate(byAngle(60));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;)\\n  .effect(shadow().strength(40))\\n  .rotate(byAngle(60));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;180_yacaar.png\\&quot; &gt; &lt;cl-transformation effect=\\&quot;shadow:40\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation angle=\\&quot;60\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;180_yacaar.png\\&quot; &gt;\\n\\t&lt;cl-transformation effect=\\&quot;shadow:40\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation angle=\\&quot;60\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;)\\n  .effect(shadow().strength(40))\\n  .rotate(byAngle(60));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;)\\n  .effect(shadow().strength(40))\\n  .rotate(byAngle(60));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;180_yacaar.png&#039;, {transformation: [ {effect: \\&quot;shadow:40\\&quot;}, {angle: 60} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;180_yacaar.png&#039;, {transformation: [\\n  {effect: \\&quot;shadow:40\\&quot;},\\n  {angle: 60}\\n  ]}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;180_yacaar.png\\&quot;).image(transformation=[ {&#039;effect&#039;: \\&quot;shadow:40\\&quot;}, {&#039;angle&#039;: 60} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;180_yacaar.png\\&quot;).image(transformation=[\\n  {&#039;effect&#039;: \\&quot;shadow:40\\&quot;},\\n  {&#039;angle&#039;: 60}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;180_yacaar.png&#039;))\\n\\t-&gt;effect(Effect::shadow()-&gt;strength(40))\\n\\t-&gt;rotate(Rotate::byAngle(60));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;180_yacaar.png&#039;))\\n\\t-&gt;effect(Effect::shadow()-&gt;strength(40))\\n\\t-&gt;rotate(Rotate::byAngle(60));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;180_yacaar.png\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array( array(\\&quot;effect\\&quot;=&gt;\\&quot;shadow:40\\&quot;), array(\\&quot;angle\\&quot;=&gt;60) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;180_yacaar.png\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;effect\\&quot;=&gt;\\&quot;shadow:40\\&quot;),\\n  array(\\&quot;angle\\&quot;=&gt;60)\\n  )))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().effect(\\&quot;shadow:40\\&quot;).chain() .angle(60)).imageTag(\\&quot;180_yacaar.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .effect(\\&quot;shadow:40\\&quot;).chain()\\n  .angle(60)).imageTag(\\&quot;180_yacaar.png\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;180_yacaar.png\\&quot;, transformation: [ {effect: \\&quot;shadow:40\\&quot;}, {angle: 60} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;180_yacaar.png\\&quot;, transformation: [\\n  {effect: \\&quot;shadow:40\\&quot;},\\n  {angle: 60}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect(\\&quot;shadow:40\\&quot;).Chain() .Angle(60)).BuildImageTag(\\&quot;180_yacaar.png\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n  .Effect(\\&quot;shadow:40\\&quot;).Chain()\\n  .Angle(60)).BuildImageTag(\\&quot;180_yacaar.png\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;180_yacaar.png&#039;).transformation(Transformation()\\n\\t.effect(Effect.shadow().strength(40))\\n\\t.rotate(Rotate.byAngle(60)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;180_yacaar.png&#039;).transformation(Transformation()\\n\\t.effect(Effect.shadow().strength(40))\\n\\t.rotate(Rotate.byAngle(60)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect(\\&quot;shadow:40\\&quot;).chain() .setAngle(60)).generate(\\&quot;180_yacaar.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\\n  .setEffect(\\&quot;shadow:40\\&quot;).chain()\\n  .setAngle(60)).generate(\\&quot;180_yacaar.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().effect(\\&quot;shadow:40\\&quot;).chain() .angle(60)).generate(\\&quot;180_yacaar.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .effect(\\&quot;shadow:40\\&quot;).chain()\\n  .angle(60)).generate(\\&quot;180_yacaar.png\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;180_yacaar.png&#039;).transformation(Transformation()\\n\\t.effect(Effect.shadow().strength(40))\\n\\t.rotate(Rotate.byAngle(60)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;180_yacaar.png&#039;).transformation(Transformation()\\n\\t.effect(Effect.shadow().strength(40))\\n\\t.rotate(Rotate.byAngle(60)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;180_yacaar.png\\&quot;)\\n\\t effect(Effect.shadow() { strength(40) })\\n\\t rotate(Rotate.byAngle(60)) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;180_yacaar.png\\&quot;)\\n\\t effect(Effect.shadow() { strength(40) })\\n\\t rotate(Rotate.byAngle(60)) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;180_yacaar.png\\&quot;, {transformation: [ {effect: \\&quot;shadow:40\\&quot;}, {angle: 60} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;180_yacaar.png\\&quot;, {transformation: [\\n  {effect: \\&quot;shadow:40\\&quot;},\\n  {angle: 60}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;)\\n  .effect(shadow().strength(40))\\n  .rotate(byAngle(60));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;)\\n  .effect(shadow().strength(40))\\n  .rotate(byAngle(60));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/e_shadow:40\\\/a_60\\\/180_yacaar.png&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;effect&quot;:&quot;shadow:40&quot;},{&quot;angle&quot;:&quot;60&quot;}],&quot;transformation_string&quot;:&quot;e_shadow:40\\\/a_60&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;180_yacaar.png&quot;,&quot;extension&quot;:&quot;png&quot;,&quot;format&quot;:&quot;png&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_shadow:40\/a_60\/180_yacaar.png\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_shadow:40\/a_60\/180_yacaar.png\" alt=\"Logo\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"258\" height=\"258\"\/><\/a><\/p>\n<p>Also, you can customize the <code>x<\/code> and <code>y<\/code> shadow offsets and change the shadow\u2019s color (<code>co<\/code>) by specifying the values you desire in the parameters, for example:<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;180_yacaar.png\\&quot;, {transformation: [ {effect: \\&quot;shadow:40\\&quot;, x: 15, y: 15, color: \\&quot;yellow\\&quot;}, {angle: 60} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;180_yacaar.png\\&quot;, {transformation: [\\n  {effect: \\&quot;shadow:40\\&quot;, x: 15, y: 15, color: \\&quot;yellow\\&quot;},\\n  {angle: 60}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;)\\n  .effect(\\n    shadow()\\n      .strength(40)\\n      .color(\\&quot;yellow\\&quot;)\\n      .offsetX(15)\\n      .offsetY(15)\\n  )\\n  .rotate(byAngle(60));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;)\\n  .effect(\\n    shadow()\\n      .strength(40)\\n      .color(\\&quot;yellow\\&quot;)\\n      .offsetX(15)\\n      .offsetY(15)\\n  )\\n  .rotate(byAngle(60));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;180_yacaar.png\\&quot; &gt; &lt;Transformation effect=\\&quot;shadow:40\\&quot; x=\\&quot;15\\&quot; y=\\&quot;15\\&quot; color=\\&quot;yellow\\&quot; \\\/&gt; &lt;Transformation angle=\\&quot;60\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;180_yacaar.png\\&quot; &gt;\\n\\t&lt;Transformation effect=\\&quot;shadow:40\\&quot; x=\\&quot;15\\&quot; y=\\&quot;15\\&quot; color=\\&quot;yellow\\&quot; \\\/&gt;\\n\\t&lt;Transformation angle=\\&quot;60\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;)\\n  .effect(\\n    shadow()\\n      .strength(40)\\n      .color(\\&quot;yellow\\&quot;)\\n      .offsetX(15)\\n      .offsetY(15)\\n  )\\n  .rotate(byAngle(60));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;)\\n  .effect(\\n    shadow()\\n      .strength(40)\\n      .color(\\&quot;yellow\\&quot;)\\n      .offsetX(15)\\n      .offsetY(15)\\n  )\\n  .rotate(byAngle(60));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;180_yacaar.png\\&quot; &gt; &lt;cld-transformation effect=\\&quot;shadow:40\\&quot; x=\\&quot;15\\&quot; y=\\&quot;15\\&quot; color=\\&quot;yellow\\&quot; \\\/&gt; &lt;cld-transformation angle=\\&quot;60\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;180_yacaar.png\\&quot; &gt;\\n\\t&lt;cld-transformation effect=\\&quot;shadow:40\\&quot; x=\\&quot;15\\&quot; y=\\&quot;15\\&quot; color=\\&quot;yellow\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation angle=\\&quot;60\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;)\\n  .effect(\\n    shadow()\\n      .strength(40)\\n      .color(\\&quot;yellow\\&quot;)\\n      .offsetX(15)\\n      .offsetY(15)\\n  )\\n  .rotate(byAngle(60));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;)\\n  .effect(\\n    shadow()\\n      .strength(40)\\n      .color(\\&quot;yellow\\&quot;)\\n      .offsetX(15)\\n      .offsetY(15)\\n  )\\n  .rotate(byAngle(60));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;180_yacaar.png\\&quot; &gt; &lt;cl-transformation effect=\\&quot;shadow:40\\&quot; x=\\&quot;15\\&quot; y=\\&quot;15\\&quot; color=\\&quot;yellow\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation angle=\\&quot;60\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;180_yacaar.png\\&quot; &gt;\\n\\t&lt;cl-transformation effect=\\&quot;shadow:40\\&quot; x=\\&quot;15\\&quot; y=\\&quot;15\\&quot; color=\\&quot;yellow\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation angle=\\&quot;60\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;)\\n  .effect(\\n    shadow()\\n      .strength(40)\\n      .color(\\&quot;yellow\\&quot;)\\n      .offsetX(15)\\n      .offsetY(15)\\n  )\\n  .rotate(byAngle(60));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;)\\n  .effect(\\n    shadow()\\n      .strength(40)\\n      .color(\\&quot;yellow\\&quot;)\\n      .offsetX(15)\\n      .offsetY(15)\\n  )\\n  .rotate(byAngle(60));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;180_yacaar.png&#039;, {transformation: [ {effect: \\&quot;shadow:40\\&quot;, x: 15, y: 15, color: \\&quot;yellow\\&quot;}, {angle: 60} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;180_yacaar.png&#039;, {transformation: [\\n  {effect: \\&quot;shadow:40\\&quot;, x: 15, y: 15, color: \\&quot;yellow\\&quot;},\\n  {angle: 60}\\n  ]}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;180_yacaar.png\\&quot;).image(transformation=[ {&#039;effect&#039;: \\&quot;shadow:40\\&quot;, &#039;x&#039;: 15, &#039;y&#039;: 15, &#039;color&#039;: \\&quot;yellow\\&quot;}, {&#039;angle&#039;: 60} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;180_yacaar.png\\&quot;).image(transformation=[\\n  {&#039;effect&#039;: \\&quot;shadow:40\\&quot;, &#039;x&#039;: 15, &#039;y&#039;: 15, &#039;color&#039;: \\&quot;yellow\\&quot;},\\n  {&#039;angle&#039;: 60}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;180_yacaar.png&#039;))\\n\\t-&gt;effect(Effect::shadow()-&gt;strength(40)\\n\\t-&gt;color(Color::YELLOW)\\n-&gt;offsetX(15)\\n-&gt;offsetY(15))\\n\\t-&gt;rotate(Rotate::byAngle(60));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;180_yacaar.png&#039;))\\n\\t-&gt;effect(Effect::shadow()-&gt;strength(40)\\n\\t-&gt;color(Color::YELLOW)\\n-&gt;offsetX(15)\\n-&gt;offsetY(15))\\n\\t-&gt;rotate(Rotate::byAngle(60));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;180_yacaar.png\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array( array(\\&quot;effect\\&quot;=&gt;\\&quot;shadow:40\\&quot;, \\&quot;x\\&quot;=&gt;15, \\&quot;y\\&quot;=&gt;15, \\&quot;color\\&quot;=&gt;\\&quot;yellow\\&quot;), array(\\&quot;angle\\&quot;=&gt;60) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;180_yacaar.png\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;effect\\&quot;=&gt;\\&quot;shadow:40\\&quot;, \\&quot;x\\&quot;=&gt;15, \\&quot;y\\&quot;=&gt;15, \\&quot;color\\&quot;=&gt;\\&quot;yellow\\&quot;),\\n  array(\\&quot;angle\\&quot;=&gt;60)\\n  )))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().effect(\\&quot;shadow:40\\&quot;).x(15).y(15).color(\\&quot;yellow\\&quot;).chain() .angle(60)).imageTag(\\&quot;180_yacaar.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .effect(\\&quot;shadow:40\\&quot;).x(15).y(15).color(\\&quot;yellow\\&quot;).chain()\\n  .angle(60)).imageTag(\\&quot;180_yacaar.png\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;180_yacaar.png\\&quot;, transformation: [ {effect: \\&quot;shadow:40\\&quot;, x: 15, y: 15, color: \\&quot;yellow\\&quot;}, {angle: 60} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;180_yacaar.png\\&quot;, transformation: [\\n  {effect: \\&quot;shadow:40\\&quot;, x: 15, y: 15, color: \\&quot;yellow\\&quot;},\\n  {angle: 60}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect(\\&quot;shadow:40\\&quot;).X(15).Y(15).Color(\\&quot;yellow\\&quot;).Chain() .Angle(60)).BuildImageTag(\\&quot;180_yacaar.png\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n  .Effect(\\&quot;shadow:40\\&quot;).X(15).Y(15).Color(\\&quot;yellow\\&quot;).Chain()\\n  .Angle(60)).BuildImageTag(\\&quot;180_yacaar.png\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;180_yacaar.png&#039;).transformation(Transformation()\\n\\t.effect(Effect.shadow().strength(40)\\n\\t.color(Color.YELLOW)\\n.offsetX(15)\\n.offsetY(15))\\n\\t.rotate(Rotate.byAngle(60)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;180_yacaar.png&#039;).transformation(Transformation()\\n\\t.effect(Effect.shadow().strength(40)\\n\\t.color(Color.YELLOW)\\n.offsetX(15)\\n.offsetY(15))\\n\\t.rotate(Rotate.byAngle(60)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect(\\&quot;shadow:40\\&quot;).setX(15).setY(15).setColor(\\&quot;yellow\\&quot;).chain() .setAngle(60)).generate(\\&quot;180_yacaar.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\\n  .setEffect(\\&quot;shadow:40\\&quot;).setX(15).setY(15).setColor(\\&quot;yellow\\&quot;).chain()\\n  .setAngle(60)).generate(\\&quot;180_yacaar.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().effect(\\&quot;shadow:40\\&quot;).x(15).y(15).color(\\&quot;yellow\\&quot;).chain() .angle(60)).generate(\\&quot;180_yacaar.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .effect(\\&quot;shadow:40\\&quot;).x(15).y(15).color(\\&quot;yellow\\&quot;).chain()\\n  .angle(60)).generate(\\&quot;180_yacaar.png\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;180_yacaar.png&#039;).transformation(Transformation()\\n\\t.effect(Effect.shadow().strength(40)\\n\\t.color(Color.YELLOW)\\n.offsetX(15)\\n.offsetY(15))\\n\\t.rotate(Rotate.byAngle(60)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;180_yacaar.png&#039;).transformation(Transformation()\\n\\t.effect(Effect.shadow().strength(40)\\n\\t.color(Color.YELLOW)\\n.offsetX(15)\\n.offsetY(15))\\n\\t.rotate(Rotate.byAngle(60)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;180_yacaar.png\\&quot;)\\n\\t effect(Effect.shadow() { strength(40)\\n\\t color(Color.YELLOW)\\n offsetX(15)\\n offsetY(15) })\\n\\t rotate(Rotate.byAngle(60)) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;180_yacaar.png\\&quot;)\\n\\t effect(Effect.shadow() { strength(40)\\n\\t color(Color.YELLOW)\\n offsetX(15)\\n offsetY(15) })\\n\\t rotate(Rotate.byAngle(60)) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;180_yacaar.png\\&quot;, {transformation: [ {effect: \\&quot;shadow:40\\&quot;, x: 15, y: 15, color: \\&quot;yellow\\&quot;}, {angle: 60} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;180_yacaar.png\\&quot;, {transformation: [\\n  {effect: \\&quot;shadow:40\\&quot;, x: 15, y: 15, color: \\&quot;yellow\\&quot;},\\n  {angle: 60}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;)\\n  .effect(\\n    shadow()\\n      .strength(40)\\n      .color(\\&quot;yellow\\&quot;)\\n      .offsetX(15)\\n      .offsetY(15)\\n  )\\n  .rotate(byAngle(60));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;)\\n  .effect(\\n    shadow()\\n      .strength(40)\\n      .color(\\&quot;yellow\\&quot;)\\n      .offsetX(15)\\n      .offsetY(15)\\n  )\\n  .rotate(byAngle(60));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/e_shadow:40,x_15,y_15,co_yellow\\\/a_60\\\/180_yacaar.png&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;effect&quot;:&quot;shadow:40&quot;,&quot;x&quot;:&quot;15&quot;,&quot;y&quot;:&quot;15&quot;,&quot;color&quot;:&quot;yellow&quot;},{&quot;angle&quot;:&quot;60&quot;}],&quot;transformation_string&quot;:&quot;e_shadow:40,x_15,y_15,co_yellow\\\/a_60&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;180_yacaar.png&quot;,&quot;extension&quot;:&quot;png&quot;,&quot;format&quot;:&quot;png&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_shadow:40,x_15,y_15,co_yellow\/a_60\/180_yacaar.png\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_shadow:40,x_15,y_15,co_yellow\/a_60\/180_yacaar.png\" alt=\"Logo\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"273\" height=\"273\"\/><\/a><\/p>\n<h2>Placing an Image Over Another<\/h2>\n<p>For a displacement effect, place one image over another by adding the <code>e_displace<\/code> parameter to the URL, as in this example:<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;glass.jpg\\&quot;, {transformation: [ {overlay: \\&quot;sample\\&quot;, width: 182, height: 198}, {height: \\&quot;2.0\\&quot;, width: \\&quot;1.0\\&quot;, crop: \\&quot;pad\\&quot;}, {overlay: \\&quot;radial_ipdlli\\&quot;, effect: \\&quot;displace\\&quot;, y: -8}, {effect: \\&quot;trim\\&quot;}, {flags: \\&quot;layer_apply\\&quot;, x: -26, y: 28} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;glass.jpg\\&quot;, {transformation: [\\n  {overlay: \\&quot;sample\\&quot;, width: 182, height: 198},\\n  {height: \\&quot;2.0\\&quot;, width: \\&quot;1.0\\&quot;, crop: \\&quot;pad\\&quot;},\\n  {overlay: \\&quot;radial_ipdlli\\&quot;, effect: \\&quot;displace\\&quot;, y: -8},\\n  {effect: \\&quot;trim\\&quot;},\\n  {flags: \\&quot;layer_apply\\&quot;, x: -26, y: 28}\\n  ]})&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;glass.jpg\\&quot;).addTransformation(\\n  \\&quot;l_sample,w_182,h_198\\\/c_pad,h_2.0,w_1.0\\\/l_radial_ipdlli,e_displace,y_-8\\\/e_trim\\\/fl_layer_apply,x_-26,y_28\\&quot;\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;glass.jpg\\&quot;).addTransformation(\\n  \\&quot;l_sample,w_182,h_198\\\/c_pad,h_2.0,w_1.0\\\/l_radial_ipdlli,e_displace,y_-8\\\/e_trim\\\/fl_layer_apply,x_-26,y_28\\&quot;\\n);&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;glass.jpg\\&quot; &gt; &lt;Transformation overlay=\\&quot;sample\\&quot; width=\\&quot;182\\&quot; height=\\&quot;198\\&quot; \\\/&gt; &lt;Transformation height=\\&quot;2.0\\&quot; width=\\&quot;1.0\\&quot; crop=\\&quot;pad\\&quot; \\\/&gt; &lt;Transformation overlay=\\&quot;radial_ipdlli\\&quot; effect=\\&quot;displace\\&quot; y=\\&quot;-8\\&quot; \\\/&gt; &lt;Transformation effect=\\&quot;trim\\&quot; \\\/&gt; &lt;Transformation flags=\\&quot;layer_apply\\&quot; x=\\&quot;-26\\&quot; y=\\&quot;28\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;glass.jpg\\&quot; &gt;\\n\\t&lt;Transformation overlay=\\&quot;sample\\&quot; width=\\&quot;182\\&quot; height=\\&quot;198\\&quot; \\\/&gt;\\n\\t&lt;Transformation height=\\&quot;2.0\\&quot; width=\\&quot;1.0\\&quot; crop=\\&quot;pad\\&quot; \\\/&gt;\\n\\t&lt;Transformation overlay=\\&quot;radial_ipdlli\\&quot; effect=\\&quot;displace\\&quot; y=\\&quot;-8\\&quot; \\\/&gt;\\n\\t&lt;Transformation effect=\\&quot;trim\\&quot; \\\/&gt;\\n\\t&lt;Transformation flags=\\&quot;layer_apply\\&quot; x=\\&quot;-26\\&quot; y=\\&quot;28\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;glass.jpg\\&quot;).addTransformation(\\n  \\&quot;l_sample,w_182,h_198\\\/c_pad,h_2.0,w_1.0\\\/l_radial_ipdlli,e_displace,y_-8\\\/e_trim\\\/fl_layer_apply,x_-26,y_28\\&quot;\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;glass.jpg\\&quot;).addTransformation(\\n  \\&quot;l_sample,w_182,h_198\\\/c_pad,h_2.0,w_1.0\\\/l_radial_ipdlli,e_displace,y_-8\\\/e_trim\\\/fl_layer_apply,x_-26,y_28\\&quot;\\n);&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;glass.jpg\\&quot; &gt; &lt;cld-transformation :overlay=\\&quot;sample\\&quot; width=\\&quot;182\\&quot; height=\\&quot;198\\&quot; \\\/&gt; &lt;cld-transformation height=\\&quot;2.0\\&quot; width=\\&quot;1.0\\&quot; crop=\\&quot;pad\\&quot; \\\/&gt; &lt;cld-transformation :overlay=\\&quot;radial_ipdlli\\&quot; effect=\\&quot;displace\\&quot; y=\\&quot;-8\\&quot; \\\/&gt; &lt;cld-transformation effect=\\&quot;trim\\&quot; \\\/&gt; &lt;cld-transformation flags=\\&quot;layer_apply\\&quot; x=\\&quot;-26\\&quot; y=\\&quot;28\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;glass.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation :overlay=\\&quot;sample\\&quot; width=\\&quot;182\\&quot; height=\\&quot;198\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation height=\\&quot;2.0\\&quot; width=\\&quot;1.0\\&quot; crop=\\&quot;pad\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation :overlay=\\&quot;radial_ipdlli\\&quot; effect=\\&quot;displace\\&quot; y=\\&quot;-8\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation effect=\\&quot;trim\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation flags=\\&quot;layer_apply\\&quot; x=\\&quot;-26\\&quot; y=\\&quot;28\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;glass.jpg\\&quot;).addTransformation(\\n  \\&quot;l_sample,w_182,h_198\\\/c_pad,h_2.0,w_1.0\\\/l_radial_ipdlli,e_displace,y_-8\\\/e_trim\\\/fl_layer_apply,x_-26,y_28\\&quot;\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;glass.jpg\\&quot;).addTransformation(\\n  \\&quot;l_sample,w_182,h_198\\\/c_pad,h_2.0,w_1.0\\\/l_radial_ipdlli,e_displace,y_-8\\\/e_trim\\\/fl_layer_apply,x_-26,y_28\\&quot;\\n);&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;glass.jpg\\&quot; &gt; &lt;cl-transformation overlay=\\&quot;sample\\&quot; width=\\&quot;182\\&quot; height=\\&quot;198\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation height=\\&quot;2.0\\&quot; width=\\&quot;1.0\\&quot; crop=\\&quot;pad\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation overlay=\\&quot;radial_ipdlli\\&quot; effect=\\&quot;displace\\&quot; y=\\&quot;-8\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation effect=\\&quot;trim\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation flags=\\&quot;layer_apply\\&quot; x=\\&quot;-26\\&quot; y=\\&quot;28\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;glass.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation overlay=\\&quot;sample\\&quot; width=\\&quot;182\\&quot; height=\\&quot;198\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation height=\\&quot;2.0\\&quot; width=\\&quot;1.0\\&quot; crop=\\&quot;pad\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation overlay=\\&quot;radial_ipdlli\\&quot; effect=\\&quot;displace\\&quot; y=\\&quot;-8\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation effect=\\&quot;trim\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation flags=\\&quot;layer_apply\\&quot; x=\\&quot;-26\\&quot; y=\\&quot;28\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;glass.jpg\\&quot;).addTransformation(\\n  \\&quot;l_sample,w_182,h_198\\\/c_pad,h_2.0,w_1.0\\\/l_radial_ipdlli,e_displace,y_-8\\\/e_trim\\\/fl_layer_apply,x_-26,y_28\\&quot;\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;glass.jpg\\&quot;).addTransformation(\\n  \\&quot;l_sample,w_182,h_198\\\/c_pad,h_2.0,w_1.0\\\/l_radial_ipdlli,e_displace,y_-8\\\/e_trim\\\/fl_layer_apply,x_-26,y_28\\&quot;\\n);&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;glass.jpg&#039;, {transformation: [ {overlay: new cloudinary.Layer().publicId(\\&quot;sample\\&quot;), width: 182, height: 198}, {height: \\&quot;2.0\\&quot;, width: \\&quot;1.0\\&quot;, crop: \\&quot;pad\\&quot;}, {overlay: new cloudinary.Layer().publicId(\\&quot;radial_ipdlli\\&quot;), effect: \\&quot;displace\\&quot;, y: -8}, {effect: \\&quot;trim\\&quot;}, {flags: \\&quot;layer_apply\\&quot;, x: -26, y: 28} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;glass.jpg&#039;, {transformation: [\\n  {overlay: new cloudinary.Layer().publicId(\\&quot;sample\\&quot;), width: 182, height: 198},\\n  {height: \\&quot;2.0\\&quot;, width: \\&quot;1.0\\&quot;, crop: \\&quot;pad\\&quot;},\\n  {overlay: new cloudinary.Layer().publicId(\\&quot;radial_ipdlli\\&quot;), effect: \\&quot;displace\\&quot;, y: -8},\\n  {effect: \\&quot;trim\\&quot;},\\n  {flags: \\&quot;layer_apply\\&quot;, x: -26, y: 28}\\n  ]}).toHtml();&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;glass.jpg\\&quot;).image(transformation=[ {&#039;overlay&#039;: \\&quot;sample\\&quot;, &#039;width&#039;: 182, &#039;height&#039;: 198}, {&#039;height&#039;: \\&quot;2.0\\&quot;, &#039;width&#039;: \\&quot;1.0\\&quot;, &#039;crop&#039;: \\&quot;pad\\&quot;}, {&#039;overlay&#039;: \\&quot;radial_ipdlli\\&quot;, &#039;effect&#039;: \\&quot;displace\\&quot;, &#039;y&#039;: -8}, {&#039;effect&#039;: \\&quot;trim\\&quot;}, {&#039;flags&#039;: \\&quot;layer_apply\\&quot;, &#039;x&#039;: -26, &#039;y&#039;: 28} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;glass.jpg\\&quot;).image(transformation=[\\n  {&#039;overlay&#039;: \\&quot;sample\\&quot;, &#039;width&#039;: 182, &#039;height&#039;: 198},\\n  {&#039;height&#039;: \\&quot;2.0\\&quot;, &#039;width&#039;: \\&quot;1.0\\&quot;, &#039;crop&#039;: \\&quot;pad\\&quot;},\\n  {&#039;overlay&#039;: \\&quot;radial_ipdlli\\&quot;, &#039;effect&#039;: \\&quot;displace\\&quot;, &#039;y&#039;: -8},\\n  {&#039;effect&#039;: \\&quot;trim\\&quot;},\\n  {&#039;flags&#039;: \\&quot;layer_apply\\&quot;, &#039;x&#039;: -26, &#039;y&#039;: 28}\\n  ])&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;glass.jpg&#039;))\\n\\t-&gt;addTransformation(\\&quot;l_sample,w_182,h_198\\\/c_pad,h_2.0,w_1.0\\\/l_radial_ipdlli,e_displace,y_-8\\\/e_trim\\\/fl_layer_apply,x_-26,y_28\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;glass.jpg&#039;))\\n\\t-&gt;addTransformation(\\&quot;l_sample,w_182,h_198\\\/c_pad,h_2.0,w_1.0\\\/l_radial_ipdlli,e_displace,y_-8\\\/e_trim\\\/fl_layer_apply,x_-26,y_28\\&quot;);&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;glass.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array( array(\\&quot;overlay\\&quot;=&gt;\\&quot;sample\\&quot;, \\&quot;width\\&quot;=&gt;182, \\&quot;height\\&quot;=&gt;198), array(\\&quot;height\\&quot;=&gt;\\&quot;2.0\\&quot;, \\&quot;width\\&quot;=&gt;\\&quot;1.0\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;pad\\&quot;), array(\\&quot;overlay\\&quot;=&gt;\\&quot;radial_ipdlli\\&quot;, \\&quot;effect\\&quot;=&gt;\\&quot;displace\\&quot;, \\&quot;y\\&quot;=&gt;-8), array(\\&quot;effect\\&quot;=&gt;\\&quot;trim\\&quot;), array(\\&quot;flags\\&quot;=&gt;\\&quot;layer_apply\\&quot;, \\&quot;x\\&quot;=&gt;-26, \\&quot;y\\&quot;=&gt;28) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;glass.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;overlay\\&quot;=&gt;\\&quot;sample\\&quot;, \\&quot;width\\&quot;=&gt;182, \\&quot;height\\&quot;=&gt;198),\\n  array(\\&quot;height\\&quot;=&gt;\\&quot;2.0\\&quot;, \\&quot;width\\&quot;=&gt;\\&quot;1.0\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;pad\\&quot;),\\n  array(\\&quot;overlay\\&quot;=&gt;\\&quot;radial_ipdlli\\&quot;, \\&quot;effect\\&quot;=&gt;\\&quot;displace\\&quot;, \\&quot;y\\&quot;=&gt;-8),\\n  array(\\&quot;effect\\&quot;=&gt;\\&quot;trim\\&quot;),\\n  array(\\&quot;flags\\&quot;=&gt;\\&quot;layer_apply\\&quot;, \\&quot;x\\&quot;=&gt;-26, \\&quot;y\\&quot;=&gt;28)\\n  )))&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId(\\&quot;sample\\&quot;)).width(182).height(198).chain() .height(2.0).width(1.0).crop(\\&quot;pad\\&quot;).chain() .overlay(new Layer().publicId(\\&quot;radial_ipdlli\\&quot;)).effect(\\&quot;displace\\&quot;).y(-8).chain() .effect(\\&quot;trim\\&quot;).chain() .flags(\\&quot;layer_apply\\&quot;).x(-26).y(28)).imageTag(\\&quot;glass.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .overlay(new Layer().publicId(\\&quot;sample\\&quot;)).width(182).height(198).chain()\\n  .height(2.0).width(1.0).crop(\\&quot;pad\\&quot;).chain()\\n  .overlay(new Layer().publicId(\\&quot;radial_ipdlli\\&quot;)).effect(\\&quot;displace\\&quot;).y(-8).chain()\\n  .effect(\\&quot;trim\\&quot;).chain()\\n  .flags(\\&quot;layer_apply\\&quot;).x(-26).y(28)).imageTag(\\&quot;glass.jpg\\&quot;);&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;glass.jpg\\&quot;, transformation: [ {overlay: \\&quot;sample\\&quot;, width: 182, height: 198}, {height: 2.0, width: 1.0, crop: \\&quot;pad\\&quot;}, {overlay: \\&quot;radial_ipdlli\\&quot;, effect: \\&quot;displace\\&quot;, y: -8}, {effect: \\&quot;trim\\&quot;}, {flags: \\&quot;layer_apply\\&quot;, x: -26, y: 28} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;glass.jpg\\&quot;, transformation: [\\n  {overlay: \\&quot;sample\\&quot;, width: 182, height: 198},\\n  {height: 2.0, width: 1.0, crop: \\&quot;pad\\&quot;},\\n  {overlay: \\&quot;radial_ipdlli\\&quot;, effect: \\&quot;displace\\&quot;, y: -8},\\n  {effect: \\&quot;trim\\&quot;},\\n  {flags: \\&quot;layer_apply\\&quot;, x: -26, y: 28}\\n  ])&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId(\\&quot;sample\\&quot;)).Width(182).Height(198).Chain() .Height(2.0).Width(1.0).Crop(\\&quot;pad\\&quot;).Chain() .Overlay(new Layer().PublicId(\\&quot;radial_ipdlli\\&quot;)).Effect(\\&quot;displace\\&quot;).Y(-8).Chain() .Effect(\\&quot;trim\\&quot;).Chain() .Flags(\\&quot;layer_apply\\&quot;).X(-26).Y(28)).BuildImageTag(\\&quot;glass.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n  .Overlay(new Layer().PublicId(\\&quot;sample\\&quot;)).Width(182).Height(198).Chain()\\n  .Height(2.0).Width(1.0).Crop(\\&quot;pad\\&quot;).Chain()\\n  .Overlay(new Layer().PublicId(\\&quot;radial_ipdlli\\&quot;)).Effect(\\&quot;displace\\&quot;).Y(-8).Chain()\\n  .Effect(\\&quot;trim\\&quot;).Chain()\\n  .Flags(\\&quot;layer_apply\\&quot;).X(-26).Y(28)).BuildImageTag(\\&quot;glass.jpg\\&quot;)&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;glass.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_sample,w_182,h_198\\\/c_pad,h_2.0,w_1.0\\\/l_radial_ipdlli,e_displace,y_-8\\\/e_trim\\\/fl_layer_apply,x_-26,y_28\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;glass.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_sample,w_182,h_198\\\/c_pad,h_2.0,w_1.0\\\/l_radial_ipdlli,e_displace,y_-8\\\/e_trim\\\/fl_layer_apply,x_-26,y_28\\&quot;));&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay(\\&quot;sample\\&quot;).setWidth(182).setHeight(198).chain() .setHeight(2.0).setWidth(1.0).setCrop(\\&quot;pad\\&quot;).chain() .setOverlay(\\&quot;radial_ipdlli\\&quot;).setEffect(\\&quot;displace\\&quot;).setY(-8).chain() .setEffect(\\&quot;trim\\&quot;).chain() .setFlags(\\&quot;layer_apply\\&quot;).setX(-26).setY(28)).generate(\\&quot;glass.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\\n  .setOverlay(\\&quot;sample\\&quot;).setWidth(182).setHeight(198).chain()\\n  .setHeight(2.0).setWidth(1.0).setCrop(\\&quot;pad\\&quot;).chain()\\n  .setOverlay(\\&quot;radial_ipdlli\\&quot;).setEffect(\\&quot;displace\\&quot;).setY(-8).chain()\\n  .setEffect(\\&quot;trim\\&quot;).chain()\\n  .setFlags(\\&quot;layer_apply\\&quot;).setX(-26).setY(28)).generate(\\&quot;glass.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId(\\&quot;sample\\&quot;)).width(182).height(198).chain() .height(2.0).width(1.0).crop(\\&quot;pad\\&quot;).chain() .overlay(new Layer().publicId(\\&quot;radial_ipdlli\\&quot;)).effect(\\&quot;displace\\&quot;).y(-8).chain() .effect(\\&quot;trim\\&quot;).chain() .flags(\\&quot;layer_apply\\&quot;).x(-26).y(28)).generate(\\&quot;glass.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .overlay(new Layer().publicId(\\&quot;sample\\&quot;)).width(182).height(198).chain()\\n  .height(2.0).width(1.0).crop(\\&quot;pad\\&quot;).chain()\\n  .overlay(new Layer().publicId(\\&quot;radial_ipdlli\\&quot;)).effect(\\&quot;displace\\&quot;).y(-8).chain()\\n  .effect(\\&quot;trim\\&quot;).chain()\\n  .flags(\\&quot;layer_apply\\&quot;).x(-26).y(28)).generate(\\&quot;glass.jpg\\&quot;);&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;glass.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_sample,w_182,h_198\\\/c_pad,h_2.0,w_1.0\\\/l_radial_ipdlli,e_displace,y_-8\\\/e_trim\\\/fl_layer_apply,x_-26,y_28\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;glass.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_sample,w_182,h_198\\\/c_pad,h_2.0,w_1.0\\\/l_radial_ipdlli,e_displace,y_-8\\\/e_trim\\\/fl_layer_apply,x_-26,y_28\\&quot;));&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;glass.jpg\\&quot;)\\n\\t addTransformation(\\&quot;l_sample,w_182,h_198\\\/c_pad,h_2.0,w_1.0\\\/l_radial_ipdlli,e_displace,y_-8\\\/e_trim\\\/fl_layer_apply,x_-26,y_28\\&quot;) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;glass.jpg\\&quot;)\\n\\t addTransformation(\\&quot;l_sample,w_182,h_198\\\/c_pad,h_2.0,w_1.0\\\/l_radial_ipdlli,e_displace,y_-8\\\/e_trim\\\/fl_layer_apply,x_-26,y_28\\&quot;) \\n}.generate()&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;glass.jpg\\&quot;, {transformation: [ {overlay: new cloudinary.Layer().publicId(\\&quot;sample\\&quot;), width: 182, height: 198}, {height: \\&quot;2.0\\&quot;, width: \\&quot;1.0\\&quot;, crop: \\&quot;pad\\&quot;}, {overlay: new cloudinary.Layer().publicId(\\&quot;radial_ipdlli\\&quot;), effect: \\&quot;displace\\&quot;, y: -8}, {effect: \\&quot;trim\\&quot;}, {flags: \\&quot;layer_apply\\&quot;, x: -26, y: 28} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;glass.jpg\\&quot;, {transformation: [\\n  {overlay: new cloudinary.Layer().publicId(\\&quot;sample\\&quot;), width: 182, height: 198},\\n  {height: \\&quot;2.0\\&quot;, width: \\&quot;1.0\\&quot;, crop: \\&quot;pad\\&quot;},\\n  {overlay: new cloudinary.Layer().publicId(\\&quot;radial_ipdlli\\&quot;), effect: \\&quot;displace\\&quot;, y: -8},\\n  {effect: \\&quot;trim\\&quot;},\\n  {flags: \\&quot;layer_apply\\&quot;, x: -26, y: 28}\\n  ]})&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;glass.jpg\\&quot;).addTransformation(\\n  \\&quot;l_sample,w_182,h_198\\\/c_pad,h_2.0,w_1.0\\\/l_radial_ipdlli,e_displace,y_-8\\\/e_trim\\\/fl_layer_apply,x_-26,y_28\\&quot;\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;glass.jpg\\&quot;).addTransformation(\\n  \\&quot;l_sample,w_182,h_198\\\/c_pad,h_2.0,w_1.0\\\/l_radial_ipdlli,e_displace,y_-8\\\/e_trim\\\/fl_layer_apply,x_-26,y_28\\&quot;\\n);&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/l_sample,w_182,h_198\\\/c_pad,h_2.0,w_1.0\\\/l_radial_ipdlli,e_displace,y_-8\\\/e_trim\\\/fl_layer_apply,x_-26,y_28\\\/glass.jpg&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;overlay&quot;:&quot;sample&quot;,&quot;width&quot;:&quot;182&quot;,&quot;height&quot;:&quot;198&quot;},{&quot;crop_mode&quot;:&quot;pad&quot;,&quot;height&quot;:&quot;2.0&quot;,&quot;width&quot;:&quot;1.0&quot;},{&quot;overlay&quot;:&quot;radial_ipdlli&quot;,&quot;effect&quot;:&quot;displace&quot;,&quot;y&quot;:&quot;-8&quot;},{&quot;effect&quot;:&quot;trim&quot;},{&quot;flags&quot;:&quot;layer_apply&quot;,&quot;x&quot;:&quot;-26&quot;,&quot;y&quot;:&quot;28&quot;}],&quot;transformation_string&quot;:&quot;l_sample,w_182,h_198\\\/c_pad,h_2.0,w_1.0\\\/l_radial_ipdlli,e_displace,y_-8\\\/e_trim\\\/fl_layer_apply,x_-26,y_28&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;glass.jpg&quot;,&quot;extension&quot;:&quot;jpg&quot;,&quot;format&quot;:&quot;jpg&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;,&quot;error&quot;:{}}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/l_sample,w_182,h_198\/c_pad,h_2.0,w_1.0\/l_radial_ipdlli,e_displace,y_-8\/e_trim\/fl_layer_apply,x_-26,y_28\/glass.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/l_sample,w_182,h_198\/c_pad,h_2.0,w_1.0\/l_radial_ipdlli,e_displace,y_-8\/e_trim\/fl_layer_apply,x_-26,y_28\/glass.jpg\" alt=\"Mug\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"350\" height=\"297\"\/><\/a><\/p>\n<p>For details, see <a href=\"https:\/\/codepen.io\/team\/Cloudinary\/pen\/QxQdwX\">Cloudinary\u2019s demo of product personalization<\/a> on Codepen.<\/p>\n<h2>Removing Image Backgrounds<\/h2>\n<p>To remove the background of an image, e.g., a photo, first\nactivate the <a href=\"https:\/\/cloudinary.com\/users\/login?RelayState=%2Fconsole%2Faddons\">AI Removal Background add-on<\/a> on your Cloudinary Dashboard.<\/p>\n<p>You can then remove an image\u2019s background with the following code:<\/p>\n<cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;Cloudinary::Uploader.upload(\\&quot;baseball.jpg\\&quot;,\\n  :public_id =&gt; \\&quot;baseball_no_bg\\&quot;,\\n  :background_removal =&gt; &#039;cloudinary_ai&#039;,\\n  :notification_url =&gt; \\&quot;https:\\\/\\\/mysite.example.com\\\/hooks\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;Cloudinary::Uploader.upload(\\&quot;baseball.jpg\\&quot;,\\n  :public_id =&gt; \\&quot;baseball_no_bg\\&quot;,\\n  :background_removal =&gt; &#039;cloudinary_ai&#039;,\\n  :notification_url =&gt; \\&quot;https:\\\/\\\/mysite.example.com\\\/hooks\\&quot;)&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;rawCodeSnippet&quot;:&quot;\\\\Cloudinary\\\\Uploader::upload(\\&quot;baseball.jpg\\&quot;, \\n  array(\\n    \\&quot;public_id\\&quot; =&gt; \\&quot;baseball_no_bg\\&quot;,\\n    \\&quot;background_removal\\&quot; =&gt; \\&quot;cloudinary_ai\\&quot;,\\n    \\&quot;notification_url\\&quot; =&gt; \\&quot;https:\\\/\\\/mysite.example.com\\\/hooks\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;\\\\Cloudinary\\\\Uploader::upload(\\&quot;baseball.jpg\\&quot;, \\n  array(\\n    \\&quot;public_id\\&quot; =&gt; \\&quot;baseball_no_bg\\&quot;,\\n    \\&quot;background_removal\\&quot; =&gt; \\&quot;cloudinary_ai\\&quot;,\\n    \\&quot;notification_url\\&quot; =&gt; \\&quot;https:\\\/\\\/mysite.example.com\\\/hooks\\&quot;));&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.uploader.upload(\\&quot;baseball.jpg\\&quot;,\\n  public_id = \\&quot;baseball_no_bg\\&quot;,\\n  background_removal = \\&quot;cloudinary_ai\\&quot;,\\n  notification_url = \\&quot;https:\\\/\\\/mysite.example.com\\\/hooks\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.uploader.upload(\\&quot;baseball.jpg\\&quot;,\\n  public_id = \\&quot;baseball_no_bg\\&quot;,\\n  background_removal = \\&quot;cloudinary_ai\\&quot;,\\n  notification_url = \\&quot;https:\\\/\\\/mysite.example.com\\\/hooks\\&quot;)&quot;},{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;javascript&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.v2.uploader.upload(\\&quot;baseball.jpg\\&quot;, \\n  { public_id: \\&quot;baseball_no_bg\\&quot;,\\n    background_removal: \\&quot;cloudinary_ai\\&quot;,\\n    notification_url: \\&quot;https:\\\/\\\/mysite.example.com\\\/hooks\\&quot; }),\\n  function(error, result){console.log(result);});&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.v2.uploader.upload(\\&quot;baseball.jpg\\&quot;, \\n  { public_id: \\&quot;baseball_no_bg\\&quot;,\\n    background_removal: \\&quot;cloudinary_ai\\&quot;,\\n    notification_url: \\&quot;https:\\\/\\\/mysite.example.com\\\/hooks\\&quot; }),\\n  function(error, result){console.log(result);});&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.uploader().upload(\\&quot;baseball.jpg\\&quot;, \\n  ObjectUtils.asMap(\\n    \\&quot;public_id\\&quot;, \\&quot;baseball_no_bg\\&quot;,\\n    \\&quot;background_removal\\&quot;, \\&quot;cloudinary_ai\\&quot;,\\n    \\&quot;notification_url\\&quot;, \\&quot;https:\\\/\\\/mysite.example.com\\\/hooks\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.uploader().upload(\\&quot;baseball.jpg\\&quot;, \\n  ObjectUtils.asMap(\\n    \\&quot;public_id\\&quot;, \\&quot;baseball_no_bg\\&quot;,\\n    \\&quot;background_removal\\&quot;, \\&quot;cloudinary_ai\\&quot;,\\n    \\&quot;notification_url\\&quot;, \\&quot;https:\\\/\\\/mysite.example.com\\\/hooks\\&quot;));&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;java&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;var uploadParams = new ImageUploadParams(){\\n  File = new FileDescription(@\\&quot;baseball.jpg\\&quot;),\\n  PublicId = \\&quot;baseball_no_bg\\&quot;,\\n  BackgroundRemoval = \\&quot;cloudinary_ai\\&quot;,\\n  NotificationUrl = \\&quot;https:\\\/\\\/mysite.example.com\\\/hooks\\&quot;};\\nvar uploadResult = cloudinary.Upload(uploadParams);&quot;,&quot;codeSnippet&quot;:&quot;var uploadParams = new ImageUploadParams(){\\n  File = new FileDescription(@\\&quot;baseball.jpg\\&quot;),\\n  PublicId = \\&quot;baseball_no_bg\\&quot;,\\n  BackgroundRemoval = \\&quot;cloudinary_ai\\&quot;,\\n  NotificationUrl = \\&quot;https:\\\/\\\/mysite.example.com\\\/hooks\\&quot;};\\nvar uploadResult = cloudinary.Upload(uploadParams);&quot;}]\"\n      parsed-url=\"[]\"\n      with-url=\"false\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget>\n<p>In the code above, <code>notification_url<\/code> is the endpoint that receives a <code>POST<\/code> request when <a href=\"https:\/\/cloudinary.com\/background-remover\">background removal<\/a> is complete. Here\u2019s an example:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>{\n    &quot;info_kind&quot;: &quot;cloudinary_ai&quot;,\n    &quot;info_status&quot;: &quot;complete&quot;,\n    &quot;public_id&quot;: &quot;bg&quot;,\n    &quot;uploaded_at&quot;: &quot;2019-02-25T17:33:45Z&quot;,\n    &quot;version&quot;: 1551104931,\n    &quot;url&quot;: &quot;https:\/\/res.cloudinary.com\/demo\/image\/upload\/v1551104931\/bg.png&quot;,\n    &quot;secure_url&quot;: &quot;https:\/\/res.cloudinary.com\/demo\/image\/upload\/v1551104931\/bg.png&quot;,\n    &quot;etag&quot;: &quot;6567d798ca4087468dc7d23bcb8a45ec&quot;,\n    &quot;notification_type&quot;: &quot;info&quot;\n}\n<\/code><\/pre>\n<p>As a comparison, see\u2014<\/p>\n<center>\n<table width=\"70%\" cellspacing=\"10\" >\n  <tr align=\"center\">\n   <td style=\"padding:0 8px 0 10px;\">\n        <strong>These:<\/strong><p\/>\n   <\/td>\n   <td style=\"padding:0 8px 0 10px;\">\n         <strong>Become These!<\/strong><p\/>\n   <\/td>\n  <\/tr>\n  <tr align=\"center\">\n   <td style=\"padding:0 8px 0 8px;\"><a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/docs\/rmv_bgd\/baseball_orig.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_250,h_167,c_fill,g_south,f_auto,q_auto\/docs\/rmv_bgd\/baseball_orig.jpg\"  title=\"Baseball player - original\" alt=\"Baseball player - original\"><\/a><p\/>\n   <\/td>\n   <\/td>\n   <td style=\"padding:0 8px 0 8px;\"><a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/docs\/rmv_bgd\/baseball.png\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_250,f_auto,q_auto\/u_docs:transparent_grid,w_250,h_167,c_crop,g_south\/docs\/rmv_bgd\/baseball.png\"  title=\"baseball player - no background\" alt=\"baseball player - no background\"><\/a><p\/>\n   <\/td>\n  <\/tr>\n<\/table>\n<\/center>\n<h2>Optimizing Rotated Images<\/h2>\n<p>By default, regardless of the programming language, Cloudinary automatically performs certain optimizations on all transformed images. For an enhanced user experience, before delivering them to users, further optimize your visual media by adding a couple of parameters to their URLs.<\/p>\n<h3>Automatic Quality and Encoding<\/h3>\n<p>The <code>q_auto<\/code> parameter directs Cloudinary to select the optimal quality-compression level and encoding settings according to the image content and format, also the viewing browser. The resultant image, reduced in size to save bandwidth, is of excellent visual quality.\nSee this example URL:<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;180_yacaar.png\\&quot;, {transformation: [ {effect: \\&quot;shadow:40\\&quot;, quality: \\&quot;auto\\&quot;}, {angle: 60} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;180_yacaar.png\\&quot;, {transformation: [\\n  {effect: \\&quot;shadow:40\\&quot;, quality: \\&quot;auto\\&quot;},\\n  {angle: 60}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;)\\n  .effect(shadow().strength(40))\\n  .delivery(quality(auto()))\\n  .rotate(byAngle(60));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;)\\n  .effect(shadow().strength(40))\\n  .delivery(quality(auto()))\\n  .rotate(byAngle(60));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;180_yacaar.png\\&quot; &gt; &lt;Transformation effect=\\&quot;shadow:40\\&quot; quality=\\&quot;auto\\&quot; \\\/&gt; &lt;Transformation angle=\\&quot;60\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;180_yacaar.png\\&quot; &gt;\\n\\t&lt;Transformation effect=\\&quot;shadow:40\\&quot; quality=\\&quot;auto\\&quot; \\\/&gt;\\n\\t&lt;Transformation angle=\\&quot;60\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;)\\n  .effect(shadow().strength(40))\\n  .delivery(quality(auto()))\\n  .rotate(byAngle(60));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;)\\n  .effect(shadow().strength(40))\\n  .delivery(quality(auto()))\\n  .rotate(byAngle(60));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;180_yacaar.png\\&quot; &gt; &lt;cld-transformation effect=\\&quot;shadow:40\\&quot; quality=\\&quot;auto\\&quot; \\\/&gt; &lt;cld-transformation angle=\\&quot;60\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;180_yacaar.png\\&quot; &gt;\\n\\t&lt;cld-transformation effect=\\&quot;shadow:40\\&quot; quality=\\&quot;auto\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation angle=\\&quot;60\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;)\\n  .effect(shadow().strength(40))\\n  .delivery(quality(auto()))\\n  .rotate(byAngle(60));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;)\\n  .effect(shadow().strength(40))\\n  .delivery(quality(auto()))\\n  .rotate(byAngle(60));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;180_yacaar.png\\&quot; &gt; &lt;cl-transformation effect=\\&quot;shadow:40\\&quot; quality=\\&quot;auto\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation angle=\\&quot;60\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;180_yacaar.png\\&quot; &gt;\\n\\t&lt;cl-transformation effect=\\&quot;shadow:40\\&quot; quality=\\&quot;auto\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation angle=\\&quot;60\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;)\\n  .effect(shadow().strength(40))\\n  .delivery(quality(auto()))\\n  .rotate(byAngle(60));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;)\\n  .effect(shadow().strength(40))\\n  .delivery(quality(auto()))\\n  .rotate(byAngle(60));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;180_yacaar.png&#039;, {transformation: [ {effect: \\&quot;shadow:40\\&quot;, quality: \\&quot;auto\\&quot;}, {angle: 60} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;180_yacaar.png&#039;, {transformation: [\\n  {effect: \\&quot;shadow:40\\&quot;, quality: \\&quot;auto\\&quot;},\\n  {angle: 60}\\n  ]}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;180_yacaar.png\\&quot;).image(transformation=[ {&#039;effect&#039;: \\&quot;shadow:40\\&quot;, &#039;quality&#039;: \\&quot;auto\\&quot;}, {&#039;angle&#039;: 60} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;180_yacaar.png\\&quot;).image(transformation=[\\n  {&#039;effect&#039;: \\&quot;shadow:40\\&quot;, &#039;quality&#039;: \\&quot;auto\\&quot;},\\n  {&#039;angle&#039;: 60}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;180_yacaar.png&#039;))\\n\\t-&gt;effect(Effect::shadow()-&gt;strength(40))\\n\\t-&gt;delivery(Delivery::quality(\\n\\tQuality::auto()))\\n\\t-&gt;rotate(Rotate::byAngle(60));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;180_yacaar.png&#039;))\\n\\t-&gt;effect(Effect::shadow()-&gt;strength(40))\\n\\t-&gt;delivery(Delivery::quality(\\n\\tQuality::auto()))\\n\\t-&gt;rotate(Rotate::byAngle(60));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;180_yacaar.png\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array( array(\\&quot;effect\\&quot;=&gt;\\&quot;shadow:40\\&quot;, \\&quot;quality\\&quot;=&gt;\\&quot;auto\\&quot;), array(\\&quot;angle\\&quot;=&gt;60) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;180_yacaar.png\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;effect\\&quot;=&gt;\\&quot;shadow:40\\&quot;, \\&quot;quality\\&quot;=&gt;\\&quot;auto\\&quot;),\\n  array(\\&quot;angle\\&quot;=&gt;60)\\n  )))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().effect(\\&quot;shadow:40\\&quot;).quality(\\&quot;auto\\&quot;).chain() .angle(60)).imageTag(\\&quot;180_yacaar.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .effect(\\&quot;shadow:40\\&quot;).quality(\\&quot;auto\\&quot;).chain()\\n  .angle(60)).imageTag(\\&quot;180_yacaar.png\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;180_yacaar.png\\&quot;, transformation: [ {effect: \\&quot;shadow:40\\&quot;, quality: \\&quot;auto\\&quot;}, {angle: 60} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;180_yacaar.png\\&quot;, transformation: [\\n  {effect: \\&quot;shadow:40\\&quot;, quality: \\&quot;auto\\&quot;},\\n  {angle: 60}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect(\\&quot;shadow:40\\&quot;).Quality(\\&quot;auto\\&quot;).Chain() .Angle(60)).BuildImageTag(\\&quot;180_yacaar.png\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n  .Effect(\\&quot;shadow:40\\&quot;).Quality(\\&quot;auto\\&quot;).Chain()\\n  .Angle(60)).BuildImageTag(\\&quot;180_yacaar.png\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;180_yacaar.png&#039;).transformation(Transformation()\\n\\t.effect(Effect.shadow().strength(40))\\n\\t.delivery(Delivery.quality(\\n\\tQuality.auto()))\\n\\t.rotate(Rotate.byAngle(60)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;180_yacaar.png&#039;).transformation(Transformation()\\n\\t.effect(Effect.shadow().strength(40))\\n\\t.delivery(Delivery.quality(\\n\\tQuality.auto()))\\n\\t.rotate(Rotate.byAngle(60)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect(\\&quot;shadow:40\\&quot;).setQuality(\\&quot;auto\\&quot;).chain() .setAngle(60)).generate(\\&quot;180_yacaar.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\\n  .setEffect(\\&quot;shadow:40\\&quot;).setQuality(\\&quot;auto\\&quot;).chain()\\n  .setAngle(60)).generate(\\&quot;180_yacaar.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().effect(\\&quot;shadow:40\\&quot;).quality(\\&quot;auto\\&quot;).chain() .angle(60)).generate(\\&quot;180_yacaar.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .effect(\\&quot;shadow:40\\&quot;).quality(\\&quot;auto\\&quot;).chain()\\n  .angle(60)).generate(\\&quot;180_yacaar.png\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;180_yacaar.png&#039;).transformation(Transformation()\\n\\t.effect(Effect.shadow().strength(40))\\n\\t.delivery(Delivery.quality(\\n\\tQuality.auto()))\\n\\t.rotate(Rotate.byAngle(60)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;180_yacaar.png&#039;).transformation(Transformation()\\n\\t.effect(Effect.shadow().strength(40))\\n\\t.delivery(Delivery.quality(\\n\\tQuality.auto()))\\n\\t.rotate(Rotate.byAngle(60)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;180_yacaar.png\\&quot;)\\n\\t effect(Effect.shadow() { strength(40) })\\n\\t delivery(Delivery.quality(\\n\\tQuality.auto()))\\n\\t rotate(Rotate.byAngle(60)) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;180_yacaar.png\\&quot;)\\n\\t effect(Effect.shadow() { strength(40) })\\n\\t delivery(Delivery.quality(\\n\\tQuality.auto()))\\n\\t rotate(Rotate.byAngle(60)) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;180_yacaar.png\\&quot;, {transformation: [ {effect: \\&quot;shadow:40\\&quot;, quality: \\&quot;auto\\&quot;}, {angle: 60} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;180_yacaar.png\\&quot;, {transformation: [\\n  {effect: \\&quot;shadow:40\\&quot;, quality: \\&quot;auto\\&quot;},\\n  {angle: 60}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;)\\n  .effect(shadow().strength(40))\\n  .delivery(quality(auto()))\\n  .rotate(byAngle(60));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;)\\n  .effect(shadow().strength(40))\\n  .delivery(quality(auto()))\\n  .rotate(byAngle(60));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/e_shadow:40,q_auto\\\/a_60\\\/180_yacaar.png&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;effect&quot;:&quot;shadow:40&quot;,&quot;quality&quot;:&quot;auto&quot;},{&quot;angle&quot;:&quot;60&quot;}],&quot;transformation_string&quot;:&quot;e_shadow:40,q_auto\\\/a_60&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;180_yacaar.png&quot;,&quot;extension&quot;:&quot;png&quot;,&quot;format&quot;:&quot;png&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_shadow:40,q_auto\/a_60\/180_yacaar.png\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_shadow:40,q_auto\/a_60\/180_yacaar.png\" alt=\"Logo\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"258\" height=\"258\"\/><\/a><\/p>\n<h3>Automatic Formatting<\/h3>\n<p>The <code>f_auto<\/code> parameter directs Cloudinary to analyze the image content and then select the best delivery format. For example, Cloudinary  delivers WebP images to Chrome browsers, JPEG-XR images to Internet Explorer browsers, and retain the original format for all other browsers. However, regardless of the browser, if the quality algorithm determines that the optimal format for certain images is PNG-8 or PNG-24, Cloudinary delivers them according to that deduction.<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;180_yacaar.png\\&quot;, {transformation: [ {effect: \\&quot;shadow:40\\&quot;}, {angle: 60} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;180_yacaar.png\\&quot;, {transformation: [\\n  {effect: \\&quot;shadow:40\\&quot;},\\n  {angle: 60}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;)\\n  .effect(shadow().strength(40))\\n  .delivery(format(auto()))\\n  .rotate(byAngle(60));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;)\\n  .effect(shadow().strength(40))\\n  .delivery(format(auto()))\\n  .rotate(byAngle(60));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;180_yacaar.png\\&quot; &gt; &lt;Transformation effect=\\&quot;shadow:40\\&quot; \\\/&gt; &lt;Transformation angle=\\&quot;60\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;180_yacaar.png\\&quot; &gt;\\n\\t&lt;Transformation effect=\\&quot;shadow:40\\&quot; \\\/&gt;\\n\\t&lt;Transformation angle=\\&quot;60\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;)\\n  .effect(shadow().strength(40))\\n  .delivery(format(auto()))\\n  .rotate(byAngle(60));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;)\\n  .effect(shadow().strength(40))\\n  .delivery(format(auto()))\\n  .rotate(byAngle(60));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;180_yacaar.png\\&quot; &gt; &lt;cld-transformation effect=\\&quot;shadow:40\\&quot; \\\/&gt; &lt;cld-transformation angle=\\&quot;60\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;180_yacaar.png\\&quot; &gt;\\n\\t&lt;cld-transformation effect=\\&quot;shadow:40\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation angle=\\&quot;60\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;)\\n  .effect(shadow().strength(40))\\n  .delivery(format(auto()))\\n  .rotate(byAngle(60));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;)\\n  .effect(shadow().strength(40))\\n  .delivery(format(auto()))\\n  .rotate(byAngle(60));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;180_yacaar.png\\&quot; &gt; &lt;cl-transformation effect=\\&quot;shadow:40\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation angle=\\&quot;60\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;180_yacaar.png\\&quot; &gt;\\n\\t&lt;cl-transformation effect=\\&quot;shadow:40\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation angle=\\&quot;60\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;)\\n  .effect(shadow().strength(40))\\n  .delivery(format(auto()))\\n  .rotate(byAngle(60));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;)\\n  .effect(shadow().strength(40))\\n  .delivery(format(auto()))\\n  .rotate(byAngle(60));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;180_yacaar.png&#039;, {transformation: [ {effect: \\&quot;shadow:40\\&quot;}, {angle: 60} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;180_yacaar.png&#039;, {transformation: [\\n  {effect: \\&quot;shadow:40\\&quot;},\\n  {angle: 60}\\n  ]}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;180_yacaar.png\\&quot;).image(transformation=[ {&#039;effect&#039;: \\&quot;shadow:40\\&quot;}, {&#039;angle&#039;: 60} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;180_yacaar.png\\&quot;).image(transformation=[\\n  {&#039;effect&#039;: \\&quot;shadow:40\\&quot;},\\n  {&#039;angle&#039;: 60}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;180_yacaar.png&#039;))\\n\\t-&gt;effect(Effect::shadow()-&gt;strength(40))\\n\\t-&gt;delivery(Delivery::format(\\n\\tFormat::auto()))\\n\\t-&gt;rotate(Rotate::byAngle(60));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;180_yacaar.png&#039;))\\n\\t-&gt;effect(Effect::shadow()-&gt;strength(40))\\n\\t-&gt;delivery(Delivery::format(\\n\\tFormat::auto()))\\n\\t-&gt;rotate(Rotate::byAngle(60));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;180_yacaar.png\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array( array(\\&quot;effect\\&quot;=&gt;\\&quot;shadow:40\\&quot;), array(\\&quot;angle\\&quot;=&gt;60) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;180_yacaar.png\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;effect\\&quot;=&gt;\\&quot;shadow:40\\&quot;),\\n  array(\\&quot;angle\\&quot;=&gt;60)\\n  )))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().effect(\\&quot;shadow:40\\&quot;).chain() .angle(60)).imageTag(\\&quot;180_yacaar.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .effect(\\&quot;shadow:40\\&quot;).chain()\\n  .angle(60)).imageTag(\\&quot;180_yacaar.png\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;180_yacaar.png\\&quot;, transformation: [ {effect: \\&quot;shadow:40\\&quot;}, {angle: 60} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;180_yacaar.png\\&quot;, transformation: [\\n  {effect: \\&quot;shadow:40\\&quot;},\\n  {angle: 60}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect(\\&quot;shadow:40\\&quot;).Chain() .Angle(60)).BuildImageTag(\\&quot;180_yacaar.png\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n  .Effect(\\&quot;shadow:40\\&quot;).Chain()\\n  .Angle(60)).BuildImageTag(\\&quot;180_yacaar.png\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;180_yacaar.png&#039;).transformation(Transformation()\\n\\t.effect(Effect.shadow().strength(40))\\n\\t.delivery(Delivery.format(\\n\\tFormat.auto()))\\n\\t.rotate(Rotate.byAngle(60)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;180_yacaar.png&#039;).transformation(Transformation()\\n\\t.effect(Effect.shadow().strength(40))\\n\\t.delivery(Delivery.format(\\n\\tFormat.auto()))\\n\\t.rotate(Rotate.byAngle(60)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect(\\&quot;shadow:40\\&quot;).chain() .setAngle(60)).generate(\\&quot;180_yacaar.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\\n  .setEffect(\\&quot;shadow:40\\&quot;).chain()\\n  .setAngle(60)).generate(\\&quot;180_yacaar.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().effect(\\&quot;shadow:40\\&quot;).chain() .angle(60)).generate(\\&quot;180_yacaar.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .effect(\\&quot;shadow:40\\&quot;).chain()\\n  .angle(60)).generate(\\&quot;180_yacaar.png\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;180_yacaar.png&#039;).transformation(Transformation()\\n\\t.effect(Effect.shadow().strength(40))\\n\\t.delivery(Delivery.format(\\n\\tFormat.auto()))\\n\\t.rotate(Rotate.byAngle(60)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;180_yacaar.png&#039;).transformation(Transformation()\\n\\t.effect(Effect.shadow().strength(40))\\n\\t.delivery(Delivery.format(\\n\\tFormat.auto()))\\n\\t.rotate(Rotate.byAngle(60)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;180_yacaar.png\\&quot;)\\n\\t effect(Effect.shadow() { strength(40) })\\n\\t delivery(Delivery.format(\\n\\tFormat.auto()))\\n\\t rotate(Rotate.byAngle(60)) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;180_yacaar.png\\&quot;)\\n\\t effect(Effect.shadow() { strength(40) })\\n\\t delivery(Delivery.format(\\n\\tFormat.auto()))\\n\\t rotate(Rotate.byAngle(60)) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;180_yacaar.png\\&quot;, {transformation: [ {effect: \\&quot;shadow:40\\&quot;}, {angle: 60} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;180_yacaar.png\\&quot;, {transformation: [\\n  {effect: \\&quot;shadow:40\\&quot;},\\n  {angle: 60}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;)\\n  .effect(shadow().strength(40))\\n  .delivery(format(auto()))\\n  .rotate(byAngle(60));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;180_yacaar.png\\&quot;)\\n  .effect(shadow().strength(40))\\n  .delivery(format(auto()))\\n  .rotate(byAngle(60));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/e_shadow:40,f_auto\\\/a_60\\\/180_yacaar.png&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;effect&quot;:&quot;shadow:40&quot;,&quot;format&quot;:&quot;auto&quot;},{&quot;angle&quot;:&quot;60&quot;}],&quot;transformation_string&quot;:&quot;e_shadow:40,f_auto\\\/a_60&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;180_yacaar.png&quot;,&quot;extension&quot;:&quot;png&quot;,&quot;format&quot;:&quot;png&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_shadow:40,f_auto\/a_60\/180_yacaar.png\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_shadow:40,f_auto\/a_60\/180_yacaar.png\" alt=\"Logo\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"258\" height=\"258\"\/><\/a><\/p>\n<h2>Summing Up<\/h2>\n<p>It\u2019s a cakewalk to rotate or remove image backgrounds with Cloudinary. For more details, check out the <a href=\"https:\/\/cloudinary.com\/documentation\/cloudinary_ai_background_removal_addon\">related Cloudinary documentation<\/a> and this <a href=\"https:\/\/cloudinary.com\/blog\/how_to_automatically_and_professionally_remove_photo_backgrounds\">article<\/a>, which also describes how to perform other image transformations on Cloudinary.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":21932,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[85,165],"class_list":["post-21931","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-deep-learning","tag-image-transformation"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Automatic Background Image Rotation and Removal<\/title>\n<meta name=\"description\" content=\"Learn how to programmatically remove or rotate an image backgrounds with Cloudinary without involving the designer.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/rotating_or_removing_image_backgrounds_with_cloudinary\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Automatic Background Image Rotation and Removal\" \/>\n<meta property=\"og:description\" content=\"Learn how to programmatically remove or rotate an image backgrounds with Cloudinary without involving the designer.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/rotating_or_removing_image_backgrounds_with_cloudinary\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-21T16:51:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-03T22:11:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649754138\/Web_Assets\/blog\/Rotate-and-Remove-Background_21932c5cc2\/Rotate-and-Remove-Background_21932c5cc2-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1540\" \/>\n\t<meta property=\"og:image:height\" content=\"847\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/rotating_or_removing_image_backgrounds_with_cloudinary#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/rotating_or_removing_image_backgrounds_with_cloudinary\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Automatic Background Image Rotation and Removal\",\"datePublished\":\"2019-08-21T16:51:11+00:00\",\"dateModified\":\"2025-05-03T22:11:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/rotating_or_removing_image_backgrounds_with_cloudinary\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/rotating_or_removing_image_backgrounds_with_cloudinary#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649754138\/Web_Assets\/blog\/Rotate-and-Remove-Background_21932c5cc2\/Rotate-and-Remove-Background_21932c5cc2.jpg?_i=AA\",\"keywords\":[\"Deep Learning\",\"Image Transformation\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2019\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/rotating_or_removing_image_backgrounds_with_cloudinary\",\"url\":\"https:\/\/cloudinary.com\/blog\/rotating_or_removing_image_backgrounds_with_cloudinary\",\"name\":\"Automatic Background Image Rotation and Removal\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/rotating_or_removing_image_backgrounds_with_cloudinary#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/rotating_or_removing_image_backgrounds_with_cloudinary#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649754138\/Web_Assets\/blog\/Rotate-and-Remove-Background_21932c5cc2\/Rotate-and-Remove-Background_21932c5cc2.jpg?_i=AA\",\"datePublished\":\"2019-08-21T16:51:11+00:00\",\"dateModified\":\"2025-05-03T22:11:37+00:00\",\"description\":\"Learn how to programmatically remove or rotate an image backgrounds with Cloudinary without involving the designer.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/rotating_or_removing_image_backgrounds_with_cloudinary#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/rotating_or_removing_image_backgrounds_with_cloudinary\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/rotating_or_removing_image_backgrounds_with_cloudinary#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649754138\/Web_Assets\/blog\/Rotate-and-Remove-Background_21932c5cc2\/Rotate-and-Remove-Background_21932c5cc2.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649754138\/Web_Assets\/blog\/Rotate-and-Remove-Background_21932c5cc2\/Rotate-and-Remove-Background_21932c5cc2.jpg?_i=AA\",\"width\":1540,\"height\":847},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/rotating_or_removing_image_backgrounds_with_cloudinary#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Automatic Background Image Rotation and Removal\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Automatic Background Image Rotation and Removal","description":"Learn how to programmatically remove or rotate an image backgrounds with Cloudinary without involving the designer.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/rotating_or_removing_image_backgrounds_with_cloudinary","og_locale":"en_US","og_type":"article","og_title":"Automatic Background Image Rotation and Removal","og_description":"Learn how to programmatically remove or rotate an image backgrounds with Cloudinary without involving the designer.","og_url":"https:\/\/cloudinary.com\/blog\/rotating_or_removing_image_backgrounds_with_cloudinary","og_site_name":"Cloudinary Blog","article_published_time":"2019-08-21T16:51:11+00:00","article_modified_time":"2025-05-03T22:11:37+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649754138\/Web_Assets\/blog\/Rotate-and-Remove-Background_21932c5cc2\/Rotate-and-Remove-Background_21932c5cc2-jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/rotating_or_removing_image_backgrounds_with_cloudinary#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/rotating_or_removing_image_backgrounds_with_cloudinary"},"author":{"name":"","@id":""},"headline":"Automatic Background Image Rotation and Removal","datePublished":"2019-08-21T16:51:11+00:00","dateModified":"2025-05-03T22:11:37+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/rotating_or_removing_image_backgrounds_with_cloudinary"},"wordCount":6,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/rotating_or_removing_image_backgrounds_with_cloudinary#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649754138\/Web_Assets\/blog\/Rotate-and-Remove-Background_21932c5cc2\/Rotate-and-Remove-Background_21932c5cc2.jpg?_i=AA","keywords":["Deep Learning","Image Transformation"],"inLanguage":"en-US","copyrightYear":"2019","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/rotating_or_removing_image_backgrounds_with_cloudinary","url":"https:\/\/cloudinary.com\/blog\/rotating_or_removing_image_backgrounds_with_cloudinary","name":"Automatic Background Image Rotation and Removal","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/rotating_or_removing_image_backgrounds_with_cloudinary#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/rotating_or_removing_image_backgrounds_with_cloudinary#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649754138\/Web_Assets\/blog\/Rotate-and-Remove-Background_21932c5cc2\/Rotate-and-Remove-Background_21932c5cc2.jpg?_i=AA","datePublished":"2019-08-21T16:51:11+00:00","dateModified":"2025-05-03T22:11:37+00:00","description":"Learn how to programmatically remove or rotate an image backgrounds with Cloudinary without involving the designer.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/rotating_or_removing_image_backgrounds_with_cloudinary#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/rotating_or_removing_image_backgrounds_with_cloudinary"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/rotating_or_removing_image_backgrounds_with_cloudinary#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649754138\/Web_Assets\/blog\/Rotate-and-Remove-Background_21932c5cc2\/Rotate-and-Remove-Background_21932c5cc2.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649754138\/Web_Assets\/blog\/Rotate-and-Remove-Background_21932c5cc2\/Rotate-and-Remove-Background_21932c5cc2.jpg?_i=AA","width":1540,"height":847},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/rotating_or_removing_image_backgrounds_with_cloudinary#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Automatic Background Image Rotation and Removal"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649754138\/Web_Assets\/blog\/Rotate-and-Remove-Background_21932c5cc2\/Rotate-and-Remove-Background_21932c5cc2.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21931","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=21931"}],"version-history":[{"count":6,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21931\/revisions"}],"predecessor-version":[{"id":37572,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21931\/revisions\/37572"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/21932"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21931"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21931"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21931"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}