How can you represent overlapping energy fields?

I'm trying to create an object that has an energy field that is similar to that of a pylon from starcraft. Here is what I would like it to do:

1. Indicate the field's range

2. Indicate the field's power

3. Be able to overlap other fields

What's the best way to accomplish this?

My initial idea was to use a flattened cylinder that is transparent and self-illuminated with its color indicating the field direction (blue inward and red outward) and the color's richness indicating magnitude (red/blue being full force and gray being no force).

The issue is when these fields overlap there can be a lot of z-fighting. Here's some workarounds I've tried:

1. Use a top-down orthographic camera. This gets rid of the z-fighting for the most part, but severely limits how the game can be viewed. Also, when a blue field gets rendered before a red field, it looks much different from the other way around.

2. Offset the planes a little bit. Even when two planes were 4 units apart the front plane would switch to a darker shade depending on where the camera was.

3. Use spheres. A sphere inside another wouldn't even show up depending on the camera angle.

4. Use particle systems. If they get populated enough, they experience z-fighting as well.

I'd appreciate any new ideas or insight on how to make my current ideas work.