Background Transition Widget Tutorial

Create fancy, colorful, and eye-catching webpages using background Color Transition Widget for Elementor. It allows you to have a seamless transition between sections background colors or images.

Click here to check Premium Background Transition Widget demo.


  • You will need Premium Addons PRO plugin installed and activated on your website.
  • Also, make sure that this widget/addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
  • Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.
Screenshot Displays Elementor Widgets an Arrow Points at Premium Background Transition Widget
Premium Background Transition Widget Icon

Key Features

  • Content.
  • Advanced Settings.

First, you should insert your Elementor sections to your page and please don’t assign background for them. All you have to do is to assign each section a unique CSS ID by navigating to Section Settings —> Advanced Tab —> CSS ID.

Assigning CSS IDs to Elementor Sections
Assign CSS ID to Elementor Section/Container


Next, after you finish assigning different CSS IDs to each section, insert Background Transition Widget, click on Add Item, then sections CSS IDs to CSS ID fields. Also, check Steps to Add Items to Background Transition Web Page.

  • CSS ID: Inset CSS ID for sections to apply background transition color/images to this section.
Screenshot Displays Available Settings to add Background Transition Color on a Web Page
Elementor Background Transition Widget, Content Background Transition Elements Settings [CSS ID, Type, and Select Color]

  • Scroll Down/Scroll Up: The [Type] Color or Image is applied while scrolling down or while scrolling up.
    • Type: Color (If Color Type is Selected)
      • Select Color – Color Settings-
    • Type: Image (If Image Type is Selected)
      • Choose Image.
      • Customize Image settings.
Screenshots for Background Transition Widget [Left] Available Settings for Color Type, [Right] Available Settings for Image Type
Background Transition Color, Type: Color, Image in Elementor Background Transition Widget

  • Offset: Select when will color/image transition happen for every section background:
    • Viewport Hits Top: Change section background when the top of section hit the top edge of the screen.
    • Viewport Hits Bottom: Change section background when the bottom section hit the bottom edge of the screen.
    • Custom Offset: Set custom offset to background transition.
      • Offset: Set offset in pixels (PX) or percentage (%).

Important: Please note that Offset option works only when Change Color As Gradient option is disabled.

Offset Option in Elementor Background Transition widget

2. Advanced Settings

  • Change Colors As Gradient: In case all the background layers are set to solid colors (no images are added) – then you can enable this option to change background color as a gradient.
  • Transition Duration: Set Time Duration for Background Transition Speed in seconds.
  • Offset (PX): Set a value to specify the distance between the top of the viewport and the top of the section elements. For instance, you can add [100px] or [-100px]. The difference between those two values is that [100px] will make the color appears before you reach the section with [100px] value and vice versa. The default value is 30px.
Screenshot in Elementor Editor Panel Show Background Transition Widget Advanced Settings
Advanced Settings in Background Transition Widget for Elementor

Add Items to Background Transition Elementor Web Page

  • First, click on your Section’s Settings [Icon].
Screenshot shows an arrow points at Edit Section's Icon in Elementor Page Builder. The Section display Fish and Spices
Background Section Color Transition, Type: Color demo in Elementor Background Transition Widget
  • In Section’s Advanced Settings, Add CSS ID to the Section.
Arrow Points at CSS ID Field in Elementor Editor Panel.
Edit Section in Elementor Editor Panel
  • Add (The same) Section’s CSS ID to Elementor Background Transition Widget Element CSS ID.
Two Screenshots [Left] Available Settings in Content of Elementor Background Transition Widget, [Right] Elementor Section
Elementor Background Transition Widget, Type: Color [Example]
  • Set its Type: Color, Image.
  • Set Background Transition’s Advanced Settings.
Screenshot display Kitchen Ware Tools as a Background in a Webpage using Background Transition Widget
Elementor Background Transition, Image Background Transitioning [demo]
Two Screenshots [Left] Display Available Settings in Background Transition Widget [Right] Kitchen Ware Image as Background
Elementor Background Transition Widget, Type: Image [Example], [Size, Position, Repeat]

If you still need any further assistance, feel free to contact Premium Addons support team. We would be more than glad to help 😁

Join the Community

You’re most welcome to join our Facebook group and YouTube channel to get updates about new features, improvements, and bug fixes.

Related Docs:

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 44+ Elementor Widgets Totally Free of charge.

Premium Addons for Elementor plugin logo

Stay Updated

Subscribe to our newsletter to receive the latest updates and features.