Image Filters

Note for all Filters: To combine more than one filter just insert them like the example below.

<img src="Your Image URL" style="filter:wave(add=false freq=5 lightStrength=19 phase=89 strength=20) mask(color=#777777) glow(color=#AABBCC strength=20) ">

Alpha

For a single image

<img src="Your Image URL" style="filter:filter:alpha (Color=#0080FF, Strength=7)alpha(Opacity=100, FinishOpacity=15, Style=2, StartX=0, FinishX=80, StartY=0, FinishY=80)">

For a whole page

<style>
img{filter:alpha (Color=#0080FF, Strength=7)alpha(Opacity=100, FinishOpacity=15, Style=2, StartX=0, 
FinishX=80, StartY=0, FinishY=80)}
</style>

Values

Opacity = Sets the opacity
FinishOpacity = Sets the finished opacity
Style = 0,1,2,3, ("uniform", "linear", "radial", "rectangular")
startX = x gradient for opacity grade to begin
startY = y cordinate for opacity grade to begin
finishX = x gradient for opacity grade to finish
finishY = y gradient for opacity grade to begin

Blur

For a single image

<img src="Your Image URL" style="filter:blur(add=false direction=0 strength=20)">

For a whole page

<style>
img{filter:blur(add=false direction=0 strength=20)}
</style>

Values

add = False or True
direction = Set to one of these numbers (0, 45, 90, 135, 180, 225, 270, 315),("Top", "Top right", "Right", "Bottom right", "Bottom", "Bottom left", "Left", "Top left")
strength = Pick a number 1 - 1000

Flip Horizonal

For a single image

<img src="Your Image URL" style="filter:flipH() ">

For a whole page

<style>
img{filter:flipH()}
</style>

Values

None

Flip Vertical

For a single image

<img src="Your Image URL" style="filter:flipV() ">

For a whole page

<style>
img{filter:flipV()}
</style>

Values

None
Glow

For a single image

<img src="Your Image Url" style="filter:glow(color=blue strength=60) ">

Values

color = The color for the effect strength = Intensity of the glow (from 1 - 255)

Special Note

Appears to only work on .gif images

Gray

For a single image

<img src="Your Image URL" style="filter:gray()  ">

For a whole page

<style>
img{filter:gray() }
</style>

Values

None

Invert

For a single image

<img src="Your Image URL" style="filter:invert()">

For a whole page

<style>
img{filter:invert() }
</style>

Values

None

Mask

For a single image

<img src="Your Image URL" style="filter:mask(color=#777777)">

Values

Color=#000000 = The color for the transparent regions are painted")

Wave

For a single image

<img src="Your Image URL" style="filter:mask(color=#777777)">

For a whole page

<style>
img{filter:wave(add=true freq=5 lightStrength=19 phase=89 strength=20) "="}
</style>

Values

add = True or False. Whether to add the original image to the waved image.
freq = Integer number of waves to appear in the visual distortion.
lightStrength = Strength of the light on the wave effect (0 to 100).
phase = Phase offset for the start of the sine wave effect, which is normally 0 degrees. Value between 0 and 100, which expresses the percentage of the wavelength at which offset should start. For example, a value of 25 starts sine wave effect at 90 degrees. A value of 360 is the equivalent of 0.
strength = Intensity of the wave effect

Xray

For a single image

<img src="Your Image URL" style="filter:xray() ">

For a whole page

<style>
img{filter:xray() }
</style>

Values

None