All Collections
All Experiences
Design, styling & personalization
How do I customize my Experiences’ background?
How do I customize my Experiences’ background?
The different customization options for backgrounds in Chameleon
Sonia Schiau avatar
Written by Sonia Schiau
Updated over a week ago

With Chameleon, you can style your Experiences to match your brand and styling needs perfectly. Aside from the global styling options that you have in your Dashboard, each Experience is customizable directly from the Builder.

Regardless of the Experience you create, you have several options to customize your background for a complete native blend.

👉 Read about everything that you can do to ensure your Experiences look perfectly built-in, here.

Quick access:

You can personalize your Experience background from the Builder. You'll find all customization options under "Canvas" in the Design section

Here you will find options relating to the size and visual appearance of your Experience background to help you achieve a native blend. You can adjust:

  • the width of your background;

  • how rounded the corners should be;

  • the color and style of your background, along with it's opacity.

🤝 Make sure the Canvas width fits your text but does not cover other important elements on your page to obstruct your user’s experience.

For your Experience background, you have 3 style options that you can choose from: solid color, gradient, or image/GIF.

A solid background is a straightforward way to align your Experiences with your branding and goals. Chameleon automatically detects the color palette present on your page and suggests those colors for you to pick from.

You can also add your brand’s palette and use these colors “by the code”. Get your hex guidelines for this, or pick a new one using a color picker.

With the gradient background, you can create an appealing, modern Experience. You can pick (or add your own) 2 colors to form a smooth gradient and adjust it with the opacity option.

🪄 With a gradient background, is best to have similar hues or luminance as your underlying interface for a native blend.

💡 You can use an online tool to make sure you pick the right hues that will compliment your Experience.

Add a custom visual to your Experience by uploading images or GIFs as your Experience background. This can be a good way to draw attention to a user's action but should be in line with your branding and done with impeccable graphics.

🎯 A good rule of thumb is to create Experiences that stand out from your underlying interface, with different colors or hues. It’s hard for users to distinguish between the two if they are too similar.

If you want to achieve more nuanced styling you can use Custom CSS to customize your Experiences. Within each Experience, you can control attributes like fonts, colors, line spacing, positioning of certain elements, borders and shadows, or color gradients.

This works by adding specific styling options to different elements in your Chameleon Experiences, in the custom CSS field. Learn the steps to do this here.

Expanding insights

Did this answer your question?