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 v1:
Copy to clipboard
cl_image_tag("young_couple.jpg", array("effect"=>"blur_faces"))
PHP v2:
Copy to clipboard
(new ImageTag('young_couple.jpg'))
  ->effect(Effect::blur()->region(Region::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 v1:
Copy to clipboard
cl_image_tag("young_couple.jpg", array("effect"=>"pixelate_faces"))
PHP v2:
Copy to clipboard
(new ImageTag('young_couple.jpg'))
  ->effect(Effect::pixelate()->region(Region::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 v1:
Copy to clipboard
cl_image_tag("mountain.jpg", array("effect"=>"auto_brightness"))
PHP v2:
Copy to clipboard
(new ImageTag('mountain.jpg'))
  ->adjust(Adjust::autoBrightness());
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 v1:
Copy to clipboard
cl_image_tag("mountain.jpg", array("effect"=>"brightness:30"))
PHP v2:
Copy to clipboard
(new ImageTag('mountain.jpg'))
  ->adjust(Adjust::brightness()->level(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 v1:
Copy to clipboard
cl_image_tag("gray_mountain.jpg")
PHP v2:
Copy to clipboard
(new ImageTag('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 v1:
Copy to clipboard
cl_image_tag("gray_mountain.jpg", array("effect"=>"improve"))
PHP v2:
Copy to clipboard
(new ImageTag('gray_mountain.jpg'))
  ->adjust(Adjust::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 v1:
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")
  )))
PHP v2:
Copy to clipboard
(new ImageTag('golden_gate.jpg'))
  ->resize(Resize::fill()->width(700)->height(700))
  ->effect(Effect::styleTransfer(Source::image('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

Auto-Tag Videos With Cloudinary: A Tutorial

Video is one of the best ways for capturing audience attention. Product demonstrations, property tours, tutorials, and keynotes all make great content—provided that they’re readily searchable by your team and visitors alike. Even though tagging and categorization help organize videos and make them easy to find, the labeling process is labor intensive, taking time away from key tasks like creating new videos.

Read more
Video Uploads With Cloudinary

Setting up the infrastructure for video uploads can go from straightforward to complex real fast. Why? Because many challenges are involved in building a foolproof service for an efficient and smooth process.

Read more
Optimize Media to Get Ready for Google’s Core Web Vitals

For years, Google has been updating its search algorithm to prioritize end-user experience, displaying the most relevant and helpful content at the top of search results. The latest—and maybe the most significant—update so far is Core Web Vitals (CWVs), which are new metrics announced a year ago that will, starting in June, begin determining search rankings. With this update, Google is being abundantly clear that visual experience of webpages is paramount.

Read more
Compressing, Resizing, and Optimizing Videos in Laravel

Videos are large media files—in most cases, at least four times larger than images—and are often created for ads, marketing campaigns, and instructional content to convey as much information as possible in a short time. Ensuring that videos do not buffer all the time and that the user’s data is protected from rapid consumption due to heavy page weight must be the modus operandi for all website builders and e-business owners.

Read more
Five Ways to Effectively Manage Online Media

The digital economy is driven by highly visual experiences. After all, viewers process images 60,000 times faster than text. Therefore, it’s no surprise that top-notch visual media has been an essential component of a captivating e-commerce experience for years. Nor is it surprising that visual media’s importance only rose during the COVID-19 pandemic, a reality for all retailers, including our client Levi’s.

Read more
Creating an API With Python Flask to Upload Files to Cloudinary

Code

Cloudinary offers SDKs for many programming languages and frameworks. Even though it also offers an Upload API endpoint for both back-end and front-end code, most developers find the SDKs very helpful. If you're working with a powerful back-end framework like Python Flask, you'll be happy to hear that a Python SDK is now available.
This tutorial walks you through the process of building an API to upload images to Cloudinary. You can also upload other file types, including video and even nonmedia files, with the API.

Read more