---
title: "Zebra Striping | Features"
description: "ZingGrid has default behaviors for displaying zebra striping. You can achieve this through one simple attribute or CSS styling."
url: https://www.zinggrid.com/docs/features/zebra-striping
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/features/zebra-striping.md
mode: provenance
representation: markdown
origin_response_id: 3fd399bf5776a27e9acda368d3a4d508
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.709Z
version_nonce: 6249e3707c027142eb4c9b91ad1a2437
generated_at_utc: 2026-10-27T01:07:57.687Z
response_nonce: 6f3ce3abf0f89f71c5e64ea0d512c51c
```

# Zebra Striping

ZingGrid has default behaviors for displaying zebra striping. You can achieve this through one simple attribute or CSS styling.

## Default Zebra Striping

Display default striping by adding the `zebra` attribute to the `<zing-grid>` tag, like so:

```html
<zing-grid zebra></zing-grid>
```
### Default Zebra Striped Grid
Here is a complete grid styled with default zebra stripes:

[Example code](https://app.zingsoft.com/demos/embed/09VZ5UO3)

## Custom Zebra Striping

To do a custom zebra color, set `--theme-background-zebra` in your CSS file to any color you want (see below). You’ll still need to have the `zebra` attribute on the `<zing-grid>` tag.

```css
:root {
  --theme-background-zebra: #ef9a9a;
}
```

### Custom Zebra Striped Grid
Here is a complete grid styled with custom zebra stripes:

[Example code](https://app.zingsoft.com/demos/embed/XULAWRZU)

## Multiple Colors

Traditional zebra striping consists of just two colors. To have multiple colors, pass a comma separated list to the `zebra` attribute (after defining those colors in your CSS file), like so:

```html
  <zing-grid zebra="red, orange, yellow"></zing-grid>
```
### Multiple Zebra Stripes Grid
Here is a complete grid styled with 3 zebra stripes rather than the traditional 2 zebra stripes:

[Example code](https://app.zingsoft.com/demos/embed/UQ2NWC1G)

## Card Mode Support

Zebra striping is also supported in card mode. Simply add the `zebra` attribute to the `<zing-grid>` tag, same as you would for the default layout, like so:

```html
<zing-grid layout="card" zebra></zing-grid>
```

### Card Mode Zebra Striped Grid
Here is a complete grid in card mode styled with zebra stripes:

[Example code](https://app.zingsoft.com/demos/embed/UJ0SDPY9)

## Striping the Editor Controls in Card Mode

In card mode, the default background of a "striped" card is two-part: header and body (see **Default Striped Card Grid** below). This is a result of setting the generic `--theme-background-zebra` variable. If you need the header portion of the card to also have the zebra color, set `--zg-row-card-background_editor_even`, like so:

```css
:root {
    --theme-background-zebra: #ef9a9a;
    --zg-row-card-background_editor_even: #ef9a9a;
}
```

You can see the result of this in the following **Adjusted Striped Card Grid** example.

> **Note:** If you are setting the styling with inline CSS instead of CSS variables, you only need to set the background color to avoid the two-toned appearance.

### Default Striped Card Grid
Here is a complete grid in card mode styled with default stripes:

[Example code](https://app.zingsoft.com/demos/embed/KA9I19DM)

### Adjusted Striped Card Grid
Here is a complete grid in card mode styled wit

[Example code](https://app.zingsoft.com/demos/embed/C2FB9VU4)

## CSS Variables

As an alternative to adding the `zebra` attribute to the `<zing-grid>` tag, you can add zebra striping with CSS variables, like so:

```css
:root {
  /* even/odd styling */
  --zg-row-body-background_odd:#ef9a9a;
  --zg-row-body-background_even:#fff59d;
}
```
### CSS Variables Zebra Stripes Grid
Here is a complete grid styled with zebra stripes via CSS variables:

[Example code](https://app.zingsoft.com/demos/embed/T5X235SL)

## Related Resources
Here are some extra resources related to this feature to help with creating your grid:

* [Styling Basics Guide](https://www.zinggrid.com/docs/styling-basics)
* [CSS Variables List](https://www.zinggrid.com/docs/api-css-variables)
* [API Elements List](https://www.zinggrid.com/docs/api/tags/zing-grid)