Spice up your site’s design by adding background, overlay, and text gradients to any element. When editing an element, the Gradients & Overlays control group is under the Style tab.
Available controls:
- Apply to: Select the type of content you want to add a gradient to (text, background, overlay).
- CSS selector: To target a specific HTML within an element.
- Colors: Add at least two colors to see a gradient. When you apply the gradient to an overlay make sure to reduce the color transparency in order to see through it.
- Type: Choose the gradient type—linear, radial, or conic.
- Repeat (since 1.9.4): Allows the gradient to repeat across the element. Define ‘stops’ to control the transition points of each color, using units like percentages or pixels.
Linear gradient controls:
- Angle in °: Set a specific angle for your linear gradient between 0 to 360°.
Radial gradient controls:
- Shape: Choose between ‘circle’ or ‘ellipse’.
- Size: Select from ‘closest-side’, ‘farthest-side’, ‘closest-corner’, ‘farthest-corner’. For details on these settings, see the Mozilla Documentation.
- Position: Define the central point of the gradient.
Conic gradient controls:
- Starting angle in °: Specify the starting angle of the gradient between 0 to 360°.
- Position: Set the gradient’s center.