---
title: "CSS Variables"
date: 2020-06-24
author: "nK"
---

# CSS Variables

All Visual Portfolio blocks and skins are styled through CSS variables, so you can change how they look without overriding rules.

## Naming

A variable name reads `--vp-{part}--{element}__{property}`, for example `--vp-items-style-fade--overlay__background`, `--vp-filter-minimal--items__color` and `--vp-layout-slider--arrows__color`. A hover state adds `-hover` to the element: `--vp-items-style-fade--image-hover__transform`.

## Global Variables

[View Global Variables](https://github.com/nk-crew/visual-portfolio/blob/master/assets/css/_variables-main.scss)



You can change globally defined variables, that are used in blocks. Example – change globally defined `border-radius` and `brand color`:

```
:root {
    --vp-color-brand: red;
    --vp-border-radius: 0px;
}
```

VariableDefault`--vp-color-brand``#2540cc``--vp-color-gray`, `--vp-color-gray-darken`, `--vp-color-gray-light`, `--vp-color-gray-lighten``#6c7781`, `#4b4b4b`, `#e8e8e8`, `#f7f7f7``--vp-border-radius``5px``--vp-transition-duration`, `--vp-transition-easing``0.3s`, `ease-in-out``--vp-items__gap`, `--vp-items__gap-vertical`Taken from the block settings.`--vp-images__object-fit`, `--vp-images__object-position``cover`, `50% 50%``--vp-popup__z-index``1500``--vp-popup--thumbnails__size``160px``--vp-lazyload-images__background`, `--vp-lazyload-images__animation-duration`A shimmer gradient, `7s`## Skin Variables

[View Fade Effect Variables](https://github.com/nk-crew/visual-portfolio/blob/master/templates/items-list/items-style/fade/_variables.scss)



Each skin has its own variables, that you may change individually. Example – change the Fade skin overlay background color and hover image transform:

```
.vp-portfolio__items-style-fade {
  --vp-items-style-fade--image-hover__transform: scale(1);
  --vp-items-style-fade--overlay__background-color: red;
}
```

## More Variables

Skin, filter, sort, pagination and slider variables live in the `_variables.scss` files of the plugin’s `templates/` and `assets/css/` folders:

- <https://github.com/nk-crew/visual-portfolio/tree/master/assets/css>
- <https://github.com/nk-crew/visual-portfolio/blob/master/templates/>