Home

What's New

Transparent Background

Transparent Background

Level Up your Workspace with Transparent Backgrounds

icon

Note: The transparency feature is a premium customization feature available on the 🎨Creator Plan.

The ability to set transparent backgrounds on your widgets allows for seamless integration into even more tools. This feature offers much more control over how your widgets appear on your platform of choice, opening up the opportunity for attractive widgets wherever you are productive. Transparent backgrounds are available per-widget with our 🧗Indify Pro Features. You can also unlock transparent backgrounds for all widgets via the .

The “Use transparent background” toggle

Turning this toggle on will make the background completely transparent.

Turning it off will revert the color back to what you have set as its background color.

💡

Note: toggling transparency on will also turn on Set background color as a side-effect.

The “Set background color” toggle

Turning this toggle on will enable choosing a background color beyond the default settings.

Turning it off will use the default background color based on your current dark mode and light mode preferences. For more info, please read 🌗Light and Dark Mode.

Background color input

Use this field to set the background color of your widget. You can change the color in two ways:

  • Hover over the color picker on the right-hand side to select a preset, or
  • Type in your own favorite hex code (learn more at htmlcolorcodes)

Hex codes

Free users can use valid 6-digit hex codes and 3-digit shorthand values

Paid users can to use alpha values (transparency values) as well.

Background opacity slider

Controls the level of transparency.

Set to 0 for full transparency (hex code alpha value 00), or 100 for no transparency at all (hex code alpha value FF)

Alpha layer 🔒

An alpha layer is automatically enabled, and becomes visible when the selected background color that has opacity less than 100%. This helps give context to colors as you adjust the level of transparency, and is only visible on the widget’s configuration page.

Alpha layer slider

image

Control the darkness of your alpha layer. This slider is useful as a visualization tool to make your text more easily readable when using certain color combinations. This is only used during configuration, and does not affect how your widgets appear when embedded.

image
image

On this page

  • Level Up your Workspace with Transparent Backgrounds
  • The “Use transparent background” toggle
  • The “Set background color” toggle
  • Background color input
  • Hex codes
  • Background opacity slider
  • Alpha layer 🔒
  • Alpha layer slider