> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/ja/style-spec/llms.txt)

# Rain

A style's `rain` property is a global styling effect that can be used to add animated rain to the map. This property can be used to create a rainy scene or match a designer's aesthetic. Rain provides a visual cue to improve the appearance of a map and can be used to create a more true-to-life atmosphere.

> **Related content (example): [Add a rain effect to a map](https://docs.mapbox.com/mapbox-gl-js/example/rain)**
> 
> See what a style using the `rain` property looks like in a web browser with Mapbox GL JS.

> **Related content (playground): [Rain and Snow Playground](https://docs.mapbox.com/mapbox-gl-js/example/rain)**
> 
> The rain and snow playground allows you to test these style values in browser, offering UI to adjust the particle density, intensity, color, speed, etc.

```json
"rain": {
  "density": 0.5,
  "intensity": 1.0,
  "color": "#a8adbc",
  "opacity": 0.7,
  "vignette": 1.0,
  "vignette-color": "#464646",
  "direction": [0, 80],
  "droplet-size": [2.6, 18.2],
  "distortion-strength": 0.7,
  "center-thinning": 0 
}
```

### center-thinning

EXPERIMENTAL

Optional [number](https://docs.mapbox.com/ja/ja/style-spec/reference/types/#number) between `0` and `1` inclusive. Defaults to `0.57`. Supports [`interpolate`](https://docs.mapbox.com/ja/ja/style-spec/reference/expressions/#interpolate)expressions. Transitionable.

Thinning factor of rain particles from center. 0 - no thinning. 1 - maximal central area thinning.

| SDK Support | Mapbox GL JS | Android SDK | iOS SDK |
| --- | --- | --- | --- |
| basic functionality | >= 3.9.0 | >= 11.9.0 | >= 11.9.0 |

### color

EXPERIMENTAL

Optional [color](https://docs.mapbox.com/ja/ja/style-spec/reference/types/#color) . Defaults to `["interpolate",["linear"],["measure-light","brightness"],0,"#03113d",0.3,"#a8adbc"]`. Supports [`interpolate`](https://docs.mapbox.com/ja/ja/style-spec/reference/expressions/#interpolate)expressions. Transitionable.

Individual rain particle dorplets color.

| SDK Support | Mapbox GL JS | Android SDK | iOS SDK |
| --- | --- | --- | --- |
| basic functionality | >= 3.9.0 | >= 11.9.0 | >= 11.9.0 |

### density

EXPERIMENTAL

Optional [number](https://docs.mapbox.com/ja/ja/style-spec/reference/types/#number) between `0` and `1` inclusive. Defaults to `["interpolate",["linear"],["zoom"],11,0,13,0.5]`. Supports [`interpolate`](https://docs.mapbox.com/ja/ja/style-spec/reference/expressions/#interpolate)expressions. Transitionable.

Rain particles density. Controls the overall screen density of the rain.

| SDK Support | Mapbox GL JS | Android SDK | iOS SDK |
| --- | --- | --- | --- |
| basic functionality | >= 3.9.0 | >= 11.9.0 | >= 11.9.0 |

### direction

EXPERIMENTAL

Optional [array](https://docs.mapbox.com/ja/ja/style-spec/reference/types/#array) of [numbers](https://docs.mapbox.com/ja/ja/style-spec/reference/types/#number) between `0` and `360` inclusive. Defaults to `[0,80]`. Supports [`interpolate`](https://docs.mapbox.com/ja/ja/style-spec/reference/expressions/#interpolate)expressions. Transitionable.

Main rain particles direction. Azimuth and polar angles.

```json
[
  0,
  45
]
```

| SDK Support | Mapbox GL JS | Android SDK | iOS SDK |
| --- | --- | --- | --- |
| basic functionality | >= 3.9.0 | >= 11.9.0 | >= 11.9.0 |

### distortion-strength

EXPERIMENTAL

Optional [number](https://docs.mapbox.com/ja/ja/style-spec/reference/types/#number) between `0` and `1` inclusive. Defaults to `0.7`. Supports [`interpolate`](https://docs.mapbox.com/ja/ja/style-spec/reference/expressions/#interpolate)expressions. Transitionable.

Rain particles screen-space distortion strength.

| SDK Support | Mapbox GL JS | Android SDK | iOS SDK |
| --- | --- | --- | --- |
| basic functionality | >= 3.9.0 | >= 11.9.0 | >= 11.9.0 |

### droplet-size

EXPERIMENTAL

Optional [array](https://docs.mapbox.com/ja/ja/style-spec/reference/types/#array) of [numbers](https://docs.mapbox.com/ja/ja/style-spec/reference/types/#number) between `0` and `50` inclusive. Defaults to `[2.6,18.2]`. Supports [`interpolate`](https://docs.mapbox.com/ja/ja/style-spec/reference/expressions/#interpolate)expressions. Transitionable.

Rain droplet size. x - normal to direction, y - along direction

```json
[
  0,
  45
]
```

| SDK Support | Mapbox GL JS | Android SDK | iOS SDK |
| --- | --- | --- | --- |
| basic functionality | >= 3.9.0 | >= 11.9.0 | >= 11.9.0 |

### intensity

EXPERIMENTAL

Optional [number](https://docs.mapbox.com/ja/ja/style-spec/reference/types/#number) between `0` and `1` inclusive. Defaults to `1`. Supports [`interpolate`](https://docs.mapbox.com/ja/ja/style-spec/reference/expressions/#interpolate)expressions. Transitionable.

Rain particles movement factor. Controls the overall rain particles speed

| SDK Support | Mapbox GL JS | Android SDK | iOS SDK |
| --- | --- | --- | --- |
| basic functionality | >= 3.9.0 | >= 11.9.0 | >= 11.9.0 |

### opacity

EXPERIMENTAL

Optional [number](https://docs.mapbox.com/ja/ja/style-spec/reference/types/#number) between `0` and `1` inclusive. Defaults to `["interpolate",["linear"],["measure-light","brightness"],0,0.88,1,0.7]`. Supports [`interpolate`](https://docs.mapbox.com/ja/ja/style-spec/reference/expressions/#interpolate)expressions. Transitionable.

Rain particles opacity.

| SDK Support | Mapbox GL JS | Android SDK | iOS SDK |
| --- | --- | --- | --- |
| basic functionality | >= 3.9.0 | >= 11.9.0 | >= 11.9.0 |

### vignette

EXPERIMENTAL

Optional [number](https://docs.mapbox.com/ja/ja/style-spec/reference/types/#number) between `0` and `1` inclusive. Defaults to `["interpolate",["linear"],["zoom"],11,0,13,1]`. Supports [`interpolate`](https://docs.mapbox.com/ja/ja/style-spec/reference/expressions/#interpolate)expressions. Transitionable.

Screen-space vignette rain tinting effect intensity.

| SDK Support | Mapbox GL JS | Android SDK | iOS SDK |
| --- | --- | --- | --- |
| basic functionality | >= 3.9.0 | >= 11.9.0 | >= 11.9.0 |

### vignette-color

EXPERIMENTAL

Optional [color](https://docs.mapbox.com/ja/ja/style-spec/reference/types/#color) . Defaults to `["interpolate",["linear"],["measure-light","brightness"],0,"#001736",0.3,"#464646"]`. Supports [`interpolate`](https://docs.mapbox.com/ja/ja/style-spec/reference/expressions/#interpolate)expressions. Transitionable.

Rain vignette screen-space corners tint color.

| SDK Support | Mapbox GL JS | Android SDK | iOS SDK |
| --- | --- | --- | --- |
| basic functionality | >= 3.9.0 | >= 11.9.0 | >= 11.9.0 |