> For the complete documentation index, see [llms.txt](https://matteo-gabriele.gitbook.io/vue-progressive-image/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://matteo-gabriele.gitbook.io/vue-progressive-image/css-variables.md).

# CSS Variables

The plugin uses CSS variables to store different values: animation speed, animation transition type, blur amount, etc...

```css
:root {
  // background color of the main image while loading
  --progressive-image-background-color: #f8f8f8;
  
  // blur amount. Also customizable via component props
  --progressive-image-blur: 16px;
  
  // main image fade in transition easing function
  --progressive-image-main-fade-ease: ease-in;
  // main image fade in transition speed
  --progressive-image-main-fade-speed: 0.9s;
  
  // placeholder image fade in transition easing function
  --progressive-image-placeholder-fade-ease: ease-out;
  // placeholder image fade in transition speed
  --progressive-image-placeholder-fade-speed: 1.2s;

  // skeleton animation speed
  --progressive-image-skeleton-speed: 2s;
  // skeleton animation background
  --progressive-image-skeleton-background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
}
```