CINXE.COM
CSS filter
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="CSS filter, opacity, color, isolation, filter, blur, brightness, contrast, greyscale, grayscale, drop shadow, hue rotate, invert, opacity, saturate, sepia, graphic, graphics, web-kit, columns, shorthand, property, properties, css extension, safari, chrome, firefox, internet explorer, iOS, ipod, ipad, apple, mac, windows, mozilla, -moz, proprietary, proprietry, open source framework"> <meta name="Description" content="CSS filter property provides graphical filter effects to images. Blur, brightness, contrast, grayscale, drop shadows etc. Introduced in CSS level 3."> <link rel="canonical" href="https://www.quackit.com/css/css3/properties/css_filter.cfm"> <title>CSS filter</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link rel="shortcut icon" href="/pix/favicon96.png"> <link rel="apple-touch-icon" href="/pix/apple-touch-icon.png"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> <link href="/common/css/master.45.min.css" rel="stylesheet"> <script async src="https://cdn.fuseplatform.net/publift/tags/2/3499/fuse.js"></script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q3H025ZKLN"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Q3H025ZKLN'); </script> </head> <body> <header class="site-header"> <div class="site-header-base"> <div class="site-logo"> <a title="Quackit Homepage" target="_top" href="/"><img src="/pix/quackit_logo_watermark.png" width="87" height="33" alt="Quackit Logo"></a> </div> <button id="site-nav-toggler" class="site-nav-toggler" aria-expanded="false" aria-controls="site-nav"> <span class="sr-only">Toggle navigation</span> ☰ </button> </div> <nav id="site-nav" class="site-nav"> <div class="site-links"> <ul> <li><a href="/"><i class="fa fa-home"></i> <span class="sr-only">Home</span></a></li> <li><a href="/html/">HTML</a></li> <li><a href="/css/">CSS</a></li> <li><a href="/scripting/">Scripting</a></li> <li><a href="/database/">Database</a></li> </ul> </div> <div class="site-search-top"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:98x0fk-bbgi"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="20" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> </div> </nav> </header> <div class="main"> <article class="content"> <h1 class="page-title">CSS filter</h1> <div class="ad ad-top"> <!-- GAM 71161633/QCKIT_quackit/article_header --> <div data-fuse="23059883623"></div> </div> <script src="/common/js/codemirror/lib/codemirror.js"></script> <script src="/common/js/codemirror/mode/css/css.js"></script> <div class="code-only"> <textarea id="example1" autocomplete="off" spellcheck="false"><!DOCTYPE html>
<title>Example</title>
<style>
div {
 width: 200px;
 margin: 0 15px;
 float: left;
}
.filtered {
 filter: hue-rotate(180deg) drop-shadow(10px 10px 10px gray);
}
</style>

<div>
Original Image:
<img src="/pix/samples/8m.jpg" alt="Sample image">
</div>

