Best HTML5 SVG Shadow Tutorials with Examples

 Courses / Web Development /HTML5 Tutorials

Welcome to the world of design in HTML5 SVG Shadow

HTML5 has lots of new features for modern web designing. we can make shapes & images by the use of Canvas & SVG. In SVG , web designer can make ractange,

Some examples of SVG Shadow

1.First Example of SVG Shadow

Coding of this example

<svg height="250">
<defs>
<filter id="f1" x="0" y="0"> <feOffset result="offOut" in="SourceGraphic" dx="30" dy="30" />
<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
</filter>
</defs>
<rect width="150" height="150" stroke="black" stroke-width="3"
fill="red" filter="url(#f1)" />
</svg>


2.Second Example of SVG Offset with Shadow

Coding of this example

<svg>
<linearGradient y2="0.7067" x2="0.5" id="g" spreadMethod="repeat"
gradientTransform="rotate(-7.79,0.4033,0.45) translate(0,0.027) scale(1,0.94)" x1="0.3133" y1="0.46">
<stop stop-color="#F00" offset="0"/>
<stop stop-color="rgb(121, 76, 255)" offset="0.3433"/>
<stop stop-color="#0F0" offset="0.57"/>
<stop stop-color="#00F" offset="0.79"/>
<stop stop-color="#F0F" offset="0.98"/>
</linearGradient>
<rect width="100%" height="100%" fill="url(#g)"/>
</svg>


3.Third Example of SVG Offset with Shadow Color

Coding of this example

<svg height="250">
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="30" dy="30" />
<feColorMatrix result = "matrixOut" in = "offOut" type = "matrix" values = "0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0"/>
<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="150" height="150" stroke="black" stroke-width="3" fill="red" filter="url(#f1)" />
</svg>


4.Forth Example of SVG Offset with Blur

Coding of this example

<svg height="250">
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="30" dy="30" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="20" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="150" height="150" stroke="black" stroke-width="3" fill="red" filter="url(#f1)" />
</svg>