Background Glow
Description
The Background Glow component is a versatile UI element that creates a customizable gradient background glow effect. It allows for the creation of visually appealing, blurred gradient backgrounds that can enhance the overall aesthetic of a page or section. The component supports multiple color stops and vertical offset positioning.
Installation
bash
sabaccui add backgroundGlow
Usage
Here are examples of how to use the Background Glow component:
Basic usage with two colors
Preview
Complex gradient with multiple color stops and offset
Preview
Schema
| Field Name | Type | Description | Default Value |
|---|---|---|---|
colors | textarea | A list of color values, each on a new line, defining the gradient stops. Colors can be in any valid CSS color format (hex, rgb, rgba, etc.). | Required |
offset | number | The vertical offset of the glow effect as a percentage of its container height. | 0 |
Notes
- It computes the gradient style dynamically based on the provided colors and offset.
- The glow effect is implemented as an absolutely positioned div with blur and opacity applied.
- The maximum size of the glow effect is constrained to 800x800 pixels.
Best Practices:
- Use contrasting colors for a more dramatic effect.
- Experiment with the offset to achieve the desired positioning within the layout.
- Consider the impact on readability when placing text over the glow effect.
- Use sparingly to avoid overwhelming the user interface.