CSS filters text and image effects
CSS Filters Text and Image Effects
You can use CSS filters to add special effects to text, https://coder-cafe.com/wp-content/uploads/2025/09/images, and other aspects of a web page without using https://coder-cafe.com/wp-content/uploads/2025/09/images or other graphics. Filters only work with Internet Explorer 4.0. If you are developing a website for multiple browsers, using CSS filters is probably not a good idea, as it may not provide any advantages.
In this chapter, we will learn about each CSS filter in detail. These filters may not work properly in your browser.
Alpha Channel
The Alpha Channel filter changes the opacity of an object, making it blend into the background. The following parameters can be used with this filter:
| Number | Parameters and Description |
|---|---|
| 1 | opacity Opacity level. 0 is completely transparent, 100 is completely opaque. |
| 2 | finishopacity Opacity level at the other end of the object. |
| 3 | style Opacity gradient shape. 0 = Uniform 1 = Linear 2 = Radial 3 = Rectangular |
| 4 | startX The X coordinate where the opacity gradient starts. |
| 5 | startY The Y coordinate where the opacity gradient starts. |
| 6 | finishX The X coordinate where the opacity gradient ends. |
| 7 | finishY The Y coordinate where the opacity gradient ends. |
Example
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "https://deepinout.com/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png" 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>
</body>
</html>
It will produce the following result −
Motion Blur
Motion Blur is used to blur an image or text in a specific direction and intensity. The following parameters can be used with this filter −
Table:
| Number | Parameter and Description |
|---|---|
| 1 | add True or false. If true, the image is added to the blurred image; if false, the image is not added to the blurred image. |
| 2 | direction The direction of the blur, measured clockwise in 45-degree increments. Default is 270 (left). 0 = top 45 = top right 90 = right 135 = bottom right 180 = bottom 225 = bottom left 270 = left 315 = top left |
| 3 | strength The number of pixels the blur will extend. Default is 5 pixels. |
Example
<html>
<head>
</head>
<body>
<p> Image Example:</p>
<img src = "https://deepinout.com/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png" 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>
</body>
</html>
It will produce the following result −
Chroma Filter
The chroma filter is used to make any specific color transparent and is commonly used with https://coder-cafe.com/wp-content/uploads/2025/09/images. You can also use it with scrollbars. The following parameters can be used with this filter.
| Number | Parameter and Description |
|---|---|
| 1 | color The color you want to be transparent. |
Example
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "https://deepinout.com/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png"
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> </body>
</html>
This will produce the following result −
Drop Shadow Effect
Drop Shadow creates a shadow of an object at a specified X (horizontal) and Y (vertical) offset and color.
The following parameters can be used with this filter:
| Number | Parameter and Description |
|---|---|
| 1 | color The color of the shadow, expressed in #RRGGBB format. |
| 2 | offX The number of pixels the shadow should be offset from the visible object on the x-axis. A positive integer shifts the shadow to the right, a negative integer shifts it to the left. |
| 3 | offY The number of pixels the shadow should be offset from the visible object on the y-axis. Positive integers move the shadow downward, negative integers move it upward. |
| 4 | positive If true, all opaque pixels of the object are shadowed. If false, all transparent pixels are shadowed. Default value is true. |
Example
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "https://deepinout.com/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png"
alt = "CSS Logo"
style = "filter:drop-shadow(2px 2px 1px #FF0000);">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter:drop-shadow(3px 3px 2px #000000);">CSS Tutorials</div>
</body>
</html>
It will produce the following result –
Flip Effect
The Flip effect is used to create a mirror image of an object. The following parameters can be used with this filter –
| Number | Parameter and Description |
|---|---|
| 1 | FlipH Creates a horizontal mirror image |
| 2 | FlipV Creates a vertical mirror image |
Example
<html>
<head>
</head>
<body>
<p>Image Example: </p>
<img src = "https://deepinout.com/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png"
alt = "CSS Logo"
style = "filter: FlipH">
<img src = "https://deepinout.com/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png" 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>
</body>
</html>
It will produce the following result −
Glow Effect
The Glow effect creates a glow around an object. For transparent https://coder-cafe.com/wp-content/uploads/2025/09/images, it creates a glow around opaque pixels. Use the following parameters to apply this filter:
| Number | Parameter & Description |
|---|---|
| 1 | color The color you want the glow to be. |
| 2 | strength The strength of the glow (from 1 to 255). |
Example
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "https://deepinout.com/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png"
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>
</body>
</html>
It will produce the following result −
Grayscale Effect
The Grayscale effect is used to convert the color of an object to 256 shades of gray. The following parameters are used in this filter −
| Number | Parameter and Description |
|---|---|
| 1 | grayscale Converts the object’s color to 256 shades of gray. |
Example
<html>
<head>
</head>
<body>
<p>Image Example: </p>
<img src = "https://deepinout.com/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png"
alt = "CSS Logo"
style = "filter: grayscale(50%)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: grayscale(50%)">CSS Tutorials</div>
</body>
</html> It will produce the following result −
Invert Effect
The Invert effect maps the colors of an object to their opposite values in the color spectrum, creating a negative image. This filter uses the following parameters −
| Number | Parameter & Description |
|---|---|
| 1 | Invert Maps the colors of an object to their opposite values in the color spectrum. |
Example
<html>
<head>
</head>
<body>
<p> Image Example:</p>
<img src = "https://deepinout.com/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png"
alt = "CSS Logo"
style = "filter: invert(100%)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: invert(100%)">CSS Tutorials</div>
</body>
</html> It will produce the following result −
Mask Effect
The mask effect is used to convert transparent pixels to a specified color and opaque pixels to transparent. This filter uses the following parameters: −
| Sr.No. | Parameter and Description |
|---|---|
| 1 | color The color that the transparent area will become. |
Example
<html>
<head>
</head>
<body>
<p> Image Example:</p>
<img src = "https://deepinout.com/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png"
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>
</body>
</html>
This will produce the following result:
Drop Shadow Filter
The Drop Shadow filter creates a drop shadow in a specified direction and color. It’s a filter between Dropshadow and Glow. Use the following parameters to use this filter:
| Number | Parameter and Description |
|---|---|
| 1 | color The color you want the shadow to be. |
| 2 | direction The direction of the blur, in 45-degree increments, in a clockwise direction. 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
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "https://deepinout.com/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png"
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>
</body>
</html>
This will produce the following result −
Wave Effect
The Wave effect adds a sinusoidal distortion to an object, making it look like a wave. Use the following parameters to use this filter:
| Sr.No. | Parameters and Descriptions |
|---|---|
| 1 | add A value of 1 adds the original image to the wave image; a value of 0 does not add. |
| 2 | freq The number of waves. |
| 3 | light The intensity of the light on the wave (from 0 to 100). |
| 4 | phase The angle at which the sine wave should start (from 0 to 100). |
| 5 | strength The strength of the wave effect. |
Example
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "https://deepinout.com/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png"
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>
</body>
</html>
It produces the following result –
X-Ray Effect
The X-Ray effect grayscales and flattens the color depth. The following parameters are used in this filter:
| Number | Parameter and Description |
|---|---|
| 1 | xray Grayscales and reduces the color depth. |
Example
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "https://deepinout.com/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png"
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;
filter: Xray">CSS Tutorials
</div>
</body>
</html>
It will produce the following results –
