The “Mask and Pattern Background Widget” allows you to create unique backgrounds using masks and patterns for free in WordPress Elementor websites. This widget enhances your design by adding stylish overlays, textures, and shapes to sections or elements. You can customize the mask style, pattern type, colors, and blending options to seamlessly match your site’s aesthetics.
Let’s explore the features of the “Mask and Pattern Background Widget” below.
Elementor Mask and Pattern Background Tutorial Video
Add a Free Mask and Pattern Background to Elementor
Go to Unlimited Elements and click "Background Widgets".
Search for "Masks & Patterns Background" in the widget library.
Hover over the widget and click Install.
Design a Section Background in Elementor
Before adding the Unlimited Background it is important that we design our section with some background so we have what to mask later on in the next section. You can choose to add a background image, video, or slideshow according to your preference.
Add Mask and Pattern Background to Elementor Page Section
Click edit container in Elementor.
Go to the "Style" tab.
Click on "Unlimited Background".
Select the background type “Masks & Patterns Background “.
Elementor Mask and Pattern Background Settings
Apply Mask
Enable / Disable Mask
Mask Type
- Abstract Polygon
- Arrow
- Blobs
- Circles
- Circle Corner
- Creative
- Hexagons 1
- Hexagons 2
- Diagonal
- Hexagon Corner
- Hive (Pro)
- Organic (Pro)
- Pointer (Pro)
- Psychedelic (Pro)
- Puzzel (Pro)
- Rectangles (Pro)
- Slices (Pro)
- Swirl (Pro)
- Squares (Pro)
- Triangles (Pro)
- Wave (Pro)
Color
Color of the Mask
Position
Set the position of the mask.
Size
Set the size of the mask
- Cover
- Contain
Flip Horizontally
Enable horizontal flip for mask.
Flip Vertically
Enable vertical flip of mask.
Opacity
Set the opacity for the pattern layer.
Hide on Breakpoint
Hide the pattern under a certain screen resolution.
Elementor Mask and Pattern Background Pattern Settings
Apply Pattern
Enable / Disable Pattern.
Pattern Type
- Greek Key
- Rombs
- Honey Comb
- Squares
- Latisse
- Diamonds
- Damask
- Jumbo Dots (Pro)
- Scale (Pro)
- Geometric (Pro)
- Circles (Pro)
- Circles Dots (Pro)
- Chevron (Pro)
- Romb Zin (Pro)
- Floral (Pro)
Color
Color of the Pattern.
Position
Set the position of the pattern.
Repeat
Set the repetitiveness of the pattern.
Flip Horizontally
Enable horizontal flip of the pattern.
Flip Vertically
Enable vertical flip of the pattern.
Opacity
Set the opacity for the mask layer.
Hide on Breakpoint
Hide the mask under a certain screen resolution.
Set Background Location in Elementor Mask and Pattern Background
In some cases, you may want to move the background widget in front of your content. Determine the placement of the background by changing the setting to your liking.
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.
Usage Examples of Elementor Mask and Pattern Background
Here are some live use cases for the Masks and Patterns Background widget.
Free Mask and Pattern Background for Elementor with Hive Mask Type.
Free Mask and Pattern Background for Elementor with Circles Mask Type.
Some of the shapes you can make with the masks.
Thank you for using the Mask and Pattern Background Widget for Elementor! With its unique masking effects and customizable patterns, this is the best Mask and Pattern Background Widget for Elementor, perfect for adding stylish and creative visuals to your website. If you have any questions or need assistance, feel free to reach out. For more use cases and examples visit the live demo on our website.
