The glow filter add the glow effect to the element.
#example {
filter: glow(color=red, strength=100);
}
| Attribute | Value | Explanation |
|---|---|---|
| color | color code or name | the color of the glow |
| strength | 1 - 255 |
the strength of the glow
1 = weakest 255 = strongest |
The original
<img src="image/friend.gif" alt="IMG" width="170" height="140"> <img src="image/friend2.gif" alt="IMG" width="170" height="140">
<div style="font: bold 170% sans-serif; width: 100%;">
Example text
</div>
Only the color of the glow
<div style="width: 90%; padding: 10px; filter: glow(color=red);"> <img src="image/friend.gif" alt="IMG" width="170" height="140"> </div>
<div style="width: 100%; filter: glow(color=red);"> <img src="image/friend2.gif" alt="IMG" width="170" height="140"> </div>
<div style="font: bold 170% sans-serif; width: 90%; padding: 10px; filter: glow(color=red);"> Example text </div>
The color and strength of the glow
<div style="width: 90%; padding: 15px; filter: glow(color=#ffff00, strength=30);"> <img src="image/friend2.gif" alt="IMG" width="170" height="140"> </div>
<div style="font: bold 170% sans-serif; width: 90%; padding: 15px; filter: glow(color=#ffff00, strength=15);"> Example text </div>