Copyright © tutorialspoint.com

CSS Filters - Text and Image Effects

previous next


Advertisements

You can use CSS filters to add special effects to text, images and other aspects of a webpage without using images or other graphics. Filters only work on Internet Explorer 4.0+,. So if you are developing your site for multi browsers then it may not be a good idea to use CSS filters because there is a possibility that it would not give any advantage.

In this tutorial we will see detail of each CSS filter. These filters may not work in your browser.

Alpha Channel

This filter alters the opacity of the object, which makes it blend into the background. Following are the parameters which can be used in this filter:

ParameterDescription
opacityLevel of the opacity. 0 is fully transparent, 100 is fully opaque.
finishopacityLevel of the opacity at the other end of the object.
styleThe shape of the opacity gradient.

0 = uniform
1 = linear
2 = radial
3 = rectangular
startXX coordinate for opacity gradient to begin.
startYY coordinate for opacity gradient to begin.
finishXX coordinate for opacity gradient to end.
finishYY coordinate for opacity gradient to end.

Example:

<p>Image Example:</p>
<img src="/images/css.gif" alt="CSS Logo" style="Filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)">

<p>Text Example:</p>
<div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: blue; Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)">CSS Tutorials</div>

This will produce following result:

Image Example:

CSS Logo

Text Example:

CSS Tutorials

To Become more comfortable - Do Online Practice

Motion Blur

This will be used to create blurred pictures or text with the direction and strength. Following are the parameters which can be used in this filter:

ParameterDescription
addTrue or false. If true the image is added to the blurred image and if false the image is not added to the blurred image.
directionThe direction of the blur, going clockwise, rounded to 45-degree increments. The default value is 270 (left).

0 = Top
45 = Top right
90 = Right
135 = Bottom right
180 = Bottom
225 = Bottom left
270 = Left
315 = Top left
strengthThe number of pixels the blur will extend. The default is 5 pixels.

Example:

<p>Image Example:</p>
<img src="/images/css.gif" alt="CSS Logo" style="Filter: Blur(Add = 0, Direction = 225, Strength = 10)">

<p>Text Example:</p>
<div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: blue; Filter: Blur(Add = 1, Direction = 225, Strength = 10)">CSS Tutorials</div>

This will produce following result:

Image Example:

CSS Logo

Text Example:

CSS Tutorials

To Become more comfortable - Do Online Practice

Chroma Filter

This will be used to make any particular color transparent and usually it is used with images. You can use it with scrollbars also.Following are the parameters which can be used in this filter:

ParameterDescription
color The color that you'd like to be transparent.

Example:

<p>Image Example:</p>
<img src="/images/css.gif" alt="CSS Logo" style="Filter: Chroma(Color = #FFFFFF)">

<p>Text Example:</p>
<div style="width: 580; height: 50; font-size: 30pt; font-family: Arial Black; color: #3300FF; Filter: Chroma(Color = #3300FF)">CSS Tutorials</div>

This will produce following result:

Image Example:

CSS Logo

Text Example:

CSS Tutorials

To Become more comfortable - Do Online Practice

Drop Shadow Effect

This will be used to create a shadow of your object at the specified X (horizontal) and Y (vertical) offset and color. . Following are the parameters which can be used in this filter:

ParameterDescription
color The color, in #RRGGBB format, of the dropshadow.
offX Number of pixels the drop shadow is offset from the visual object, along the x-axis. Positive integers move the drop shadow to the right, negative integers move the drop shadow to the left.
offY Number of pixels the drop shadow is offset from the visual object, along the y-axis. Positive integers move the drop shadow down, negative integers move the drop shadow up.
positiveIf true, all opaque pixels of the object have a dropshadow. If false, all transparent pixels have a dropshadow. The default is true.

Example:

<p>Image Example:</p>
<img src="/images/css.gif" alt="CSS Logo" style="Filter: Chroma(Color = #000000) DropShadow(Color=#FF0000, OffX=2, OffY=2, Positive=1)">

