css filter safari

Safari CSS Visual Effects Guide

• Table of Contents
• Jump To…
• Download Sample Code

Using CSS Filters

Safari 6 and later supports CSS filters, or special visual effects, that you can apply to many elements, including videos (see Figure 4-1 ). These hardware-accelerated filters (such as brightness, contrast, saturation, and blur) can be stacked on top of and animated against one another. Read CSS Property Functions in Safari CSS Reference to find out more about CSS filters.

To add a CSS filter to an HTML element, include the -webkit-filter property in the element’s CSS declaration, as shown in Listing 4-1 . You can list as many of the functions found in CSS Property Functions in Safari CSS Reference as you’d like.

Listing 4-1   Applying CSS filters to HTML elements

Copyright © 2016 Apple Inc. All Rights Reserved. Terms of Use | Privacy Policy | Updated: 2016-10-27

Sending feedback…

We’re sorry, an error has occurred..

Please try submitting your feedback later.

Thank you for providing feedback!

Your input helps improve our developer documentation.

How helpful is this document?

How can we improve this document.

* Required information

To submit a product bug or enhancement request, please visit the Bug Reporter page.

Please read Apple's Unsolicited Idea Submission Policy before you send us your feedback.

CSS Reference

Css properties, css filter property.

Change all images to black and white (100% gray):

Tip: More "Try it Yourself" examples below.

Definition and Usage

The filter property defines visual effects (like blur and saturation) to an element (often <img>).

Show demo ❯

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- specify the first version that worked with a prefix.

Advertisement

Tip: To use multiple filters, separate each filter with a space (See "More Examples" below).

Filter Functions

Note: The filters that use percentage values (i.e. 75%), also accept the value as decimal (i.e. 0.75).

More Examples

Blur example.

Apply a blur effect to the image:

Blur Example 2

Apply a blurred background image:

Brightness Example

Adjust the brightness of the image:

Contrast Example

Adjust the contrast of the image:

Drop Shadow Example

Apply a drop shadow effect to the image:

Grayscale Example

Convert the image to grayscale:

Hue Rotation Example

Apply a hue rotation on the image:

Invert Example

Invert the samples in the image:

Opacity Example

Set the opacity level for the image:

Saturate Example

Saturate the image:

Sepia Example

Convert the image to sepia:

Using Multiple Filters

To use multiple filters, separate each filter with a space. Notice that the order is important (i.e. using grayscale() after sepia() will result in a completely gray image):

All Filters

A demonstration of all filter functions:

Related Pages

CSS Tutorial: CSS Images

HTML DOM reference: filter property

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.

CSS Filters are a powerful tool that authors can use to achieve varying visual effects (sort of like Photoshop filters for the browser). The CSS filter property provides access to effects like blur or color shifting on an element’s rendering before the element is displayed. Filters are commonly used to adjust the rendering of an image, a background, or a border.

The syntax is:

There are a number of functions to use for the value:

brightness()

Drop-shadow(), grayscale(), hue-rotate().

• url() – for applying SVG filters
• custom() – “coming soon”

Multiple functions can be used, space separated.

Filter Functions

To use the CSS filter property, you specify a value for one of the following functions listed above. If the value is invalid, the function returns “none.” Except where noted, the functions that take a value expressed with a percent sign (as in 34%) also accept the value expressed as decimal (as in 0.34).

Here’s a demo that lets you play with individual filters a bit:

Converts the input image to grayscale. The value of “amount” defines the proportion of the conversion. A value of 100% is completely grayscale. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. If the “amount” parameter is missing, a value of 100% is used. Negative values are not allowed.

Converts the input image to sepia. The value of “amount” defines the proportion of the conversion. A value of 100% is completely sepia. A value of 0 leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. If the “amount” parameter is missing, a value of 100% is used. Negative values are not allowed.

Saturates the input image. The value of “amount” defines the proportion of the conversion. A value of 0% is completely un-saturated. A value of 100% leaves the input unchanged. Other values are linear multipliers on the effect. Values over 100% are allowed, providing super-saturated results. If the “amount” parameter is missing, a value of 100% is used. Negative values are not allowed.

Applies a hue rotation on the input image. The value of “angle” defines the number of degrees around the color circle the input samples will be adjusted. A value of 0deg leaves the input unchanged. If the “angle” parameter is missing, a value of 0deg is used. The maximum value is 360deg .

Inverts the samples in the input image. The value of “amount” defines the proportion of the conversion. A value of 100% is completely inverted. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. If the “amount” parameter is missing, a value of 100% is used. Negative values are not allowed.

