Creating Shadow Effect with HTML5

 HTML5 shadows are controlled by several operations available in HTML5 arsenal of operations. The shadow effect can be applied on any image, path, text or other HTML5 canvas elements. The way you want to trigger shadow effect is by setting shadowColor to some valid value.

Let’s look at some of the Shadow operation properties available in HTML5:

  • shadowColor – any CSS compliant color will work for this shadow operation property
  • shadowOffsetX – count set in pixels. Shadow effect applied to the right or if negative value, than to the left
  • shadowOffsetY – count set in pixel. Shadow effect applied to the left or if negative value, than to the right
  • shadowBlur – Gaussian blur effect. The higher the value you set for shadowBlur the blurrier shadow edges will become.

Here is sample code in HTML5 that adds shadow to a text. In this example we’ll apply shadow color and move shadow to the right by 5 pixels and up by 5 and then blur this shadow with Guassian effect set to 5. 


                function shadowExample(context) {

                    context.shadowColor = 'rgba(100, 100, 100, 100, 0.5)';

                    context.shadowOffsetX = 5;

                    context.shadowOffsetY = -5;

                    context.shadowBlur = 5;


</script> It is our recommendation that you use one approach while applying shadows to your images, text or other HTML5 canvas objects.  

Featured pages


Learn about HTML5 architecture, design principles and patterns on HTML5 Overview Tutorial. Become …


Learn about HTML5 tags and discover a new list of HTML5 tags. Find out about HTML5 tags support by…


 Learn HTML5 development techniques, tips and tricks on our website. Find out what is required…

Date Time Picker

HTML5 forms use date and time controls regularly. HTML5 date and time controls are used by booking …