<p>Text Example:</p>
<div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: DropShadow(Color=#000000, OffX=2, OffY=2, Positive=1)">CSS Tutorials</div>

This will produce following result:

Image Example:

CSS Logo

Text Example:

CSS Tutorials

To Become more comfortable - Do Online Practice

Flip Effect

This will be used to create a mirror image of the object. Following are the parameters which can be used in this filter:

ParameterDescription
FlipH Creates a horizontal mirror image
FlipV Creates a vertical mirror image

Example:

<p>Image Example:</p>
<img src="/images/css.gif" alt="CSS Logo" style="Filter: FlipH">

<img src="/images/css.gif" alt="CSS Logo" style="Filter: FlipV">

<p>Text Example:</p>
<div style="width: 300; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: FlipV">CSS Tutorials</div>

This will produce following result:

Image Example:

CSS Logo

CSS Logo

Text Example:

CSS Tutorials

To Become more comfortable - Do Online Practice

Glow Effect

This will be used to create a glow around the object. If it is a transparent image then glow is created around the opaque pixels of it. Following are the parameters which can be used in this filter:

ParameterDescription
color The color you want the glow to be.
strengthThe intensity of the glow (from 1 to 255).

Example:

<p>Image Example:</p>
<img src="/images/css.gif" alt="CSS Logo" style="Filter: Chroma(Color = #000000) Glow(Color=#00FF00, Strength=20)">

<p>Text Example:</p>
<div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: Glow(Color=#00FF00, Strength=20)">CSS Tutorials</div>

This will produce following result:

Image Example:

CSS Logo

Text Example:

CSS Tutorials

To Become more comfortable - Do Online Practice

Grayscale Effect

This will be used to convert the colors of the object to 256 shades of gray. Following are the parameters which can be used in this filter:

ParameterDescription
gray Converts the colors of the object to 256 shades of gray.

Example:

<p>Image Example:</p>
<img src="/images/css.gif" alt="CSS Logo" style="Filter: Gray">

<p>Text Example:</p>
<div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: Gray">CSS Tutorials</div>

This will produce following result:

Image Example:

CSS Logo

Text Example:

CSS Tutorials

To Become more comfortable - Do Online Practice

Invert Effect

This will be used to map the colors of the object to their opposite value in the color spectrum ie. to create a negative image. Following are the parameters which can be used in this filter:

ParameterDescription
InvertMaps the colors of the object to their opposite value in the color spectrum.

Example:

<p>Image Example:</p>
<img src="/images/css.gif" alt="CSS Logo" style="Filter: invert">

<p>Text Example:</p>
<div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: invert">CSS Tutorials</div>

This will produce following result:

Image Example:

CSS Logo

Text Example:

CSS Tutorials

To Become more comfortable - Do Online Practice

Mask Effect

This will be used to turn transparent pixels to a specified color and makes opaque pixels transparent. Following are the parameters which can be used in this filter:

ParameterDescription
color The color that the transparent areas will become.

Example:

<p>Image Example:</p>
<img src="/images/css.gif" alt="CSS Logo" style="FILTER: Chroma(Color = #000000) Mask(Color=#00FF00)">

<p>Text Example:</p>
<div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: Mask(Color=#00FF00)">CSS Tutorials</div>

This will produce following result:

Image Example:

CSS Logo

Text Example:

CSS Tutorials

To Become more comfortable - Do Online Practice

Shadow Filter

This will be used to create an attenuated shadow in the direction and color specified. This is a filter lies in between Dropshadow and a Glow. Following are the parameters which can be used in this filter:

ParameterDescription
color The color that you want the shadow to be.
directionThe direction of the blur, going clockwise, rounded to 45-degree increments. The default value is 270 (left).

0 = Top
45 = Top right
90 = Right
135 = Bottom right
180 = Bottom
225 = Bottom left
270 = Left
315 = Top left

Example:

<p>Image Example:</p>
<img src="/images/css.gif" alt="CSS Logo" style="FILTER: Chroma(Color = #000000) Shadow(Color=#00FF00, Direction=225)">

<p>Text Example:</p>
<div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: Shadow(Color=#0000FF, Direction=225)">CSS Tutorials</div>

This will produce following result:

Image Example:

CSS Logo

Text Example:

CSS Tutorials

To Become more comfortable - Do Online Practice

Wave Effect

This will be used to gives the object a sine wave distortion to make it look wavey. Following are the parameters which can be used in this filter:

ParameterDescription
addA value of 1 adds the original image to the waved image, 0 does not.
freq The number of waves.
lightThe strength of the light on the wave (from 0 to 100).
phase At what degree the sine wave should start (from 0 to 100).
strength The intensity of the wave effect.

Example:

<p>Image Example:</p>
<img src="/images/css.gif" alt="CSS Logo" style="FILTER: Chroma(Color = #000000) Wave(Add=0, Freq=1, LightStrength=10, Phase=220, Strength=10)">

<p>Text Example:</p>
<div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: Wave(Add=0, Freq=1, LightStrength=10, Phase=20, Strength=20)">CSS Tutorials</div>

This will produce following result:

Image Example:

CSS Logo

Text Example:

CSS Tutorials

To Become more comfortable - Do Online Practice

X-Ray Effect

This will be used to grayscales and flattens the color depth. Following are the parameters which can be used in this filter:

ParameterDescription
xrayGrayscales and flattens the color depth.

Example:

<p>Image Example:</p>
<img src="/images/css.gif" alt="CSS Logo" style="Filter: Xray"">

<p>Text Example:</p>
<div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; style="Filter: Xray">CSS Tutorials</div>

This will produce following result:

Image Example:

CSS Logo

Text Example:

CSS Tutorials

To Become more comfortable - Do Online Practice

previous next

Copyright © tutorialspoint.com