Cloudinary Blog

Creating Image-Filter Effects With CSS and Riveting Transformations

Creating Image-Filter Effects With CSS

You can transform images with CSS image filters, applying popular effects like blur, brightness, contrast, drop shadow, grayscale, hue, invert, opacity, saturate, and sepia. With Cloudinary, image-transformation tasks, such as blurring or pixelating faces, adjusting brightness and contrast, and transferring image styles, are much simpler and often automated. This article elaborates on how to do all that on both platforms.

Here are the topics:

CSS Filter Effects and Browser Support

You create filter effects in CSS for images with CSS styling—with no need to upload several versions of images or edit them separately. Simultaneously, you can adjust any number of images at once and stack effects on individual ones.

A CSS image filter then buffers the image, applying the effect you specified and rendering the altered image. For the effects that do not require an image as a base, CSS creates an image with the desired effects. For example, a flood effect might output an image filled with a single color.

All modern browsers, except Internet Explorer and Opera Mini, support the functions of CSS filter effects on iOS and Android. For details, see the compatibility matrix on Can I Use.

Application of CSS Image Filters

The easiest way to apply filters in CSS is with their functions. All you need to do is add the filter you desire as a property along with its value in your CSS file. Here’s the syntax:

Copy to clipboard
filtered_elem {
filter: <filter-function>(value | none)
}

See this example with real values:

blurred_sepia_image {
    filter: blur(3px) sepia(50%);
}

Functions of CSS Image Filters

You can choose from 10 filter functions (see the table below) for the purpose of transforming images: colors, tones, brightness, hues, and so forth. Except where stated otherwise, they allow values of over 100 percent with normalization, but not negative values.

Name Effect Task and Parameters
blur() Applies a Gaussian blur. Takes a length value that defines the standard deviation to the Gaussian function. That value must be positive and expressed in nonpercentages, e.g., pixels.
brightness() Changes the brightness of the image. Takes a percentage. The larger the value, the brighter the image.
contrast() Changes the image contrast. Takes a percentage. The larger the value, the higher the contrast.
drop-shadow() Adds a shadow behind the image. Applies a blurred, offset version of the image in a specific color behind the original image. This function takes two values: color and length. The length value includes a horizontal offset, a vertical offset, and an optional standard deviation. The default values are the `color` property for color and zero for length.
grayscale() Colors the image black and white. Takes a percentage. The larger the value, the grayer the image becomes.
hue-rotate() Changes the image’s base hue. Takes an angle in degrees as the parameter for adjusting the color circle. Accepts negative numbers and those that are 360 or bigger.
invert() Inverts the image colors. Takes a number that represents the inversion of the image's colors according to the color circle.
opacity() Changes the image’s transparency. Takes a percentage. The higher the value, the more opaque the image.
saturate() Changes the image’s color saturation. Takes a percentage. The higher the value, the more saturated the image.
sepia() Makes the image sepia toned. Takes a percentage. The higher the value, the more muted reddish-brown the image.

To change an image’s height and width, adjust them in CSS or JavaScript.

Filter Effects Made Easy With Cloudinary

Cloudinary is a cloud-based service for managing images and videos that offers a generous free-forever subscription plan. With Cloudinary, you can upload images, apply built-in effects, filters, and modifications. You can also create images effects that are difficult or impossible to produce with just CSS. Like CSS effects, Cloudinary effects do not affect the original image; instead, Cloudinary creates a new version for delivery on the fly.

Additionally, you can easily stack filters within a Cloudinary command, manipulating your image as much as you want until you get the desired effect. Even though you can do the same thing with CSS, the code for multiple effects can be quite complex.

Above all, you can apply filters and effects to images in Cloudinary with only one line of code: either by modifying the image URL or by using the platform’s convenient SDKs that are tailored for all popular programming languages. Handily, you can store and apply Cloudinary filters as templates (called named transformations-,Named%20Transformations,custom%20name%20for%20easy%20reference.)) to as many images as necessary without storing and packaging CSS code.

Cloudinary handles image effects on the server side and displays the final image versions. That way, it can save bytes during downloads because many effects downsize images. Additionally, it shortens processing time on the client side, preserving transformations when users download or share images.

The subsections below describe how to apply a few cool effects to images with Cloudinary—beyond what you can do with regular CSS image filters. Each of the subsections links to a Cloudinary Cookbook page with more details.

Blur Faces Or Pixelate Faces

CSS cannot detect an important part of the image, such as a face. Applying a filter to a specific part of the image—even if by manually selecting it—can involve working with multiple copies. You can get around that issue with Cloudinary, which automatically focuses on and transforms only the relevant parts of the image through AI.

To blur a specific part of an image, add the parameter blur_faces or pixelate_faces to its URL, like this:

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

Automatically Adjust Brightness

To have Cloudinary automatically adjust an image’s brightness, add the auto_brightness parameter to the URL, like this:

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

To adjust the degree of brightness, replace auto_brightness with, for example, e_brightness:30 for 30-percent brightness.

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

Automatically Enhance the Contrast

To improve an image’s contrast, add to the URL the parameter improve, which automatically enhances the visual quality. You can also automatically boost photo quality by manipulating the lighting, colors, and contrast.

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

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

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

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

Transfer Image Styles

To transfer the style of images as an overlay, add to the URL the e_style_transfer parameter, which takes the characteristics, such as color palette, clarity, and contrast, from a source image and applies them to the target image. Cloudinary identifies the appropriate characteristics with AI, combining them in a way that optimally preserves both style and content.

