Customizing Colors in Your Flip Box - Oxilab

Color is one of the most powerful ways to make your flip boxes match your brand and stand out on the page. The Flipbox plugin gives you complete color control over every element — front face, back face, icons, text, borders, and buttons — all without writing any CSS.

Understanding the Color System

Colors in Flipbox use two formats:

Hex colors (#FF5733): Used for solid colors without transparency. Used for text, borders, and icon colors.
RGBA colors (rgba(255, 87, 51, 0.8)): Used where transparency is supported. Used for backgrounds and shadows. The “A” in RGBA stands for Alpha (opacity), from 0 (fully transparent) to 1 (fully opaque).

Each color field has a built-in color picker — click on the color swatch to open it and choose any color visually.

Front Face Colors

Front Background Color

Sets the background color of the entire front face of every card. This is one of the most impactful settings — it defines the base look of your front face.

Supports RGBA, so you can use a semi-transparent color over an image if your style uses a background image.

Front Border Color

Sets the color of the border around the front face card. Only visible if you also set a Border Size greater than 0.

Front Icon Color

The color of the Font Awesome icon on the front face.

Front Icon Background Color

The background color of the container behind the icon. Set to transparent if you don’t want a background shape behind the icon.

Front Heading Color

The color of the title/heading text on the front face.

Back Face Colors

Back Background Color

The background color of the back face. Often a contrasting color to the front — for example, a dark back face pairs well with a light front face.

If your back face has a background image, use a semi-transparent RGBA background color to create an overlay that keeps your text readable.

Back Border Color

Border color on the back face. Set Border Size to 0 to hide the border entirely.

Back Info (Description) Text Color

The color of the description/body text on the back face.

Back Button Colors

There are four button color settings:

Button Text Color: The label color in its normal state
Button Background Color: The button fill color in its normal state (RGBA)
Button Hover Text Color: The label color when hovered
Button Hover Background Color: The fill color when hovered (RGBA)

Box Shadow Color

In the Box Shadow section, you can set the shadow color (RGBA). Use a dark semi-transparent color like rgba(0, 0, 0, 0.15) for a subtle, natural-looking shadow.

Color Tips

Use Your Brand Colors

Match flip box colors to your site’s primary and secondary brand colors. Consistent color use builds brand recognition and makes the flip boxes feel like a natural part of your site — not a bolted-on widget.

Contrast Is Key for Readability

Always make sure there’s strong contrast between background colors and text colors. Dark text on a light background, or light text on a dark background — both work well. Avoid mid-tone text on mid-tone backgrounds.

Use Transparency for Overlays

When using a background image on the back face, set the background color to a semi-transparent dark color (e.g., rgba(0, 0, 0, 0.6)). This creates a readable overlay without completely hiding the image behind it.

Hover States Add Polish

Don’t ignore the button hover colors. A smooth color change on hover (e.g., from a brand color to a darker shade) adds a professional touch that visitors notice.

Pro Tip: To reset a color to transparent, simply delete the value in the color field or set the RGBA alpha value to 0. A fully transparent background lets the parent container’s background color show through.