Creating Image-Filter Effects With CSS and Riveting Transformations

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
• Application of CSS image filters
• Functions of CSS image filters
• Filter effects made easy with Cloudinary
• More about Cloudinary
• Details of CSS image transformations

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.

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:

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

See this example with real values:

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

For instance, applying a sepia filter adds a soft brownish color tone to an image, creating a vintage or nostalgic effect. Another example is the brightness filter, where you can make an element darker by feeding a percentage less than 100%. This precise control allows for adjustments to the visual presentation of elements.

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.

It’s important to note that CSS filters are a subset of SVG filters. The CSS filter property can reference an SVG ‘<filter>’ element through an id, allowing for more complex and intricate filter designs that are defined in SVG format.

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.

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.

One significant difference in CSS is the ‘backdrop-filter’ property, which applies filter effects to the background of an element. This contrasts the ‘filter’ property, which applies effects to the whole element, including its content. The ‘backdrop-filter’ can be particularly useful for creating depth or focus on web pages by applying a blur or other filter effect to the background while keeping the foreground elements sharp.

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.

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:

Loading code examples Loading code examples

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

Loading code examples

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

Loading code examples

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.

Loading code examples Loading code examples

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.

Loading code examples

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

For details on CSS image overlays, see this article.

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.

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

• Working With CSS Images
• CSS Image Overlay: Overlaying Text and Images for Visual Effect
• Image Resizing: Manually With CSS and Automatically With Cloudinary
• CSS Image Effects: Five Simple Examples and a Quick Animation Guide
• Creating Image-Filter Effects With CSS and Riveting Transformations
• Rotating Images in JavaScript: Three Quick Tutorials
• Cool Tricks for Resizing Images in JavaScript