Ruby:
Copy to clipboard
cl_image_tag("golden_gate.jpg", :transformation=>[
  {:width=>700, :height=>700, :crop=>"fill"},
  {:effect=>"style_transfer", :overlay=>"sailing_angel"}
  ])
PHP:
Copy to clipboard
cl_image_tag("golden_gate.jpg", array("transformation"=>array(
  array("width"=>700, "height"=>700, "crop"=>"fill"),
  array("effect"=>"style_transfer", "overlay"=>"sailing_angel")
  )))
Python:
Copy to clipboard
CloudinaryImage("golden_gate.jpg").image(transformation=[
  {'width': 700, 'height': 700, 'crop': "fill"},
  {'effect': "style_transfer", 'overlay': "sailing_angel"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("golden_gate.jpg", {transformation: [
  {width: 700, height: 700, crop: "fill"},
  {effect: "style_transfer", overlay: "sailing_angel"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(700).height(700).crop("fill").chain()
  .effect("style_transfer").overlay(new Layer().publicId("sailing_angel"))).imageTag("golden_gate.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('golden_gate.jpg', {transformation: [
  {width: 700, height: 700, crop: "fill"},
  {effect: "style_transfer", overlay: new cloudinary.Layer().publicId("sailing_angel")}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("golden_gate.jpg", {transformation: [
  {width: 700, height: 700, crop: "fill"},
  {effect: "style_transfer", overlay: new cloudinary.Layer().publicId("sailing_angel")}
  ]})
React:
Copy to clipboard
<Image publicId="golden_gate.jpg" >
  <Transformation width="700" height="700" crop="fill" />
  <Transformation effect="style_transfer" overlay="sailing_angel" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="golden_gate.jpg" >
  <cld-transformation width="700" height="700" crop="fill" />
  <cld-transformation effect="style_transfer" overlay="sailing_angel" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="golden_gate.jpg" >
  <cl-transformation width="700" height="700" crop="fill">
  </cl-transformation>
  <cl-transformation effect="style_transfer" overlay="sailing_angel">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(700).Height(700).Crop("fill").Chain()
  .Effect("style_transfer").Overlay(new Layer().PublicId("sailing_angel"))).BuildImageTag("golden_gate.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(700).height(700).crop("fill").chain()
  .effect("style_transfer").overlay(new Layer().publicId("sailing_angel"))).generate("golden_gate.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(700).setHeight(700).setCrop("fill").chain()
  .setEffect("style_transfer").setOverlay("sailing_angel")).generate("golden_gate.jpg")!, cloudinary: cloudinary)

Sailing angel - source artwork Source artwork Golden gate bridge - target photo Target photo Style transfer result Style transfer result

Furthermore, you can fine-tune images with the preserve_color and style_strength parameters. See the examples below.

Style transfer with colors preserved Preserve original colors Style transfer with strength 60 Adjust style strength
to 60
Style transfer with adjusted strength and colors preserved Adjust strength and
preserve colors

For details on CSS image overlays, see this article.

More About Cloudinary

Besides image filters, Cloudinary offers a multitude of robust tools for web developers, including the following:

  • Automated image uploads. You can upload images at scale anywhere from a browser, mobile app, or application back-end directly to the cloud.
  • Generous image storage. Cloudinary accords you up to 25 GB free managed, secure, and cloud-based storage space with multiregion backup, revision history, and disaster recovery.
  • Seamless asset management. You can efficiently manage your image library on Cloudinary by performing tasks like searching, organizing, and tagging files; controlling access; and monitoring usage and performance.
  • Effective image transformations. You can transform, enhance, transcode, crop, scale, and enhance images with a URL-based API or with SDKs that support all popular programming languages.
  • Automated image optimization. Cloudinary automatically selects the optimal quality and encoding settings for images, adapts the settings to any resolution or pixel density, and scales or crops images to focus on the important regions.
  • Responsive images. Cloudinary automatically scales images in an art-directed manner, cropping them to fit different resolutions and viewports.
  • Reliable and fast image delivery. Cloudinary delivers images through Content Delivery Networks (CDNs)—Akamai, Fastly, and CloudFront—with no integration or management on your part.

Do give Cloudinary a try. To start, sign up for a free account.

Details of CSS Image Transformations

Want to learn more about CSS image transformations? These articles are an excellent resource:

Recent Blog Posts

Global Study Strengthens Case for Brands to Support UGC

However, along with the benefits of user-generated content (UGC), comes myriad technical challenges. Content must be moderated to avoid compromising your brand. You need to provide a user-friendly process to efficiently manage content uploads. You need to transform images and videos to ensure brand consistency and web performance. You also need to ensure they look presentable across all devices and browser environments. To help brands address these issues and more, we recently ran a three-part blog series on UGC.

Read more
Cloudinary Supports JPEG XL

Since its founding, Cloudinary's mission has been to help companies unleash the full potential of their media to create the most engaging visual experiences. In keeping with that quest, we support new codecs for images and videos as soon as possible.

Read more
WingTai Asia Fashions Efficient Media Management Workflow

WingTai Asia, a subsidiary of Wing Tai Holdings Limited, is an investment holding company that focuses on property investment and development, lifestyle retail, and hospitality management in key Asian markets. The company is a licensed distributor or sole license distributor for many brands, including Adidas, Cath Kidson, TopShop and UNIQLO, and operates brick and mortar shops to sell these goods throughout Singapore and Malaysia.

Read more