Applies transparency to the samples in the input image. The value of “amount” defines the proportion of the conversion. A value of 0% is completely transparent. A value of 100% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. This is equivalent to multiplying the input image samples by amount. If the “amount” parameter is missing, a value of 100% is used. This function is similar to the more established opacity property; the difference is that with filters, some browsers provide hardware acceleration for better performance. Negative values are not allowed.

Applies a linear multiplier to input image, making it appear more or less bright. A value of 0% will create an image that is completely black. A value of 100% leaves the input unchanged. Other values are linear multipliers on the effect. Values of an amount over 100% are allowed, providing brighter results. If the “amount” parameter is missing, a value of 100% is used.

Adjusts the contrast of the input. A value of 0% will create an image that is completely black. A value of 100% leaves the input unchanged. Values over the amount over 100% are allowed, providing results with less contrast. If the “amount” parameter is missing, a value of 100% is used.

Applies a Gaussian blur to the input image. The value of ‘radius’ defines the value of the standard deviation to the Gaussian function, or how many pixels on the screen blend into each other, so a larger value will create more blur. If no parameter is provided, then a value 0 is used. The parameter is specified as a CSS length, but does not accept percentage values.

Applies a drop shadow effect to the input image. A drop shadow is effectively a blurred, offset version of the input image’s alpha mask drawn in a particular color, composited below the image. The function accepts a parameter of type (defined in CSS3 Backgrounds), with the exception that the ‘inset’ keyword is not allowed.

This function is similar to the more established box-shadow property; the difference is that with filters, some browsers provide hardware acceleration for better performance.

Drop-shadow also mimics the intended objects outline naturally unlike box-shadow that treats only the box as its path.

Just like with text-shadow , there is no ‘spread’ parameter to create a solid shadow larger than the object.

The url() function takes the location of an XML file that specifies an SVG filter, and may include an anchor to a specific filter element. Here’s a tutorial that works as a nice intro to SVG filters with a fun demo.

Animating Filters

Since Filters are animatable it can open the doors for a whole bunch of fun.

You may combine any number of functions to manipulate the rendering, but order still matters (i.e., using grayscale() after sepia() will result in completely gray output).

A computed value of other than “none” results in the creation of a stacking context the same way that CSS opacity does. The filter property has no effect on the geometry of the target element’s box model, even though filters can cause painting outside of an element’s border box. Any parts of the target element are affected by filter functions. This includes any content, background, borders, text decoration, outline and visible scrolling mechanism of the element to which the filter is applied, and those of its descendants. Filters can also be applied to inline content, such as individual text spans.

The specification also introduces a filter(image-URL, filter-functions) wrapper function for an image. It would allow you to filter any image at the time you use it within CSS. For example, you could blur a background image without blurring the text. This filter function is not yet supported in browsers. In the meantime, you can apply both the background and the filter to a pseudo-element to create a similar effect.

The IE proprietary filter stuff

Also used the filter property, like:

Mostly used for opacity when you needed to support IE 8 and down.

More Information

• W3C Filter Effects Specification
• Bennett Feely’s Filters Gallery
• CSS Filters polyfill
• Understanding CSS Filter Effects

Browser Support

This browser support data is from Caniuse , which has more detail. A number indicates that browser supports the feature at that version and up.

Mobile / Tablet

I am so amazed with the work of you people.

I live in India and i had just started my web designing carrier so there are many things which i don’t know and I always need help on that and every time i search for a thins which i don’t know i found it on this website.

Thanks Thanks Thanks for your great work.

This website is doing amazing thing for all the people who cant afford to get costly online education and lave lack of tome and resources mainly i don’t have time,money, and mostly resources too but with the help of services like this i am approaching to goog web Designer carrier.

If your website need any help i am there to support you

My mail id [email protected] Facebook striker.a.a.a

Keep up your Amazing work

yepp, its a great-great website.

The animation is NOT working at all on Firefox 46.0.1. Any ideas? Cheers…

Hey, you just have to change code from -webkit- to without that (or add new lines without -webkit-). Like that:

And then it will work on Mozilla. Chris just write the code only for Chrome and Safari.

Thanks for the tutorial.

I noticed that the table said that firefox isn’t supported.

I’ve come across this:”-webkit-filter: blur(20px);”. Wouldn’t the effect then work in firefox?

-webkit- only affects Chrome, Opera (15+) and Safari. You can do filter stuff in Firefox with svg though.

It’s now supported under Firefox without vendor prefixes. :)

-webkit only affect with Chrome,Safari Etc. Browser

if you are going to use it with firefox , you may try -ms-filter:

