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

Introduction

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.

Ball

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.

Fireball Effect

The 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.

Tips

Experiment with radial gradients for a wide range of special effects. For example the particle explosion renders with radial gradients. 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.

Summary

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.

See more amazing radial gradients. Have fun and love learning!

Copyright © 2015 Seven Thunder Software. All Rights Reserved.