---
url: /cookbook/color-preview.md
description: >-
  Customize color input preview backgrounds with WPCE CSS custom properties,
  including previews for gradients and other complex values.
---

# Override Color Preview

In edge cases where a color does not represent its exact hex value (e.g. a color representing a gradient), the color preview background can be overridden by setting a CSS custom property on the editor page (e.g. through the theme):

```css
:root {
  /* Override the preview of the color with the 'primary' ID */
  --wpce-color-preview--primary: linear-gradient(to right, red, blue);
}
```