Actually, you need to use -moz for firefox. -ms is for Microsoft Internet Explorer

Hi, using this article and the explication in spanish for @kseso i made this demo: http://codepen.io/g3kdigital/pen/cxCvu i show how to change the color of the tag using only css and filters , but only working in -webkit- for now. Cheers.

Very nice use case.

that is one stunning example of filters.

Found that you wrote:

Where is one of:

Checked source code, you got wrapped around it.

Anyways just saying :D

for firefox you just have to change -webkit with -moz

-moz-filter:grayscale(1);-webkit-filter:grayscale(1);

For your Reference (CMIIW) css prefixs:

-khtml- (Konqueror, really old Safari) -moz- (Firefox) -o- (Opera) -ms- (Internet Explorer) -webkit- (Safari, Chrome)

Firefox prefix -moz- does not work. You must use

Interestingly it works in the new Firefox Developers Edition (so hopefully full support is on it’s way – caniuse suggests v35 will have full support without a vendor prefix).

I just put:

” filter: opacity(.2); ”

Without “-webkit-filter: opacity(.2);”

Works fine in Firefox Developer Edition “36.0a2 (2014-12-10)”.

Thanks for nice tutorial, its crisp :D

Awesome :D!!! thanks

Minor Correction: You haven’t included “saturate” within the list mentioned right at the top.

Thanks. Fixed.

Thanks for the helpful tips. My client wants sepia tone over the photos of their homepage, nice to know I can let the css convert the images on the fly.

Wow!!! So good to see it working on my favourite browser: Mozilla Firefox!!! I’m seeing it on FF Dev Edition, it’s great to have it here too! :) :) :)

Awesome with a capital “A”!!!!

Hey christ , i dont know if is just mu issue or internet coneccion but the codepen embeed examples are not displaying or when they do is just half. Maybe you want to take a look

Cheers and btw great article

I recently had to make blue colored png icons white on hover.

I used the following to achieve this and thought someone else mind find it useful.

Thanks Justin – just what I needed.

If it’s an svg icon loaded in, or with some PNGs you could also do: filter: contrast(0) brightness(200%);

Glad it worked for you.

Justin! You have saved me tons of work… Although I did go through hell to find your little snippet ;-)

Thank you thank you thank you.

My pleasure!

Let me know if you come across any cross-browser issues with that hack.

Thank you so much for this! It was exactly what I was looking for. I’ve been trying to find a way to fade my background-image to a black without having to put my image in the tag in the HTML for hours. I was about to give up and go to sleep when I came across this. Now I probably won’t be sleeping because I’m too excited!

Thank you for the tutorial.

I was under the impression that vendor prefixes are not needed to use filters in CSS. It does not seem to be so as when I use just

filter: blur(5px);

for an image the image is unchanged but when I use

-webkit-filter: blur(5px);

Therefore is it correct to assume that vendor prefixes are still needed?

Thanks in advance.

But, i find this css does not valid in css validator. Is there any solution can help to make this to be validated properly?

Your example images path/URL/src is missing. :)

Noticed that as well. When you click the the ‘Edit on Codepen’ link it works. Weird.

The image has hotlinking protection for some domains, it seems.

css only animation start button: http://codepen.io/anon/pen/JGYqgq

how do I apply the filter on the bgImage but not effect the text on top ?

The only way of doing this would be to seperate the text and background container and then put the text absolute on top of that container:

cool stuff.. There is a filter which makes my picture sharper?

Is it possible to apply filter to only a selection? e.g, invert black pixels to white, etc. I really need help on this asap please.

Hi, I’ve playing with this filters… weird thing is when I was trying to make images white, only the ones on tittle were affected. Not sure why…

Hello I want background as a filter blur and whatever text on up it need to normal. Please any one suggest me solution.

The backdrop-filter CSS property

I just stumbled upon one bug.

If you use filter on the parent element of a fixed positioned element. Your Position fixed won’t work.

URL with ID based filter not working in Firefox, any solution for it?

For example, check your link: https://codepen.io/grayghostvisuals/pen/noItd in firefox browser.

Any idea when filter: custom() feature will be supported by browsers? Till then is there any way to use svg to apply custom shaders?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

Copy and paste this code: micuno *

Leave this field empty

Today I Learned

How to fix filter: blur() performance issue in safari.

The filter: blur() property in css may come in handy in some situations, but you should know of a side effect it has in Safari (tested on version 15.1 as of this writing).

The issue is a nasty performance drop around the element on which the filter is used, making every other interaction extremely slow. And it happens in Safari only. In other browsers everything works well.

