---
title: "Style by the zoom range | Guides | Map design"
description: "Style map features based on the current zoom level."
---

# Style by the zoom range

This page describes how to **style your maps** based on the **zoom level** in MapTiler Map Designer. You can assign different colors, text sizes, or line widths on different zoom level ranges.

## Zoom range styling panel

You can find the panel after clicking on a layer in the **Layers tab** (Alt+L) > hover on any **styling property** > click on **three dots**.

![zoom-styling-panel.png](./17583042987665_f3561d4a31.webp)

In the [Dataviz map](https://cloud.maptiler.com/maps/dataviz-v4/), we are using zoom range styling for both the **outline color** and **width** of the Country border layer.

![zoom-styling-outline.png](./17582997139345_b0fd040bc6.webp)

![zoom-styling-width.png](./17583042991377_0351e6e76d.webp)

## How does it work

In the panel, you can **remove** or **add** the zoom level range stops and **adjust their values**. In the case of colors, a color picker will appear.

![zoom-styling-colors.png](./17583042993937_e310ba6256.webp)

You can check the desired changes when adjusting the zoom level on the map. The zoom range will also be changing in the color UI.

![zoom-styling-check.png](./17583042995345_b73f8a77bb.webp)

Besides colors, you can use zoom range styling for a variety of properties: line width, pattern, offset, blur, opacity, text size, justify, anchor, etc.

Some of the styling properties don’t support the zoom range styling yet. You will get a notification for this.

![zoom-styling-not-supported.png](./17582997144081_b143e018f8.webp)

## Function types

There are 4 function types that you can use in zoom range styling:

1.  **Linear interpolation**
2.  **Exponential interpolation**
3.  **Cubic Bezier interpolation**
4.  **Steps**

![zoom-styling-functions.png](./17583424110737_e23574c9b6.webp)

**Interpolation** produces **continuous**, smooth results by interpolating between pairs of input values.   
**Steps** produce **discrete** results (changes are visible between zoom levels).  
More details can be found in the [GL Style Specification](https://docs.maptiler.com/gl-style-specification/expressions/#interpolate).

## Conclusion

You can **style your maps based on zoom levels** in MapTiler Map Designer. Go to the **Styling tab** of a specific layer and click on the **three dots** to access the zoom range styling panel. **Remove** or **add** the zoom level range stops and **adjust their values**. There are 4 available function types: linear, exponential, and cubic bezier interpolation and steps.

## Next steps

Continue to [Add a new style layer](https://docs.maptiler.com/guides/map-design/add-a-new-style-layer/) to learn how to add a new style layer to a map in MapTiler Map Designer.

## Useful links

[Layer styling](https://docs.maptiler.com/guides/map-design/layer-styling)

[Interpolate | GL Style Specification](https://docs.maptiler.com/gl-style-specification/expressions/#interpolate)

[Step | GL Style Specification](https://docs.maptiler.com/gl-style-specification/expressions/#step)