HTML5 Gradient

Applying gradient requires three steps to be completed. 

  • 1.     Creation of the gradient object
  • 2.     Applying colors and stops where colors change. We need to call on addColorStop for identifying color stops.
  • 3.     Call on fillStyle or strokeStyle on the context

Gradient can be specified from point to point. If you set starting point as (0,0) and ending as (0,50) than fill or stroke will shift gradually from one color to another as specified by the user.

We can apply transparency value to the gradient as well as transition. If you want to apply these two commands then you need to use RGBA functions that has alpha component.

Code explains how to apply gradient is presented below.


                function gradientExample(context) {

                var grad = context.createLinearGradient(-1, -10,      1, -10);

                    grad.addColorStop(0, '#441100');

                    grad.addColorStop(0.4, '#772200');

                    context.fillStyle = grad;

                    context.fillRect(-1, -10, 5, 10);



This code will apply gradient to an object making it more appealing to the user. In addition, HTML5 provide capability to apply radial gradient that allows you to specify circular representation of colors.


In the example above; x and y represent center of the circle and r is a radius.

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 …