Indify Help Center
    Sign Up

    Home

    What's New

    Start here

    How To Customize Your Widget

    Widget Guides

    Common Guides

    Embed Guides

    Notion and Indify

    Plans & Pricing

    Special Initiatives

    Learn More

    Indify Help Center
    Indify Help Center
    /
    Learn More About Indify’s Features
    /Transparent Background
    Transparent Background
    Transparent Background

    Transparent Background

    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 🎨Creator Plan .
    add_custom_css

    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)
    add_custom_css

    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.

    On this page

    • The “Use transparent background” toggle
    • The “Set background color” toggle
    • Background color input
    • Hex codes
    • Background opacity slider
    • Alpha layer 🔒
    • Alpha layer slider