Radial Gradient Visual Effects Tutorial

Create Fire, Halo, Rainbow, Ball, Torus, Sun, Explosion Effects

Radial Gradient Effects Example Introductory Tutorial Fire Effects Donut Effects Rainbow Effect Create a Ball Halo Effects Explosion Particle Fireball Effect Tips Summary Source Code Page


This tutorial demonstrates how to create a set of visual effects with HTML5 radial gradients. This article explains how to create a fire effect, halo effect, donut or torus, ball, explosion, sun, and rainbow with JavaScript radial gradients alone. If you're unfamiliar with radial gradients see the introduction to radial gradients tutorial.

Learn to generate fire effects, halos, rainbows, donut torus, and explosion particle, fireball effect, and the appearance of three dimensional balls with JavaScript and HTML5.

Fire Effects

Select colors for fire effects with Photoshop's Color Picker dialog or a similar graphics application. Create a gradient with a number of opaque stops ranging from black through yellow to red. However radial gradients with rgba (Red, Green, Blue, and Alpha) color stops provide the appearance of more realistic fire. The example moves the origin of the center radius down 60 pixels. However consider more responsive Web design with coordinates scaled based on screen dimensions. Either way move the origin down or call method drawArc(), to render only a portion of a circle. See the fire effect code for details.

Torus or Donut Effects

Donut or Torus effects were created with a relatively sharp division between the inner radius and the start of the outer radius. The example uses a black canvas, therefore most of the inner radius includes black or near black color stops. The final radius is opaque black as well. The donut includes a highlight around the center of the outer radius. See the donut effect code for more details.

Rainbow Effect

The rainbow effect was generated with colors of the rainbow. Select the colors with Photoshop's Color Picker Dialog. Move the origin of the inner radius down by 30 pixels. Also crop the height in half. Cropping the height displays just the top half of the radial gradient as an arc. See the rainbow effect code for more details. Once again, consider applying scaled, rather than hard coded, dimensions for responsive Web design.


Modifying the color and location of the inner circle, provided a highlight for the ball. The highlight was declared with a light inner color and relatively sharp contrast between the inner color and outer colors. Additionally the origin of the inner circle was moved left 16 pixels and up 32 pixels. Moving the bright colored origin up and left, gives the illusion of light shining on the ball from the upper left. The outer gradient eases off in color. There's a a relatively sharp definition between the background color of the canvas, and the edge of the ball. See the ball effect code for more details.

Halo Effects

This example includes a couple of halo effects. The goal was to display a circle with gently fading color. The first effect displays a blue halo. The second effect displays a white halo with more gentle gradations. See the halo effect code for more details.

Bright Sun Effect

The bright sun or fireball effect demonstrates adding color stops. Use fractions of 1.0 to place additional color stops within the radius of the gradient. For example 1.0 displays along the perimeter of the circle. 0.0 displays at the origin of the circle. 0.50 displays between the origin and perimeter of the circle. See the sun effect code for more details.

Explosion One Particle

The explosion particle is useful for explosion visual effects when applied alone or with multiple particle explosions and global composition. This example introduces the most basic gradient where the origin of the circle starts at red, then gradually changes to black as it reaches the outside of the circle. See the explosion particle code for more details.


Experiment with radial gradients for a wide range of special effects. Try various colors, stops, and settings to discover new effects. For example consider creating more realistic fire effects with cropped bottom gradients, alpha transparency, and flame height greater than flame width. The flame could extend upward and blend with the background.

Perhaps the most compelling effects are generated with animated gradients. However be careful. Some mobile devices slow down when processing too many gradients.


This tutorial demonstrated how to create a set of effects with HTML5 radial gradients. This article explained how to create a fire effect, halo effect, donut or torus, ball, fireball, explosion, and rainbow effect, with radial gradients alone.

Web Development Company

Seven Thunder Software's Web programming skills include HTML5, CSS3, JavaScript, WebGL, GLSL and some PHP with MySQL. Web design skills include Web graphics with Photoshop, animation with After Effects and 3ds Max.

Website developers, Website developer, freelance Web developer, webdev, create a Website, Web creator, developer Website, new Website design, Webpage development, Website development company, Web development, Web projects, design a Website, html 5, Web GL, js, JavaScript code, JavaScripts, JavaScript program, css,
Copyright © 2019 Seven Thunder Software. All Rights Reserved.