Radial Gradient Visual Effects Tutorial
Create Fire, Halo, Rainbow, Ball, Torus, Sun, Explosion 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.
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.
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.
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.
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
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!