> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# How to Add Gradient Colors and Animation to Your Rewards Bar

> Customize your rewards bar with animated gradients for a more dynamic look.

# Overview

This tutorial shows you how to apply a gradient background and animation effect to your Upcart rewards bar using custom CSS. This enhancement helps your reward tiers stand out and adds visual appeal to your cart.

These customizations are simple to apply and are suitable for store owners or developers with basic CSS knowledge.

***

## Where to find the custom CSS editor

1. Go to **Upcart > Cart Editor > Settings > Custom CSS**
2. Scroll to the bottom of the page and paste your code into the input area
3. Click **Save**
4. Refresh your storefront to see the changes live

***

## Example CSS for gradient animation

This code adds a diagonal shimmering gradient effect to your rewards progress bar:

```
.upcart-rewards-bar-foreground {  
  background-image: linear-gradient(  
    45deg,  
    rgba(255, 255, 255, 0.4) 25%,  
    transparent 0,  
    transparent 50%,  
    rgba(255, 255, 255, 0.4) 0,  
    rgba(255, 255, 255, 0.4) 75%,  
    transparent 0,  
    transparent  
  );  
  background-size: 1rem 1rem;  
  animation: slide 4s linear infinite;  
}  
  
@keyframes slide {  
  from {  
    background-position-x: 0;  
  }  
  to {  
    background-position-x: 113px;  
  }  
}
```

## Alternative code for V2.0 Rewards Version

If you have upgraded your rewards to the V2 version, the code is just slightly different as the rewards selector is replaced with a new selector. Use the below code if you have upgraded your tiered rewards module

```
.upcart-public-component-segmented-progress-bar__segment-fill {  
  background-image: linear-gradient(  
    45deg,  
    rgba(255, 255, 255, 0.4) 25%,  
    transparent 0,  
    transparent 50%,  
    rgba(255, 255, 255, 0.4) 0,  
    rgba(255, 255, 255, 0.4) 75%,  
    transparent 0,  
    transparent  
  );  
  background-size: 1rem 1rem;  
  animation: rewards-bar-slide 4s linear infinite;  
}  
  
@keyframes rewards-bar-slide {  
  from {  
    background-position-x: 0;  
  }  
  to {  
    background-position-x: 113px;  
  }  
}
```

## Notes

* To change the shimmer angle, adjust `45deg` to another direction (example: `-45deg`).
* To change the base bar color, use the built-in color settings in the **Rewards module**.

***

## Final result

After applying this CSS, your rewards bar will display a subtle moving texture overlay. This draws attention to your rewards system without overwhelming the rest of your cart design.

***

## Need help?

For advanced customizations, we recommend working with a **Shopify Expert**. They can help implement HTML, CSS, or JavaScript in your cart drawer. Upcart support does not assist with writing or debugging custom code.

[See Shopify Experts](https://www.shopify.com/partners/directory)