3d text

this was made using one span with blur and then another one atop of it.

style="width: 200px; height: 70; color: black; filter: blur(add=0, direction=135, strength=10);"

>webfxstyle="position: relative; left: -201; top: -15; width: 200; color: #2984ff;">

webfx

glass text

same tecnique as above but both have alpha filters added.

style="width: 200px; height: 70; color: lightskyblue; filter: alpha(opacity=60) blur(add=0, direction=135, strength=20);"

>webfxstyle="position: relative; left: -201; top: -15; width: 200; color: lightskyblue; filter: alpha(opacity=60);"

>webfx

inner shadow

first i added a mask() to remove the inside, then a shadow() was added. since there is nothing inside the shadow

is displayed inside. then i removed the mask using chroma(). before this i added the same text with a white color and

the second text was moved above this using position: relative; left: -200px;

style="width: 200px; height: 70; color: white;"

>webfxstyle="width: 200px; height: 70; position: relative; left: -200; filter: mask(color=red) shadow(direction=135) chroma(color=red);"

>webfx

outline text

you could just add glow but it looks better if the glowing is placed on the inside. to do this

you add mask, glow and chroma.

webfx