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. Move the origin of the center radius down 60 pixels. See the fire effect code for more 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 the 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 cropp 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.


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 a bright colored origin 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.

Fireball Effect

Th bright sun in the dark 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 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 very wide array of effects. For example the particle explosion was generated with radial gradients. Try various colors, stops, and settings to discover new effects. For example fire effects might look more realistic with cropped bottom gradients and flame height greater than flame width. In other words the flame would extend upward.

Perhaps the most compelling effects are generated with animated gradients. However be careful. Many mobile devices slow down when processing many animated radial gradient particles.


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, sun, explosion, and rainbow effect, with radial gradients alone.

See more HTML5 color effects. Have fun and love learning!

More HTML5 Color Effects

Animated Effects
Copyright © 2015 Seven Thunder Software. All Rights Reserved.