One solution I've found so far is to use transform: translate3d(0, 0, 0) along with filter on the same element, to force the browser use GPU acceleration for that particular element instead of the CPU.

CSS filter() function

This function filters a CSS input image with a set of filter functions (like blur, grayscale or hue)

• 4 - 124 : Not supported
• 125 : Not supported
• 126 - 128 : Not supported
• 12 - 124 : Not supported
• 3.1 - 8 : Not supported
• 9 : Supported
• 9.1 - 17.4 : Supported
• 17.5 : Supported
• 17.6 - TP : Supported
• 2 - 125 : Not supported
• 126 : Not supported
• 127 - 129 : Not supported
• 9 - 109 : Not supported
• 110 : Not supported
• 5.5 - 10 : Not supported
• 11 : Not supported

Chrome for Android

Safari on ios.

• 3.2 - 8.4 : Not supported
• 9 - 9.3 : Supported
• 10 - 17.4 : Supported
• 17.6 : Supported

Samsung Internet

• 4 - 24 : Not supported
• 25 : Not supported
• all : Not supported

Opera Mobile

• 10 - 12.1 : Not supported
• 80 : Not supported

UC Browser for Android

• 15.5 : Not supported

Android Browser

• 2.1 - 4.4.4 : Not supported

Firefox for Android

• 14.9 : Not supported

Baidu Browser

• 13.52 : Not supported

KaiOS Browser

• 2.5 : Not supported
• 3 : Not supported

Safari Technology Preview 196 Release Notes

Jun 5, 2024

by Jon Davis

Safari Technology Preview Release 196 is now available for download for macOS Sonoma and macOS Ventura. If you already have Safari Technology Preview installed, you can update it in System Settings under General → Software Update.

This release includes WebKit changes between: 278844@main…279360@main .

Resolved Issues

Fixed toggling the visibility on a canvas parent undoing the effect of clearRect() . ( 279302@main ) (128226178)

Fixed the Canvas drawImage() API to throw an exception when the image is in broken state. ( 279319@main ) (128588063)

• Fixed incorrect inline element size when using font-variant-caps: all-small-caps with font-synthesis . ( 279183@main ) (121314557)
• Fixed RegEx lookbehinds differing from v8. ( 278863@main ) (127440248)

New Features

• Added support for bytes() to Blob and PushMessageData. ( 279263@main ) (128418858)

Web Inspector

• Added support for fuzzy search code completion in the CSS source editor. ( 2791444@main ) (125030691)
• Fixed console code completion to be case-insensitive. ( 279195@main ) (124544458)
• Fixed compiling shaders without variables that are arrays and start with underscore. ( 278880@main ) (126944294)
• Fixed a delay in getUserMedia promise resolution. ( 278851@main ) (128112002)

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free

drop-shadow()

The drop-shadow() CSS function applies a drop shadow effect to the input image. Its result is a <filter-function> .

A drop shadow is effectively a blurred, offset version of the input image's alpha mask, drawn in a specific color and composited below the image.

Note: This function is somewhat similar to the box-shadow property. The box-shadow property creates a rectangular shadow behind an element's entire box , while the drop-shadow() filter function creates a shadow that conforms to the shape (alpha channel) of the image itself .

The drop-shadow() function accepts a parameter of type <shadow> (defined in the box-shadow property), with the exception that the inset keyword and spread parameters are not allowed.

Specifies the color for the shadow. If not specified, the value of the color property defined in the parent element is used.

Specifies the offset length of the shadow. This parameter accepts two or three values. If two values are specified, they are interpreted as <offset-x> (horizontal offset) and <offset-y> (vertical offset) values. Negative <offset-x> value places the shadow to the left of the element. Negative <offset-y> value places the shadow above the element. If not specified, the value of 0 is used for the missing length. If a third value is specified, it is interpreted as <standard-deviation> , which is the value of the standard deviation to the Gaussian blur function. A larger <standard-deviation> value creates a larger and more blurred shadow. Negative values for <standard-deviation> are not allowed.

Formal syntax

Setting a drop shadow.

In the absence of a <color> value in the drop-shadow() function in the first box, the shadow uses the value of the color property from the element ( lime ). The second and third shadows illustrate that the length and color values can be specified in any order. The third shadow shows the blurring effect when a third <length> value is specified. The fourth shadow uses negative offsets which shifts shadow to the left and top.

Specifications

Browser compatibility.

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

The other <filter-function> functions available to be used in values of the filter and backdrop-filter properties include:

• brightness()
• grayscale()
• hue-rotate()
• box-shadow property
• text-shadow property