<div>
Filtered Image:
<img src="/pix/samples/8m.jpg" alt="Sample image" class="filtered">
</div></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/css/css3/properties/css_filter" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode1 = CodeMirror.fromTextArea(document.getElementById("example1"), { mode: "text/css", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <p class="lead">The CSS <code>filter</code> property provides graphical filter effects to HTML elements.</p> <p>The <code>filter</code> property enables you to apply effects to images and other elements that have traditionally been the domain of desktop photo editors. For example, you can adjust the contrast or brightness of an image, turn a color photo into a "black and white" photo, blur the image, adjust the hue, invert the colors, etc. </p> <div class="ad"> <!-- GAM 71161633/QCKIT_quackit/article_incontent_1 --> <div data-fuse="23059883629"></div> </div> <h2>Syntax</h2> <script src="/common/js/codemirror/mode/text/css/text/css.js"></script> <div class="code-only"> <textarea id="example2" autocomplete="off" spellcheck="false">filter: none | <filter-value-list></textarea> </div> <script> var exampleCode2 = CodeMirror.fromTextArea(document.getElementById("example2"), { mode: "text/css", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <p>Where</p> <div class="code-only"> <textarea id="example3" autocomplete="off" spellcheck="false"><filter-value-list> = [ <filter-function> | <url> ]+</textarea> </div> <script> var exampleCode3 = CodeMirror.fromTextArea(document.getElementById("example3"), { mode: "text/css", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <p>Where</p> <div class="code-only"> <textarea id="example4" autocomplete="off" spellcheck="false"><filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <sepia()> | <saturate()></textarea> </div> <script> var exampleCode4 = CodeMirror.fromTextArea(document.getElementById("example4"), { mode: "text/css", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>Possible Values</h2> <p>Here are the possible values:</p> <dl> <dt><dfn><code>none</code></dfn></dt> <dd>No filter effect gets applied.</dd> <dt><a href="/css/functions/css_blur_function.cfm"><code>blur( <length> )</code></a></dt> <dd> <p>Applies a Gaussian blur to the element. The passed parameter provides the radius of the blur. The parameter can be a CSS length, but not a percentage value.</p> <p>Negative values are not allowed.</p> </dd> <dt><a href="/css/functions/css_brightness_function.cfm"><code>brightness( [ <number> | <percentage> ] )</code></a></dt> <dd> <p>Adjusts the brightness of the element based on the value provided. A value of <code>0%</code> results in an element that is completely black. A value of <code>100%</code> leaves the element unchanged. To make the element brighter, use an amount greater than <code>100%</code>. </p> <p>Negative values are not allowed.</p> </dd> <dt><a href="/css/functions/css_contrast_function.cfm"><code>contrast( [ <number> | <percentage> ] )</code></a></dt> <dd> <p>Adjusts the contrast of the element based on the value provided. A value of <code>0%</code> results in an element that is completely gray. A value of <code>100%</code> leaves the input unchanged. To increase the contrast, use an amount greater than <code>100%</code>. </p> <p>Negative values are not allowed.</p> </dd> <dt><a href="/css/functions/css_drop-shadow_function.cfm"><code>drop-shadow( <color>? && <length>{2,3} )</code></a></dt> <dd> <p>Applies a drop shadow to the element. The <code>&&</code> indicates that the order of the <a href="/css/data_types/css_color_data_type.cfm"><code><color></code></a> and <a href="/css/data_types/css_length_data_type.cfm"><code><length></code></a> values can be changed (i.e. you have the choice of specifying the color either first or last). </p> <p>Values are as follows:</p> <dl> <dt><dfn><color>?</dfn> (optional)</dt> <dd> This value determines the color of the drop shadow. It can be any valid <a href="/css/data_types/css_color_data_type.cfm"><code><color></code></a> value. For example, <code>steelblue</code>, <code>#FF4500</code> or <code>rgba(0,0,0,0.3)</code> are all valid colors. If this value isn't provided, the value will be taken from the <a href="/css/properties/css_color.cfm"><code>color</code></a> property. </dd> <dt><dfn><length>{2,3}</dfn></dt> <dd> <p>This can be either two values or three, as indicated below: </p> <dl> <dt><dfn><horizontal-offset></dfn> (required)</dt> <dd> Determines the horizontal offset of the drop shadow. It is a <a href="/css/data_types/css_length_data_type.cfm"><code><length></code></a> value. For example, <code>10px</code> or <code>1em</code>. Negative values are allowed. If a negative value is provided, the offset will result in the drop shadow being drawn to the left of the box. If it is a positive value, it will be drawn to the right. </dd> <dt><dfn><vertical-offset></dfn> (required)</dt> <dd> Determines the vertical offset of the drop shadow. It is a <a href="/css/data_types/css_length_data_type.cfm"><code><length></code></a> value. For example, <code>10px</code> or <code>1em</code>. Negative values are allowed. If a negative value is provided, the offset will result in the drop shadow being drawn above the box. If it is a positive value, it will be drawn below. </dd> <dt><dfn><blur></dfn> (optional)</dt> <dd> Determines the Gaussian blur effect (if any). It is a <a href="/css/data_types/css_length_data_type.cfm"><code><length></code></a> value. If the value is zero (i.e. <code>0</code>), the edge of the shadow will be sharp. The higher the value, the more blurred the shadow will become. Negative values are not allowed for a Gaussian blur. </dd> </dl> </dd> </dl> </dd> <dt><a href="/css/functions/css_grayscale_function.cfm"><code>grayscale( [ <number> | <percentage> ] )</code></a></dt> <dd><p>Converts the element to grayscale. The passed parameter defines to what degree the element is converted to grayscale. A value of <code>100%</code> is completely grayscale. A value of <code>0%</code> leaves the element unchanged. </p> <p>Negative values are not allowed.</p> </dd> <dt><a href="/css/functions/css_hue-rotate_function.cfm"><code>hue-rotate( [ <angle> | <zero> ]? )</code></a></dt> <dd>Applies a hue rotation to the element. The passed parameter defines the number of degrees around the color circle the input samples will be adjusted. A value of <code>0deg</code> leaves the element unchanged. </dd> <dt><a href="/css/functions/css_invert_function.cfm"><code>invert( [ <number> | <percentage> ] )</code></a></dt> <dd> <p>Inverts the samples in the element. The passed parameter defines the proportion of the conversion. A value of <code>100%</code> is completely inverted. A value of <code>0%</code> leaves the element unchanged. </p> <p>Negative values are not allowed.</p> </dd> <dt><a href="/css/functions/css_opacity_function.cfm"><code>opacity( [ <number> | <percentage> ] )</code></a></dt> <dd> <p>Applies transparency to the samples in the element. The passed parameter defines the proportion of the conversion. A value of <code>100%</code> is completely transparent. A value of <code>0%</code> leaves the element unchanged. </p> <p>Negative values are not allowed.</p> <div class="info"> <p>This function is similar to the <a href="/css/css3/properties/css_opacity.cfm"><code>opacity</code></a> property but it is not meant to be a shorthand for that property. Using filters may result in slightly better performance on some browsers. However, the two can be combined, resulting in a more transparent element. </p> </div> </dd> <dt><a href="/css/functions/css_sepia_function.cfm"><code>sepia( [ <number> | <percentage> ] )</code></a></dt> <dd> <p>Converts the element to sepia. Sepia toning provides a reddish brown monochrome tint. It can give photos a warm, antique feeling. The passed parameter defines the proportion of the conversion. A value of <code>100%</code> is completely un-saturated. A value of <code>0%</code> leaves the element unchanged. </p> <p>Negative values are not allowed.</p> </dd> <dt><a href="/css/functions/css_saturate_function.cfm"><code>saturate( [ <number> | <percentage> ] )</code></a></dt> <dd> <p>Saturates the element. Saturation is the colorfulness of a color relative to its own brightness. The passed parameter defines the proportion of the conversion. A value of <code>100%</code> is completely un-saturated. A value of <code>0%</code> leaves the element unchanged. </p> <p>Negative values are not allowed.</p> </dd> <dt><a href="/css/data_types/css_url_data_type.cfm"><dfn><url></dfn></a></dt> <dd>A filter reference to a <code class="tag">filter</code> element. For example <code>url(filters.svg#filter)</code>. A filter is only applied if the filter references a filter element, otherwise the whole filter chain is ignored and no filter is applied to the object.</dd> </dl> <p>In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value: </p> <dl> <dt><code>initial</code></dt> <dd>Represents the value specified as the property's initial value.</dd> <dt><code>inherit</code></dt> <dd>Represents the computed value of the property on the element's parent.</dd> <dt><code>unset</code></dt> <dd>This value acts as either <code>inherit</code> or <code>initial</code>, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.</dd> </dl> <h2>Basic Property Information</h2> <div class="specifications"> <dl> <dt>Initial Value</dt> <dd><code>none</code></dd> <dt>Applies To</dt> <dd>All elements. When used with Scalable Vector Graphics (SVG), it applies to container elements without the <code><defs></code> element, all graphics elements and the <code class="tag">use</code> element.</dd> <dt>Inherited?</dt> <dd>No</dd> <dt>Media</dt> <dd>Visual</dd> <dt>Animatable</dt> <dd>Yes (<a href="/html/html_editors/scratchpad/?example=/css/css3/animations/animatable_properties/css_filter" target="_blank">see example</a>)</dd> </dl> </div> <h2>Example Code</h2> <h3>Basic CSS</h3> <div class="code-only"> <textarea id="example5" autocomplete="off" spellcheck="false">img {
 filter: sepia(100%);
}</textarea> </div> <script> var exampleCode5 = CodeMirror.fromTextArea(document.getElementById("example5"), { mode: "text/css", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h3>Working Example within an HTML Document</h3> <script src="/common/js/codemirror/mode/htmlmixed/htmlmixed.js"></script> <script src="/common/js/codemirror/mode/javascript/javascript.js"></script> <script src="/common/js/codemirror/mode/xml/xml.js"></script> <div class="code-only"> <textarea id="example6" autocomplete="off" spellcheck="false"><!DOCTYPE html>
<title>Example</title>
<style>
div {
 width: 200px;
 margin: 0 15px;
 float: left;
}
.filtered {
 filter: hue-rotate(180deg) drop-shadow(10px 10px 10px gray);
}
</style>

<div>
Original Image:
<img src="/pix/samples/8m.jpg" alt="Sample image">
</div>

<div>
Filtered Image:
<img src="/pix/samples/8m.jpg" alt="Sample image" class="filtered">
</div></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/css/css3/properties/css_filter" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode6 = CodeMirror.fromTextArea(document.getElementById("example6"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>CSS Specifications</h2> <ul> <li>The <code>filter</code> property is <a target="_blank" href="https://www.w3.org/TR/filter-effects-1/#FilterProperty">defined</a> in <a target="_blank" href="https://www.w3.org/TR/filter-effects-1/">Filter Effects Module Level 1</a> (W3C Working Draft, 25 November 2014).</li> </ul> <h2>Browser Support</h2> <p>The following table provided by <a target="_blank" href="http://caniuse.com/">Caniuse.com</a> shows the level of browser support for this feature.</p> <iframe sandbox style="width: 100%;height: 350px;" src="//caniuse.com/css-filters/embed/"></iframe> <h2>Vendor Prefixes</h2> <p>For maximum browser compatibility many web developers add browser-specific properties by using extensions such as <code>-webkit-</code> for Safari, Google Chrome, and Opera (newer versions), <code>-ms-</code> for Internet Explorer, <code>-moz-</code> for Firefox, <code>-o-</code> for older versions of Opera etc. As with any CSS property, if a browser doesn't support a proprietary extension, it will simply ignore it.</p> <p>This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.</p> <p>The major browser manufacturers generally strive to adhere to the W3C specifications, and when they support a non-prefixed property, they typically remove the prefixed version. Also, W3C advises vendors to remove their prefixes for properties that reach Candidate Recommendation status.</p> <p>Many developers use <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a>, which is a postprocessor for CSS. Autoprefixer automatically adds vendor prefixes to your CSS so that you don't need to. It also removes old, unnecessary prefixes from your CSS.</p> <p>You can also use Autoprefixer with preprocessors such as Less and <a href="/sass/tutorial/">Sass</a>.</p> </article> <div class="sidebar"> <div class="relatedLinks"> <h4>Related</h4> <ul> <li><a href="/css/css3/properties/css_mix-blend-mode.cfm" title="Defines how an element blends with the element below it."><code>mix-blend-mode</code></a></li> <li><a href="/css/css3/properties/css_background-blend-mode.cfm" title="Defines the blending mode of each background layer."><code>background-blend-mode</code></a></li> <li><a href="/css/css3/properties/css_isolation.cfm" title="Defines whether or not the element is isolated from its group for blending purposes."><code>isolation</code></a></li> </ul> </div> <nav> <ul> <li> <h3><a href="/css/css3/properties/">CSS3 Properties</a></h3> <ul> <li><h4 title="Grid Layout">Grid</h4> <ul> <li><a href="/css/css3/properties/css_grid-area.cfm">grid-area</a></li> <li><a href="/css/css3/properties/css_grid-auto-columns.cfm">grid-auto-columns</a></li> <li><a href="/css/css3/properties/css_grid-auto-flow.cfm">grid-auto-flow</a></li> <li><a href="/css/css3/properties/css_grid-auto-rows.cfm">grid-auto-rows</a></li> <li><a href="/css/css3/properties/css_grid-column-end.cfm">grid-column-end</a></li> <li><a href="/css/css3/properties/css_grid-column-gap.cfm">grid-column-gap</a></li> <li><a href="/css/css3/properties/css_grid-column-start.cfm">grid-column-start</a></li> <li><a href="/css/css3/properties/css_grid-column.cfm">grid-column</a></li> <li><a href="/css/css3/properties/css_grid-gap.cfm">grid-gap</a></li> <li><a href="/css/css3/properties/css_grid-row-end.cfm">grid-row-end</a></li> <li><a href="/css/css3/properties/css_grid-row-gap.cfm">grid-row-gap</a></li> <li><a href="/css/css3/properties/css_grid-row-start.cfm">grid-row-start</a></li> <li><a href="/css/css3/properties/css_grid-row.cfm">grid-row</a></li> <li><a href="/css/css3/properties/css_grid-template-areas.cfm">grid-template-areas</a></li> <li><a href="/css/css3/properties/css_grid-template-columns.cfm">grid-template-columns</a></li> <li><a href="/css/css3/properties/css_grid-template-rows.cfm">grid-template-rows</a></li> <li><a href="/css/css3/properties/css_grid-template.cfm">grid-template</a></li> <li><a href="/css/css3/properties/css_grid.cfm">grid</a></li> </ul> </li> <li><h4>Animation</h4> <ul> <li><a href="/css/at-rules/css_keyframes_at-rule.cfm">@keframes</a></li> <li><a href="/css/css3/properties/css_animation.cfm">animation</a></li> <li><a href="/css/css3/properties/css_animation-delay.cfm">animation-delay</a></li> <li><a href="/css/css3/properties/css_animation-direction.cfm">animation-direction</a></li> <li><a href="/css/css3/properties/css_animation-duration.cfm">animation-duration</a></li> <li><a href="/css/css3/properties/css_animation-fill-mode.cfm">animation-fill-mode</a></li> <li><a href="/css/css3/properties/css_animation-iteration-count.cfm">animation-iteration-count</a></li> <li><a href="/css/css3/properties/css_animation-name.cfm">animation-name</a></li> <li><a href="/css/css3/properties/css_animation-play-state.cfm">animation-play-state</a></li> <li><a href="/css/css3/properties/css_animation-timing-function.cfm">animation-timing-function</a></li> </ul> </li> <li><h4 title="Flexible Box Layout">Flexbox</h4> <ul> <li><a href="/css/css3/properties/css_flex.cfm">flex</a></li> <li><a href="/css/css3/properties/css_flex-basis.cfm">flex-basis</a></li> <li><a href="/css/css3/properties/css_flex-direction.cfm">flex-direction</a></li> <li><a href="/css/css3/properties/css_flex-flow.cfm">flex-flow</a></li> <li><a href="/css/css3/properties/css_flex-grow.cfm">flex-grow</a></li> <li><a href="/css/css3/properties/css_flex-shrink.cfm">flex-shrink</a></li> <li><a href="/css/css3/properties/css_flex-wrap.cfm">flex-wrap</a></li> <li><a href="/css/css3/properties/css_order.cfm">order</a></li> </ul> </li> <li><h4>Transition</h4> <ul> <li><a href="/css/css3/properties/css_transition.cfm">transition</a></li> <li><a href="/css/css3/properties/css_transition-delay.cfm">transition-delay</a></li> <li><a href="/css/css3/properties/css_transition-duration.cfm">transition-duration</a></li> <li><a href="/css/css3/properties/css_transition-property.cfm">transition-property</a></li> <li><a href="/css/css3/properties/css_transition-timing-function.cfm">transition-timing-function</a></li> </ul> </li> <li><h4>Transform</h4> <ul> <li><a href="/css/css3/properties/css_backface-visibility.cfm">backface-visibility</a></li> <li><a href="/css/css3/properties/css_perspective.cfm">perspective</a></li> <li><a href="/css/css3/properties/css_perspective-origin.cfm">perspective-origin</a></li> <li><a href="/css/css3/properties/css_transform.cfm">transform</a></li> <li><a href="/css/css3/properties/css_transform-box.cfm">transform-box</a></li> <li><a href="/css/css3/properties/css_transform-origin.cfm">transform-origin</a></li> <li><a href="/css/css3/properties/css_transform-style.cfm">transform-style</a></li> </ul> </li> <li><h4>Multi-Column</h4> <ul> <li><a href="/css/css3/properties/css_break-after.cfm">break-after</a></li> <li><a href="/css/css3/properties/css_break-before.cfm">break-before</a></li> <li><a href="/css/css3/properties/css_break-inside.cfm">break-inside</a></li> <li><a href="/css/css3/properties/css_columns.cfm">columns</a></li> <li><a href="/css/css3/properties/css_column-count.cfm">column-count</a></li> <li><a href="/css/css3/properties/css_column-fill.cfm">column-fill</a></li> <li><a href="/css/css3/properties/css_column-rule.cfm">column-rule</a></li> <li><a href="/css/css3/properties/css_column-rule-color.cfm">column-rule-color</a></li> <li><a href="/css/css3/properties/css_column-rule-style.cfm">column-rule-style</a></li> <li><a href="/css/css3/properties/css_column-rule-width.cfm">column-rule-width</a></li> <li><a href="/css/css3/properties/css_column-span.cfm">column-span</a></li> <li><a href="/css/css3/properties/css_column-width.cfm">column-width</a></li> </ul> </li> <li><h4>Borders</h4> <ul> <li><a href="/css/css3/properties/css_border-radius.cfm">border-radius</a></li> <li><a href="/css/css3/properties/css_border-top-left-radius.cfm">border-top-left-radius</a></li> <li><a href="/css/css3/properties/css_border-top-right-radius.cfm">border-top-right-radius</a></li> <li><a href="/css/css3/properties/css_border-bottom-left-radius.cfm">border-bottom-left-radius</a></li> <li><a href="/css/css3/properties/css_border-bottom-right-radius.cfm">border-bottom-right-radius</a></li> <li><a href="/css/css3/properties/css_border-image.cfm">border-image</a></li> <li><a href="/css/css3/properties/css_border-image-outset.cfm">border-image-outset</a></li> <li><a href="/css/css3/properties/css_border-image-repeat.cfm">border-image-repeat</a></li> <li><a href="/css/css3/properties/css_border-image-source.cfm">border-image-source</a></li> <li><a href="/css/css3/properties/css_border-image-slice.cfm">border-image-slice</a></li> <li><a href="/css/css3/properties/css_border-image-width.cfm">border-image-width</a></li> </ul> </li> <li><h4>Color/Image Effects</h4> <ul> <li><a href="/css/css3/properties/css_caret-color.cfm">caret-color</a></li> <li><a href="/css/css3/properties/css_box-shadow.cfm">box-shadow</a></li> <li><a href="/css/css3/properties/css_filter.cfm">filter</a></li> <li><a href="/css/css3/properties/css_image-rendering.cfm">image-rendering</a></li> <li><a href="/css/css3/properties/css_isolation.cfm">isolation</a></li> <li><a href="/css/css3/properties/css_mix-blend-mode.cfm">mix-blend-mode</a></li> <li><a href="/css/css3/properties/css_object-fit.cfm">object-fit</a></li> <li><a href="/css/css3/properties/css_object-position.cfm">object-position</a></li> <li><a href="/css/css3/properties/css_opacity.cfm">opacity</a></li> <li><a href="/css/css3/gradients/linear_gradients.cfm">Linear Gradients</a></li> <li><a href="/css/css3/gradients/radial_gradients.cfm">Radial Gradients</a></li> <li><a href="/css/css3/gradients/">CSS Gradients</a></li> </ul> </li> <li><h4>Text Decoration</h4> <ul> <li><a href="/css/css3/properties/css_text-decoration.cfm">text-decoration</a></li> <li><a href="/css/css3/properties/css_text-decoration-line.cfm">text-decoration-line</a></li> <li><a href="/css/css3/properties/css_text-decoration-style.cfm">text-decoration-style</a></li> <li><a href="/css/css3/properties/css_text-decoration-color.cfm">text-decoration-color</a></li> <li><a href="/css/css3/properties/css_text-decoration-skip.cfm">text-decoration-skip</a></li> <li><a href="/css/css3/properties/css_text-underline-position.cfm">text-underline-position</a></li> </ul> </li> <li><h4>New Background Properties</h4> <ul> <li><a href="/css/css3/properties/css_background-blend-mode.cfm">background-blend-mode</a></li> <li><a href="/css/css3/properties/css_background-clip.cfm">background-clip</a></li> <li><a href="/css/css3/properties/css_background-origin.cfm">background-origin</a></li> <li><a href="/css/css3/properties/css_background-size.cfm">background-size</a></li> </ul> </li> <li><h4>Overflow/Resize</h4> <ul> <li><a href="/css/css3/properties/css_overflow.cfm">overflow</a></li> <li><a href="/css/css3/properties/css_overflow-wrap.cfm">overflow-wrap</a></li> <li><a href="/css/css3/properties/css_overflow-x.cfm">overflow-x</a></li> <li><a href="/css/css3/properties/css_overflow-y.cfm">overflow-y</a></li> <li><a href="/css/css3/properties/css_resize.cfm">resize</a></li> <li><a href="/css/css3/properties/css_text-overflow.cfm">text-overflow</a></li> </ul> </li> <li><h4>Text Wrapping</h4> <ul> <li><a href="/css/css3/properties/css_hyphens.cfm">hyphens</a></li> <li><a href="/css/css3/properties/css_line-break.cfm">line-break</a></li> <li><a href="/css/css3/properties/css_word-break.cfm">word-break</a></li> <li><a href="/css/css3/properties/css_word-wrap.cfm">word-wrap</a></li> </ul> </li> <li><h4>New Font Properties</h4> <ul> <li><a href="/css/css3/properties/css_font-feature-settings.cfm">font-feature-settings</a></li> <li><a href="/css/css3/properties/css_font-kerning.cfm">font-kerning</a></li> <li><a href="/css/css3/properties/css_font-language-override.cfm">font-language-override</a></li> <li><a href="/css/css3/properties/css_font-synthesis.cfm">font-synthesis</a></li> <li><a href="/css/css3/properties/css_font-variant-alternates.cfm">font-variant-alternates</a></li> <li><a href="/css/css3/properties/css_font-variant-caps.cfm">font-variant-caps</a></li> <li><a href="/css/css3/properties/css_font-variant-east-asian.cfm">font-variant-east-asian</a></li> <li><a href="/css/css3/properties/css_font-variant-ligatures.cfm">font-variant-ligatures</a></li> <li><a href="/css/css3/properties/css_font-variant-numeric.cfm">font-variant-numeric</a></li> <li><a href="/css/css3/properties/css_font-variant-position.cfm">font-variant-position</a></li> </ul> </li> <li><h4>New Alignment Properties</h4> <ul> <li><a href="/css/css3/properties/css_align-content.cfm">align-content</a></li> <li><a href="/css/css3/properties/css_align-items.cfm">align-items</a></li> <li><a href="/css/css3/properties/css_align-self.cfm">align-self</a></li> <li><a href="/css/css3/properties/css_column-gap.cfm">column-gap</a></li> <li><a href="/css/css3/properties/css_gap.cfm">gap</a></li> <li><a href="/css/css3/properties/css_justify-content.cfm">justify-content</a></li> <li><a href="/css/css3/properties/css_justify-items.cfm">justify-items</a></li> <li><a href="/css/css3/properties/css_justify-self.cfm">justify-self</a></li> <li><a href="/css/css3/properties/css_place-content.cfm">place-content</a></li> <li><a href="/css/css3/properties/css_place-items.cfm">place-items</a></li> <li><a href="/css/css3/properties/css_place-self.cfm">place-self</a></li> <li><a href="/css/css3/properties/css_row-gap.cfm">row-gap</a></li> </ul> </li> <li><h4>Text Manipulation</h4> <ul> <li><a href="/css/css3/properties/css_hanging-punctuation.cfm">hanging-punctuation</a></li> <li><a href="/css/css3/properties/css_tab-size.cfm">tab-size</a></li> <li><a href="/css/css3/properties/css_text-align-all.cfm">text-align-all</a></li> <li><a href="/css/css3/properties/css_text-align-last.cfm">text-align-last</a></li> <li><a href="/css/css3/properties/css_text-justify.cfm">text-justify</a></li> </ul> </li> <li><h4>Keyboard Control</h4> <ul> <li><a href="/css/css3/properties/css_nav-up.cfm">nav-up</a></li> <li><a href="/css/css3/properties/css_nav-down.cfm">nav-down</a></li> <li><a href="/css/css3/properties/css_nav-left.cfm">nav-left</a></li> <li><a href="/css/css3/properties/css_nav-right.cfm">nav-right</a></li> </ul> </li> <li><h4>Speech Media</h4> <ul> <li><a href="/css/css3/properties/css_rest-after.cfm">rest-after</a></li> <li><a href="/css/css3/properties/css_rest-before.cfm">rest-before</a></li> <li><a href="/css/css3/properties/css_rest.cfm">rest</a></li> <li><a href="/css/css3/properties/css_speak-as.cfm">speak-as</a></li> <li><a href="/css/css3/properties/css_voice-balance.cfm">voice-balance</a></li> <li><a href="/css/css3/properties/css_voice-duration.cfm">voice-duration</a></li> <li><a href="/css/css3/properties/css_voice-pitch.cfm">voice-pitch</a></li> <li><a href="/css/css3/properties/css_voice-range.cfm">voice-range</a></li> <li><a href="/css/css3/properties/css_voice-rate.cfm">voice-rate</a></li> <li><a href="/css/css3/properties/css_voice-stress.cfm">voice-stress</a></li> <li><a href="/css/css3/properties/css_voice-volume.cfm">voice-volume</a></li> </ul> </li> <li><h4>Other New Properties</h4> <ul> <li><a href="/css/css3/properties/css_--.cfm">--*</a></li> <li><a href="/css/css3/properties/css_all.cfm">all</a></li> <li><a href="/css/css3/properties/css_bleed.cfm">bleed</a></li> <li><a href="/css/css3/properties/css_box-sizing.cfm">box-sizing</a></li> <li><a href="/css/css3/properties/css_box-decoration-break.cfm">box-decoration-break</a></li> <li><a href="/css/css3/properties/css_color-interpolation-filters.cfm">color-interpolation-filters</a></li> <li><a href="/css/css3/properties/css_flood-color.cfm">flood-color</a></li> <li><a href="/css/css3/properties/css_flood-opacity.cfm">flood-opacity</a></li> <li><a href="/css/css3/properties/css_lighting-color.cfm">lighting-color</a></li> <li><a href="/css/css3/properties/css_outline-offset.cfm">outline-offset</a></li> <li><a href="/css/css3/properties/css_text-combine-upright.cfm">text-combine-upright</a></li> <li><a href="/css/css3/properties/css_text-orientation.cfm">text-orientation</a></li> <li><a href="/css/css3/properties/css_will-change.cfm">will-change</a></li> <li><a href="/css/css3/properties/css_writing-mode.cfm">writing-mode</a></li> </ul> </li> </ul> </li> <li> <h3><a href="/css/reference/">CSS Reference</a></h3> <ul> <li><a href="/css/examples/" title="Copy & paste code examples.">CSS Examples</a></li> <li><a href="/css/properties/" title="All CSS properties listed alphabetically.">CSS Properties</a></li> <li><a href="/css/functions/" title="All CSS functions listed alphabetically.">CSS Functions</a></li> <li><a href="/css/data_types/" title="">CSS Data Types</a></li> <li><a href="/css/at-rules/" title="">CSS @-Rules</a></li> <li><a href="/css/selectors/" title="All CSS selectors.">CSS Selectors</a></li> <li><a href="/css/css3/animations/animatable_properties/" title="Properties that support CSS animations.">CSS Animatable Properties</a></li> <li><a href="/css/color/" title="Full CSS color reference, includes color picker, charts, generators, and more.">CSS Color</a></li> <li><a href="/css/css_color_codes.cfm" title="">CSS Color Codes</a></li> <li><a href="/css/tutorial/" title="">CSS Tutorial</a></li> <li><a href="/css/flexbox/tutorial/" title="">Flexbox Tutorial</a></li> <li><a href="/css/grid/tutorial/" title="">Grid Tutorial</a></li> <li><a href="/css/css_media_types.cfm" title="Use CSS to apply a separate style depending on the media type that is displaying your web page">CSS Media Types</a></li> <li><a href="/css/css_media_features.cfm" title="Use CSS to apply a separate style depending on the media features available in the output device">CSS Media Features</a></li> <li><a href="/bootstrap/tutorial/" title="Bootstrap is a free and open-source framework for creating websites and web applications.">Bootstrap Tutorial</a></li> <li><a href="/sass/tutorial/" title="Sass is a CSS preprocessor to help create maintainable style sheets.">Sass Tutorial</a></li> </ul> </li> </ul> </nav> <div class="ad ad-left"> <!-- GAM 71161633/QCKIT_quackit/article_vrec_2 --> <div data-fuse="23059511712"></div> </div> </div> <div class="ads"> <div class="ad ad-right"> <!-- GAM 71161633/QCKIT_quackit/article_vrec_1 --> <div data-fuse="23059883626"></div> </div> </div> </div> <div class="searchbox-bottom"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:npmuvy-i8kk"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="30" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> <script src="//cse.google.com/cse/brand?form=cse-search-box-bottom&lang=en"></script> </div> <footer> <p class="about"><a href="/"><i class="fa fa-home"></i> Home</a> | <a href="/about.cfm" rel="nofollow">About</a> | <a href="/contact.cfm" rel="nofollow">Contact</a> | <a href="/terms_of_use.cfm" rel="nofollow">Terms of Use</a> | <a href="/privacy_policy.cfm" rel="nofollow">Privacy Policy</a></p> <p>© Copyright 2000 - 2024 Quackit.com </p> </footer> <script src="/common/js/spectrum/spectrum.js"></script> <script src="/common/js/lightbox2-master/dist/js/lightbox.min.js" charset="utf-8"></script> <script> $(document).ready(function(){ $( "#site-nav-toggler" ).click(function() { $( "#site-nav" ).toggle( "slow" ); }); }); </script> <script> $(function(){var a=window.location.href;$(".sidebar nav a").each(function(){a==this.href&&$(this).closest("li").addClass("selected")})}); </script> </body> </html>