The “Clouds Background” widget lets you create a floating cloud animation that enhances the visual appeal of your Elementor website for free. You can bring a dreamy and dynamic touch to your Elementor designs with the Clouds Background Widget. Whether you’re designing a serene landing page or an engaging section, the customizable settings allow you to achieve the perfect atmosphere effortlessly.
Let’s look at each of the options in the “Clouds Background” for Elementor below.
Add a Free Clouds Background to Elementor
Go to Unlimited Elements and click "Background Widgets".
Search for "Clouds Background" in the widget library.
Hover over the widget and click Install.
Add a Free Clouds Background to a Container in Elementor
Click edit container in Elementor.
Go to the "Style" tab.
Click on "Unlimited Background".
Select the background type “Clouds Background“.
Elementor Clouds Background Settings
Cloud Style
Choose a predefined cloud style from the available options.
- Style 1 – A basic cloud style.
- Style 2-Realistic (Pro) – A more detailed and realistic cloud appearance.
- Style 3-Realistic (Pro) – Another realistic style with different visual characteristics.
- Style 4 (Pro)– Another basic cloud style.
Background Opacity
Adjust the transparency of the background using a slider or input field.
Direction
Set the animation direction for the cloud background.
Image One Opacity
Set the opacity as a percentage for the first cloud image.
Image Two Opacity
Set the opacity as a percentage for the second cloud image.
Image Three Opacity
Set the opacity as a percentage for the third cloud image.
Image One CSS Filter
Customize the blur, brightness, contrast, saturation and hue for the first cloud image.
Image Two CSS Filter
Customize the blur, brightness, contrast, saturation and hue for the second cloud image.
Image Three CSS Filter
Customize the blur, brightness, contrast, saturation and hue for the third cloud image.
Image One Duration
Set the animation duration in seconds for the first cloud image.
Image Two Duration
Set the animation duration in seconds for the second cloud image.
Image Three Duration
Set the animation duration in seconds for the third cloud image.
(Pro options indicate features available in the Unlimited Elements Pro.)
Background Location in Elementor Clouds Background
Set the background location.
In Background
Appear behind your content.
In Foreground
Overlay on top of content.
Site Body Background
Covers the entire page background globally.
Site Body Foreground
Overlay all site content (header to footer).
Layout Background
Restricted to a specific section/widget.
Layout Foreground
Overlay a single section/widget.
Clouds Background Design Examples For Elementor
Here are some live use cases for the Clouds Background Widget.
Free Elementor Clouds Background with realistic clouds style.
Free Elementor Clouds Background on toys website.
Thank you for using the Clouds Background widget for Elementor! With its animated cloud effects, smooth transitions, and calming motion, this widget is the perfect solution for creating a serene and immersive atmosphere on your website. It’s ideal for enhancing user experience and adding a touch of elegance to any design. If you have any questions or need assistance, feel free to reach out to us. For more examples and inspiration, check out the live demo on our website.
