-ms-filter

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

Obsolete
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

The -ms-filter CSS property is a Microsoft extension that sets or retrieves the filter or collection of filters applied to an object.

Warning: Not to be confused with the standard filter property, as the two are fundamentally incompatible with each other.

Important: As of Windows Internet Explorer 9 this feature was deprecated. As of Internet Explorer 10 this feature was removed and should no longer be used.

Syntax

The -ms-filter property is specified as a string that contains a list of one or more items, separated by spaces, of the following types:

Formal syntax

filter: <-ms-filter-function>+  
-ms-filter: [ "'" <-ms-filter-function># "'" ] | [ '"' <-ms-filter-function># '"' ]
where
<-ms-filter-function> = <-ms-filter-function-progid> | <-ms-filter-function-legacy>
where
<-ms-filter-function-progid> = 'progid:' [ <ident-token> '.' ]* [ <ident-token> | <function-token> <any-value> ')' ]
<-ms-filter-function-legacy> = <ident-token> | <function-token> <any-value> ')'

The <string> contains the list of filters, transitions, and procedural surfaces. Refer to the Filters and Transitions Reference for details.

Examples

The following example shows how to use the -ms-filter attribute in Internet Explorer 8.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_8.htm

-ms-filter: 'progid:DXImageTransform.Microsoft.MotionBlur(strength=50), progid:DXImageTransform.Microsoft.BasicImage(mirror=1)';

The following example shows how to use an inline style sheet to set the filter on an image.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_h.htm

<img style="filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=50)
    progid:DXImageTransform.Microsoft.BasicImage(mirror=1)"
    src="/workshop/samples/author/dhtml/graphics/cone.jpg"
    height="80px" width="80px" alt="cone">

The following example shows how to use scripting to set the filter on an image.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_s.htm

<body>
  <p>Click the image to start the filter.</p>
  // Call the function.
  <div id="filterFrom"
      style="position: absolute;
            width: 200px;
            height: 250px;
            background-color: white;
            filter: revealTrans()">
    <img id="imageFrom"
         style="position: absolute;
                top: 20px;
                left: 20px;"
                src="sphere.jpg"
                alt="sphere">
    <div id="filterTo"
         style="position: absolute;
                width: 200px;
                height: 250px;
                top: 20px;
                left: 20px;
                background: white;
                visibility: hidden;">
    </div>
  </div>
  <script type="text/javascript">
  let filterImg = document.querySelector('#filterFrom');
  filterImg.addEventListener('click', doFilter);

  function doFilter () {
    filterFrom.filters.item(0).Apply(); // 12 is the dissolve filter.
    filterFrom.filters.item(0).Transition=12;
    imageFrom.style.visibility = "hidden";
    filterTo.style.visibility = "";
    filterFrom.filters.item(0).play(14);
  }
  </script>
</body>

Gradient

progid:DXImageTransform.Microsoft.Gradient( <properties> )
where
<properties> = [ <Enabled> | <EndColor> | <EndColorStr> | <GradientType> | <StartColor> | <StartColorStr> ]#
where
<Enabled> = 'Enabled=' [ true | false ]
<EndColor> = 'StartColor=' <color>
<EndColorStr> = 'StartColorStr=' <color>
<GradientType> = 'GradientType=' <integer>
<StartColor> = 'StartColor=' <color>
<StartColorStr> = 'StartColorStr=' <color>
Enabled
Default: true
Set to false to disable.
EndColor
The end color, supports only opaque colors in the #RRGGBB notation.
EndColorStr
The end color, supports both opaque colors (#RRGGBB) and colors with alpha opacity using the #AARRGGBB notation.
GradientType
Default: 0 (equivalent to linear-gradient(to bottom, …))
Set to a non-zero value to make the gradient horizontal (equivalent to linear-gradient(to right, …))
StartColor
The end color, supports only opaque colors in the #RRGGBB notation.
StartColorStr
The end color, supports both opaque colors (#RRGGBB) and colors with alpha opacity using the #AARRGGBB notation.

HTML

<div class="gradient horizontal"></div>
<div class="gradient vertical"></div>

CSS

.gradient.horizontal {
  -ms-filter: 'progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ffffff", endColorStr="#000000", GradientType=1)';
  background-image: linear-gradient(to right, #ffffff 0%, #000000 100%);
}

.gradient.vertical {
  -ms-filter: 'progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ffffff", endColorStr="#000000", GradientType=0)';
  background-image: linear-gradient(to bottom, #ffffff 0%, #000000 100%);
}

Result

Specifications

Not part of any specification.

Initial value"" (the empty string)
Applies toall elements
Inheritedno
Computed valueas specified
Animation typediscrete

Remarks

The following table lists the most popular DX Filters and their standards-based alternatives:

DX Filter Standards-based Alternative
Alpha opacity
AlphaImageLoader <img> or background-image and related properties
Gradient background-image: linear-gradient()
DropShadow text-shadow or box-shadow
Matrix transform, transform-origin

In Windows Internet Explorer 8, the -ms-filter attribute is an extension to CSS, and can be used as a synonym for filter in IE8 Standards mode. When you use -ms-filter, enclose the progid in single quotes (') or double quotes ("). Use commas (,) to separate multiple values, as shown in the Examples section.

An object must have layout for the filter to render. A simple way to accomplish this is to give the element a specified height and width, or both.

The shadow filter can be applied to the <img> object by setting the filter on the image's parent container.

The filter mechanism is extensible and enables you to develop and add filters later. For more information about filters, see Introduction to Filters and Transitions.