Flipabit
  • Flipabit
  • Getting started
    • Flipabit overview
    • Create project
    • Run on device
    • Build
      • Build for iOS
      • Build for Android
      • Build for Desktop
    • Publish to App Stores
      • Submit to App Store
      • Submit to Google Play
  • Layers
    • Select layer
    • Change order, visibility and name
    • Copy and paste
    • Move layer
    • Resize layer
    • Rotate layer
    • Align layers
    • Arrange layers
    • Navigation layer
      • Display page title
      • Display Tab bar
      • Display Table of contents
      • Display Back button
      • Next/Prev buttons
      • Navigation actions
  • Pages
    • Add or delete page
    • Open page
    • Page background and overlay
  • Widgets
    • Image
    • Video
    • Text
    • PDF
    • Web
    • Diorama
    • Audio
    • Animation
    • Camera
    • YouTube
    • Map
    • Chart
    • Calendar
    • Table
    • Form
    • 3D Model
  • Groups
    • Add group
    • Move and resize group
  • Style
    • Opacity
    • Borders
    • Background
    • Opacity mask
    • Overlay
    • Margins
    • Blur
    • Copy and paste style
  • Interactivity
    • Navigate between pages
    • Maximize widget
    • Drag widget
    • Disable widget
  • Project
    • Resolution
    • Orientation
    • Status Bar
    • Settings
    • Publish settings
  • Animation
    • Page animation
    • Maximize animation
    • Position animation
    • Size animation
    • Size and position animation
    • Rotation animation
    • Opacity animation
    • Color animation
    • Blur animation
  • Actions
    • Actions Editor Overview
    • Add action
    • Suspend actions
    • Arguments
    • Delay action
    • Animation settings
    • Repeat action
  • Data & backend
    • Airtable
    • Google Sheets
  • Networking
  • Tutorials
  • API
    • Project
    • Page
    • Group
    • Widget
      • Image
      • Text
      • Video
      • Diorama
      • Audio
      • Web
      • Animation
      • Camera
      • YouTube
      • Map
      • Chart
      • Calendar
      • Table
      • Form
      • Record
      • 3d model
  • ⭐Updates
  • 🎁Get Flipabit
Powered by GitBook
On this page
  • Color overlay
  • To cancel color overlay
  • Image overlay

Was this helpful?

  1. Style

Overlay

PreviousOpacity maskNextMargins

Last updated 4 years ago

Was this helpful?

Color overlay

You can replace widget colors with monochrome overlay.

To add color overlay:

  1. Select widget

  2. Open Style Inspector

  3. Click Overlay color in Overlay section and select color

To cancel color overlay

  1. Click Overlay color in Overlay section

  2. Select black color

  3. Type 0 in Alpha channel field

Image overlay

You can place image on top of widget. Blending modes determine how overlay image and widget are mixed into each other.

To add image overlay:

  1. Select widget

  2. Open Style Inspector

  3. Click Overlay image and select image file

  4. Select Blend mode