CSS zebra stripe logic for more than two colors

Puneet Sharma

2 years ago

Zebra stripes are a popular design element that can be used to add visual interest and organization to tables and other elements. By default, zebra stripes are created using alternating colors of white and light gray. However, with CSS, it’s possible to create zebra stripes with more than two colors.

Here’s how to create zebra stripes with more than two colors using CSS:

Use the nth-child pseudo-class to alternate the classes for each row:

.zebraStrip > div:nth-child(3n+1) {
    background-color: #color1;
}

.zebraStrip > div:nth-child(3n+2) {
    background-color: #color2;
}

.zebraStrip > div:nth-child(3n+3) {
    background-color: #color3;
}

.zebraStrip > div:nth-child(6n+1),
.zebraStrip > div:nth-child(6n+4){
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFF3C2 100%);
}
.zebraStrip > div:nth-child(6n+2),
.zebraStrip > div:nth-child(6n+5){
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #DB96FF 100%);
}
.zebraStrip > div:nth-child(6n+3),
.zebraStrip > div:nth-child(6n){
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFDADE 100%);
}