Cloudinary Blog

Creating Image-Filter Effects With CSS and Riveting Transformations

By
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

Our $2B Valuation

By
Blackstone Growth Invests in Cloudinary

When we started our journey in 2012, we were looking to improve our lives as developers by making it easier for us to handle the arduous tasks of handling images and videos in our code. That initial line of developer code has evolved into a full suite of media experience solutions driven by a mission that gradually revealed itself over the course of the past 10 years: help companies unleash the full potential of their media to create the most engaging visual experiences.

Read more
Direct-to-Consumer E-Commerce Requires Compelling Visual Experiences

When brands like you adopt a direct–to-consumer (DTC) e-commerce approach with no involvement of retailers or marketplaces, you gain direct and timely insight into evolving shopping behaviors. Accordingly, you can accommodate shoppers’ preferences by continually adjusting your product offering and interspersing the shopping journey with moments of excitement and intrigue. Opportunities abound for you to cultivate engaging customer relationships.

Read more
Automatically Translating Videos for an International Audience

No matter your business focus—public service, B2B integration, recruitment—multimedia, in particular video, is remarkably effective in communicating with the audience. Before, making video accessible to diverse viewers involved tasks galore, such as eliciting the service of production studios to manually dub, transcribe, and add subtitles. Those operations were costly and slow, especially for globally destined content.

Read more
Cloudinary Helps Minted Manage Its Image-Generation Pipeline at Scale

Shoppers return time and again to Minted’s global online community of independent artists and designers because they know they can count on unique, statement-making products of the highest quality there. Concurrently, the visual imagery on Minted.com must do justice to the designs into which the creators have poured their hearts and souls. For Minted’s VP of Engineering David Lien, “Because we are a premium brand, we need to ensure that every single one of our product images matches the selected configuration exactly. For example, if you pick an 18x24 art print on blue canvas, we will show that exact combination on the hero images in the PDF.”

Read more
Highlights on ImageCon 2021 and a Preview of ImageCon 2022

New year, same trend! Visual media will continue to play a monumental role in driving online conversions. To keep up with visual-experience trends and best practices, Cloudinary holds an annual conference called ImageCon, a one-of-a-kind event that helps attendees create the most engaging visual experiences possible.

Read more