Create dazzling gradient based boxes to accentuate your page design. Use up to 6 different colors as well as set their positions and angle to create unique, beautiful designs.
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. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Create a fun special effect by using Gradient Box's "Fixed Background Effect" feature. This setting locks the gradient to the site background and makes it appears as if the gradient is cycling as the page is scrolled.
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.
When enabled a preset margin will be added to the base of the tool. Foundry allows you to configure the Base Margin preset to your liking within the Control Center. The Base Margin can be configured independently at each of the 6 responsive breakpoints.
Gradients need at least two colors. These two settings allow 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 for the gradient's start end end color. You can also choose to use custom colors of your own as well.
Additionally you can set the endstops for these colors as well.
The Start and End positions can be set between 0% to 100%, allowing you to move the color to different locations within the gradient.
In addition to the Start and End colors we offer four more optional color stops for your gradients, allowing you to build styling that uses up to 6 different color options. You can enable any number of these optional colors. They can be set using Foundry's presets or custom colors, much like the Start and End colors.
Much like the Start and End colors each of these additional colors have a position setting for adjusting the location of that color along the gradient.
You can set the angle for the gradient here. You can choose an anlge anywhere from 0° to 360°. Additionally you can use negative values, in that same range, as well.
Foundry provides 5 different presets for rounded corners. These can be found throughout Foundry's various tools. You're also able to remove the roundness of the corners by setting this to none, or provide your own custom value for the border radius, or rounded corners. When using Custom mode you can set a different value on each of the four corners.
Used to add a decorative shadow to the button. Foundry provides a variety of preset shadow styles, as well as access to a user defined preset that you can configure in the Control Center. Additionally for one-off shadows there is also a custom shadow option where you can create a unique shadow style, setting its positioning, size, spread and color.
Locks the gradient in place, attaching it to the site background. When enabled this provides a nice effect that makes it seem like the gradient is cycling as the visitor scrolls down the page.
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.