Build beautiful, unique sections of content for your pages that are sure to grab your visitor's attention. Mask allows you to bring your own style through background images and multiple, layered masks.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco ex ea commodo consequat.
Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco ex ea commodo consequat.
Layering multiple Mask items on top of one another, with translucent colors, can provide a unique, stylistic backdrop for your content.
You can take things even further by overlaying the Mask tool on top of a Background or Cinema tool for more advanced designs.
Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values. You can also choose to use a custom color which will give you a color picker for setting that one-off color.
Additionally we've included the option to inherit a background from another Foundry tool such as Background or Cinema. This allows you to mask off these tool's contents by placing Mask within the Background or Cinema tools.
Some Foundry tools, require the overflow property of their parent container to be set to hidden in order for them to display properly and not break the layout. This setting is enabled by default.
Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.
This field allows you to replace the default HTML Comment with your own text.
Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.
Here you choose whether you'd like this Mask child item to appear at the top or the bottom of the Mask parent tool. Since you can use multiple Mask child items per layout you can include one or more at both the top or the bottom of the parent tool.
Allows you to choose a height for the Mask child item. This can be adjusted independently for each of the Mask items within a layout.
By default this value is unifrom across all 6 responsive breakpoints. Clicking on the small + icon above this setting will give you 6 height settings for configuring the height of the child item at each individual breakpoint.
Allows you to choose a width for the Mask child item. This can be adjusted independently for each of the Mask items within a layout.
By default this value is unifrom across all 6 responsive breakpoints. Clicking on the small + icon above this setting will give you 6 width settings for configuring the width of the child item at each individual breakpoint.
When enabled the differences in height and widht between breakpoints, when using non-uniform values, will case the Mask child items to keyframe animate from one height and / or width to another.
This settings lets you flip the SVG that is used for the masking process. You can have it flipped either vertically, horizontally, or both. This is often helpful when changing the Location setting for this child item.
Here you choose the color of the Mask child item itself. Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values. You can also choose to use a custom color which will give you a color picker for setting that one-off color.
Here you choose the color of the Mask child item's background. This is not to be mistaken for the background of the entire Mask parent tool.
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values. You can also choose to use a custom color which will give you a color picker for setting that one-off color.
This setting is used less often, and defaults to Transparent.
Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.
Here you choose whether you'd like this Mask child item to appear at the top or the bottom of the Mask parent tool. Since you can use multiple Mask child items per layout you can include one or more at both the top or the bottom of the parent tool.
Allows you to choose a height for the Mask child item. This can be adjusted independently for each of the Mask items within a layout.
By default this value is unifrom across all 6 responsive breakpoints. Clicking on the small + icon above this setting will give you 6 height settings for configuring the height of the child item at each individual breakpoint.
Allows you to choose a width for the Mask child item. This can be adjusted independently for each of the Mask items within a layout.
By default this value is unifrom across all 6 responsive breakpoints. Clicking on the small + icon above this setting will give you 6 width settings for configuring the width of the child item at each individual breakpoint.
When enabled the differences in height and widht between breakpoints, when using non-uniform values, will case the Mask child items to keyframe animate from one height and / or width to another.
This settings lets you flip the SVG that is used for the masking process. You can have it flipped either vertically, horizontally, or both. This is often helpful when changing the Location setting for this child item.
Allows you to invert the Mask Color and the Background Color options.
Here you choose the color of the Mask child item itself. Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values. You can also choose to use a custom color which will give you a color picker for setting that one-off color.
Here you choose the color of the Mask child item's background. This is not to be mistaken for the background of the entire Mask parent tool.
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values. You can also choose to use a custom color which will give you a color picker for setting that one-off color.
This setting is used less often, and defaults to Transparent.
Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.
Here you choose whether you'd like this Mask child item to appear at the top or the bottom of the Mask parent tool. Since you can use multiple Mask child items per layout you can include one or more at both the top or the bottom of the parent tool.
Allows you to choose a height for the Mask child item. This can be adjusted independently for each of the Mask items within a layout.
By default this value is unifrom across all 6 responsive breakpoints. Clicking on the small + icon above this setting will give you 6 height settings for configuring the height of the child item at each individual breakpoint.
When enabled the differences in height and widht between breakpoints, when using non-uniform values, will case the Mask child items to keyframe animate from one height and / or width to another.
This settings lets you flip the SVG that is used for the masking process. You can have it flipped in the vertical direction. This is often helpful when changing the Location setting for this child item.
Allows you to invert the Mask Color and the Background Color options.
Here you choose the color of the Mask child item itself. Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values. You can also choose to use a custom color which will give you a color picker for setting that one-off color.
Here you choose the color of the Mask child item's background. This is not to be mistaken for the background of the entire Mask parent tool.
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values. You can also choose to use a custom color which will give you a color picker for setting that one-off color.
This setting is used less often, and defaults to Transparent.
Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.
Here you choose whether you'd like this Mask child item to appear at the top or the bottom of the Mask parent tool. Since you can use multiple Mask child items per layout you can include one or more at both the top or the bottom of the parent tool.
Allows you to choose a height for the Mask child item. This can be adjusted independently for each of the Mask items within a layout.
By default this value is unifrom across all 6 responsive breakpoints. Clicking on the small + icon above this setting will give you 6 height settings for configuring the height of the child item at each individual breakpoint.
Allows you to choose a width for the Mask child item. This can be adjusted independently for each of the Mask items within a layout.
By default this value is unifrom across all 6 responsive breakpoints. Clicking on the small + icon above this setting will give you 6 width settings for configuring the width of the child item at each individual breakpoint.
When enabled the differences in height and widht between breakpoints, when using non-uniform values, will case the Mask child items to keyframe animate from one height and / or width to another.
This settings lets you flip the SVG that is used for the masking process. You can have it flipped either vertically, horizontally, or both. This is often helpful when changing the Location setting for this child item.
Allows you to invert the Mask Color and the Background Color options.
Here you choose the color of the Mask child item itself. Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values. You can also choose to use a custom color which will give you a color picker for setting that one-off color.
Here you choose the color of the Mask child item's background. This is not to be mistaken for the background of the entire Mask parent tool.
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values. You can also choose to use a custom color which will give you a color picker for setting that one-off color.
This setting is used less often, and defaults to Transparent.
Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.
Here you choose whether you'd like this Mask child item to appear at the top or the bottom of the Mask parent tool. Since you can use multiple Mask child items per layout you can include one or more at both the top or the bottom of the parent tool.
Allows you to choose a height for the Mask child item. This can be adjusted independently for each of the Mask items within a layout.
By default this value is unifrom across all 6 responsive breakpoints. Clicking on the small + icon above this setting will give you 6 height settings for configuring the height of the child item at each individual breakpoint.
When enabled the differences in height and widht between breakpoints, when using non-uniform values, will case the Mask child items to keyframe animate from one height and / or width to another.
This settings lets you flip the SVG that is used for the masking process. You can have it flipped in the vertical direction. This is often helpful when changing the Location setting for this child item.
Allows you to invert the Mask Color and the Background Color options.
Here you choose the color of the Mask child item itself. Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values. You can also choose to use a custom color which will give you a color picker for setting that one-off color.
Here you choose the color of the Mask child item's background. This is not to be mistaken for the background of the entire Mask parent tool.
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values. You can also choose to use a custom color which will give you a color picker for setting that one-off color.
This setting is used less often, and defaults to Transparent.
Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.
Here you choose whether you'd like this Mask child item to appear at the top or the bottom of the Mask parent tool. Since you can use multiple Mask child items per layout you can include one or more at both the top or the bottom of the parent tool.
Allows you to choose a height for the Mask child item. This can be adjusted independently for each of the Mask items within a layout.
By default this value is unifrom across all 6 responsive breakpoints. Clicking on the small + icon above this setting will give you 6 height settings for configuring the height of the child item at each individual breakpoint.
When enabled the differences in height and widht between breakpoints, when using non-uniform values, will case the Mask child items to keyframe animate from one height and / or width to another.
This settings lets you flip the SVG that is used for the masking process. You can have it flipped in the vertical direction. This is often helpful when changing the Location setting for this child item.
Allows you to invert the Mask Color and the Background Color options.
Here you choose the color of the Mask child item itself. Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values. You can also choose to use a custom color which will give you a color picker for setting that one-off color.
Here you choose the color of the Mask child item's background. This is not to be mistaken for the background of the entire Mask parent tool.
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values. You can also choose to use a custom color which will give you a color picker for setting that one-off color.
This setting is used less often, and defaults to Transparent.
Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.
Here you choose whether you'd like this Mask child item to appear at the top or the bottom of the Mask parent tool. Since you can use multiple Mask child items per layout you can include one or more at both the top or the bottom of the parent tool.
Allows you to choose a height for the Mask child item. This can be adjusted independently for each of the Mask items within a layout.
By default this value is unifrom across all 6 responsive breakpoints. Clicking on the small + icon above this setting will give you 6 height settings for configuring the height of the child item at each individual breakpoint.
Allows you to choose a width for the Mask child item. This can be adjusted independently for each of the Mask items within a layout.
By default this value is unifrom across all 6 responsive breakpoints. Clicking on the small + icon above this setting will give you 6 width settings for configuring the width of the child item at each individual breakpoint.
When enabled the differences in height and widht between breakpoints, when using non-uniform values, will case the Mask child items to keyframe animate from one height and / or width to another.
This settings lets you flip the SVG that is used for the masking process. You can have it flipped either vertically, horizontally, or both. This is often helpful when changing the Location setting for this child item.
Allows you to invert the Mask Color and the Background Color options.
Here you choose the color of the Mask child item itself. Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values. You can also choose to use a custom color which will give you a color picker for setting that one-off color.
Here you choose the color of the Mask child item's background. This is not to be mistaken for the background of the entire Mask parent tool.
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values. You can also choose to use a custom color which will give you a color picker for setting that one-off color.
This setting is used less often, and defaults to Transparent.
Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.
Here you choose whether you'd like this Mask child item to appear at the top or the bottom of the Mask parent tool. Since you can use multiple Mask child items per layout you can include one or more at both the top or the bottom of the parent tool.
Allows you to choose a height for the Mask child item. This can be adjusted independently for each of the Mask items within a layout.
By default this value is unifrom across all 6 responsive breakpoints. Clicking on the small + icon above this setting will give you 6 height settings for configuring the height of the child item at each individual breakpoint.
Allows you to choose a width for the Mask child item. This can be adjusted independently for each of the Mask items within a layout.
By default this value is unifrom across all 6 responsive breakpoints. Clicking on the small + icon above this setting will give you 6 width settings for configuring the width of the child item at each individual breakpoint.
When enabled the differences in height and widht between breakpoints, when using non-uniform values, will case the Mask child items to keyframe animate from one height and / or width to another.
This settings lets you flip the SVG that is used for the masking process. You can have it flipped either vertically, horizontally, or both. This is often helpful when changing the Location setting for this child item.
Allows you to invert the Mask Color and the Background Color options.
Here you choose the color of the Mask child item itself. Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values. You can also choose to use a custom color which will give you a color picker for setting that one-off color.
Here you choose the color of the Mask child item's background. This is not to be mistaken for the background of the entire Mask parent tool.
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values. You can also choose to use a custom color which will give you a color picker for setting that one-off color.
This setting is used less often, and defaults to Transparent.
Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.
Here you choose whether you'd like this Mask child item to appear at the top or the bottom of the Mask parent tool. Since you can use multiple Mask child items per layout you can include one or more at both the top or the bottom of the parent tool.
Allows you to choose a height for the Mask child item. This can be adjusted independently for each of the Mask items within a layout.
By default this value is unifrom across all 6 responsive breakpoints. Clicking on the small + icon above this setting will give you 6 height settings for configuring the height of the child item at each individual breakpoint.
Allows you to choose a width for the Mask child item. This can be adjusted independently for each of the Mask items within a layout.
By default this value is unifrom across all 6 responsive breakpoints. Clicking on the small + icon above this setting will give you 6 width settings for configuring the width of the child item at each individual breakpoint.
When enabled the differences in height and widht between breakpoints, when using non-uniform values, will case the Mask child items to keyframe animate from one height and / or width to another.
This settings lets you flip the SVG that is used for the masking process. You can have it flipped either vertically, horizontally, or both. This is often helpful when changing the Location setting for this child item.
Allows you to invert the Mask Color and the Background Color options.
Here you choose the color of the Mask child item itself. Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values. You can also choose to use a custom color which will give you a color picker for setting that one-off color.
Here you choose the color of the Mask child item's background. This is not to be mistaken for the background of the entire Mask parent tool.
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values. You can also choose to use a custom color which will give you a color picker for setting that one-off color.
This setting is used less often, and defaults to Transparent.
Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.
Here you choose whether you'd like this Mask child item to appear at the top or the bottom of the Mask parent tool. Since you can use multiple Mask child items per layout you can include one or more at both the top or the bottom of the parent tool.
Gives you two preset circle patterns to choose from.
Allows you to choose a width for the Mask child item. This can be adjusted independently for each of the Mask items within a layout.
By default this value is unifrom across all 6 responsive breakpoints. Clicking on the small + icon above this setting will give you 6 width settings for configuring the width of the child item at each individual breakpoint.
When enabled the differences in height and widht between breakpoints, when using non-uniform values, will case the Mask child items to keyframe animate from one height and / or width to another.
This settings lets you flip the SVG that is used for the masking process. You can have it flipped either vertically, horizontally, or both. This is often helpful when changing the Location setting for this child item.
Here you choose the color of the Mask child item itself. Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values. You can also choose to use a custom color which will give you a color picker for setting that one-off color.
Here you choose the color of the Mask child item's background. This is not to be mistaken for the background of the entire Mask parent tool.
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values. You can also choose to use a custom color which will give you a color picker for setting that one-off color.
This setting is used less often, and defaults to Transparent.
Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.
Here you choose whether you'd like this Mask child item to appear at the top or the bottom of the Mask parent tool. Since you can use multiple Mask child items per layout you can include one or more at both the top or the bottom of the parent tool.
Allows you to choose a height for the Mask child item. This can be adjusted independently for each of the Mask items within a layout.
By default this value is unifrom across all 6 responsive breakpoints. Clicking on the small + icon above this setting will give you 6 height settings for configuring the height of the child item at each individual breakpoint.
Allows you to choose a width for the Mask child item. This can be adjusted independently for each of the Mask items within a layout.
By default this value is unifrom across all 6 responsive breakpoints. Clicking on the small + icon above this setting will give you 6 width settings for configuring the width of the child item at each individual breakpoint.
When enabled the differences in height and widht between breakpoints, when using non-uniform values, will case the Mask child items to keyframe animate from one height and / or width to another.
This settings lets you flip the SVG that is used for the masking process. You can have it flipped vertically. This is often helpful when changing the Location setting for this child item.
Allows you to invert the Mask Color and the Background Color options.
Here you choose the color of the Mask child item itself. Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values. You can also choose to use a custom color which will give you a color picker for setting that one-off color.
Here you choose the color of the Mask child item's background. This is not to be mistaken for the background of the entire Mask parent tool.
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values. You can also choose to use a custom color which will give you a color picker for setting that one-off color.
This setting is used less often, and defaults to Transparent.
Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.
Here you choose whether you'd like this Mask child item to appear at the top or the bottom of the Mask parent tool. Since you can use multiple Mask child items per layout you can include one or more at both the top or the bottom of the parent tool.
This settings lets you flip the SVG that is used for the masking process. You can have it flipped either vertically, horizontally, or both. This is often helpful when changing the Location setting for this child item.
Here you choose the color of the three elements that make up this Mask child item. Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values. You can also choose to use a custom color which will give you a color picker for setting that one-off color for each.
Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.