Adjust one color and see it change in real-time all over your website.

Color options are everywhere in the style customizer. A little preview of the selected color is shown, and clicking on it opens an easy-to-use color picker where you can adjust the color, alpha transparency or enter a color value directly.


Some color options allow defining a color gradient. Therefore, the color picker has an additional gradient text field to manually insert a CSS gradient. The color picker allows you to select a solid color that is applied as a fallback and may also be visible when the gradient uses transparent color values.

Note There are some useful online tools to create CSS gradients like ColorZilla or Gradient Generator.

Box Shadow

The color picker for box-shadows has additional text fields for x, y, blur, spread and inset values of the box-shadow property. It also has a button to clear the color completely in case no box-shadow should be used.

YOOtheme Pro Documentation