What are Gradient Backgrounds?
Gradient Backgrounds are a design feature that allows you to apply smooth transitions between two or more colors as the background of an element. In Refoundry, these can be applied to a Container Block or Column Block using linear CSS gradients, creating visually appealing backgrounds that add depth and dimension to your website’s design.
How it Works
Gradient Backgrounds allow you to create smooth color transitions for Container and Column blocks using linear CSS gradients. These backgrounds enhance the visual appeal of your site by blending two or more colors seamlessly.
Color Stops: Gradients are created by defining color stops, where each stop marks the transition from one color to another. In Refoundry, you can choose multiple colors and adjust their positions to customize the gradient’s appearance.
Gradient Direction: You can set the direction of the gradient, such as top-to-bottom or left-to-right. This determines how the colors transition across the element. Refoundry uses the linear-gradient() function in CSS to define these directions and transitions.
Transparency and Opacity: You can incorporate transparency into your gradients using RGBA values, allowing for effects like fading into transparency or subtle overlays.
Implementation in Refoundry: Gradient Backgrounds are easily applied in the Refoundry editor by selecting your colors and direction in the background settings of a Container or Column block. Changes are previewed in real-time.
Responsive Design: These gradients are fully responsive, adapting to different screen sizes to maintain visual consistency across all devices.
Using Gradient Backgrounds in Refoundry provides a simple yet powerful way to enhance your website’s design, ensuring smooth and visually appealing transitions that integrate seamlessly with other elements.
Gradient Background Settings
These are the settings that give you control over the linear gradient in your Gradient Background.
Linear Gradient
Angle: This field controls the direction of the gradient. You can set the angle at which the gradient transitions between colors.
Color Stops: This field allows you to define the points where the gradient changes color. You can select colors from the preconfigured options, including transparent colors. The position of each color stop is set using a percentage value. There are no limits to how many stops you can add, but you have to have at least 2.
Repeat: This field determines whether the gradient should repeat itself. When enabled, the gradient will continue to repeat along the element’s background.
Size: This field controls the size of the gradient, determining how much of the element’s background the gradient covers.
Position: This field controls the starting position of the entire gradient within the element. You can shift the gradient’s start point horizontally or vertically.
More about
Global Styles
