> Learn about color ramps, blends, and particle billboard mode in Babylon.js.

Source: https://doc.babylonjs.com/features/featuresDeepDive/particles/particle_system/ramps_and_blends

# Color Ramps, Blends, and Billboard Mode

## Ramp Gradients

> **Note:** Ramp gradients and color/alpha remaps are not supported for node particle systems.

Ramp gradients produce a gradient color texture by assigning a color to an index between 0 and 1.

![ramp gradient](https://doc.babylonjs.com/img/how_to/Particles/rampgrad.webp)

To produce a gradient color texture, such as the color bar above, you need the *addRampGradient* method:

```javascript
particleSystem.addRampGradient(fraction_of_bar, color3);
```

For this particular color bar, you use:

```javascript
particleSystem.addRampGradient(0.0, new BABYLON.Color3(1, 1, 1));
particleSystem.addRampGradient(0.09, new BABYLON.Color3(209/255, 204/255, 15/255));
particleSystem.addRampGradient(0.18, new BABYLON.Color3(221/255, 120/255, 14/255));
particleSystem.addRampGradient(0.28, new BABYLON.Color3(200/255, 43/255, 18/255));
particleSystem.addRampGradient(0.47, new BABYLON.Color3(115/255, 22/255, 15/255));
particleSystem.addRampGradient(0.88, new BABYLON.Color3(14/255, 14/255, 14/255));
particleSystem.addRampGradient(1.0, new BABYLON.Color3(14/255, 14/255, 14/255));
```

To use them, you need to turn them on:

```javascript
particleSystem.useRampGradients = true;
```

By default, the alpha value of the particle (built from `textureAlpha * particleColorAlpha`) is used as the index to get the ramp color from the ramp gradient using this formula: `finalColor = textureColor * particleColor * rampColor`.

Ramp gradient: [Playground: Ramp Gradient Example](https://playground.babylonjs.com/#I2D9MM#17) - Simple example of using ramp gradients.

To give you more control, you can use a remap function to change the index over time with:

```javascript
particleSystem.addColorRemapGradient(fraction_of_lifetime_elapsed, minimum_index, maximum_index); //set a range of values for the index at the given time point
```

```javascript
particleSystem.addColorRemapGradient(0, 0, 0.1);
particleSystem.addColorRemapGradient(0.2, 0.1, 0.8);
particleSystem.addColorRemapGradient(0.3, 0.2, 0.85);
particleSystem.addColorRemapGradient(0.35, 0.4, 0.85);
particleSystem.addColorRemapGradient(0.4, 0.5, 0.9);
particleSystem.addColorRemapGradient(0.5, 0.95, 1.0);
particleSystem.addColorRemapGradient(1.0, 0.95, 1.0);
```

The color remap gradients define a min and max that vary over the particle lifetime. The index is then remapped from [min, max] to [0, 1] with this formula: `finalIndex = clamp((index - min) / (max - min), 0.0, 1.0)`.

With remap over lifetime of particle: [Playground: Ramp Gradient With Remap Over Lifetime](https://playground.babylonjs.com/#E3VU3R#1) - Simple example of using ramp gradients with a remap over the lifetime of the particle.

Ultimately, you can also remap the alpha value generated per pixel with:

```javascript
particleSystem.addAlphaRemapGradient(0, 0, 0.1);
particleSystem.addAlphaRemapGradient(1.0, 0.1, 0.8);
```

The alpha remap will compute the final index value using this formula: `finalIndex = clamp((textureAlpha * particleColorAlpha * rampColor.a - min) / (max - min), 0.0, 1.0)`.

## Particle Blending

There are different ways that particles are blended with the scene, and these are set with `blendMode`.

```javascript
particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;
```

```javascript
particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_STANDARD;
```

* `BLENDMODE_ONEONE` - colors are added without alpha affecting the result (default).
* `BLENDMODE_STANDARD` - colors are added using the particle's alpha (i.e., color * (1 - alpha) + particleColor * alpha).
* `BLENDMODE_ADD` - colors are added, but only the particle color uses the particle's alpha (i.e., color + particleColor * alpha).
* `BLENDMODE_MULTIPLY` - colors are multiplied and added to (1 - alpha) (i.e., color * particleColor + 1 - alpha).
* `BLENDMODE_MULTIPLYADD` - two-pass rendering with `BLENDMODE_MULTIPLY` and then `BLENDMODE_ADD`.

## Billboard Modes

By default, all particles are rendered as billboards — that is, they face the camera. However, you can instead align them with the particle direction with:

```javascript
particleSystem.isBillboardBased = false;
```

When billboard mode is enabled, you can decide to either have a full billboard (on all axes) or only on the Y axis with this code:

```javascript
particleSystem.billboardMode = BABYLON.ParticleSystem.BILLBOARDMODE_Y;
```

You can also use stretched billboard, which works like full billboard mode but with an additional rotation to align particles with their direction.

```javascript
particleSystem.billboardMode = BABYLON.ParticleSystem.BILLBOARDMODE_STRETCHED;
```

## Examples

Billboard mode Y - steam: [Playground: Billboard Mode Y](https://playground.babylonjs.com/#B9HKG0#28) - Simple example of using billboard mode in Y.  
Billboard false - spherical: [Playground: Billboard Mode False](https://playground.babylonjs.com/#EV0SEQ#39) - Simple example of setting billboard mode to false.  
Multiply blend mode - smoke pillar: [Playground: Multiply Blend Mode](https://playground.babylonjs.com/#KUDH9F#46) - Simple example of setting particle blend mode to multiply.  
Add blend mode and billboard mode stretched - sparks (select scene, press space): [Playground: Add Blend Mode And Stretched Billboard Mode](https://playground.babylonjs.com/#M1HYFH#10) - Simple example of setting particle blend mode to add and billboard mode to stretched.  
Ramp and blend - explosion (select scene, press space): [Playground: Ramp and Blend](https://playground.babylonjs.com/#XPVJMM#5) - Simple example of a ramp and blend.