Display cards with glowing border and background effects.
shadcn
@shadcn
Guillermo Rauch
@rauchg
Bhide Svelte
@Sikandar_Bhide
Shu
@shuding
Emil Kowalski
@emilkowalski
Chánh Đại
@iamncdai
Installation
Copy the Source Code
Copy and paste the following code into your project:
glow-card-grid.svelte
glow-card.svelte
index.ts
Usage
usage.svelte
Features
- Displays cards with glowing border and background effects
- Fine-tunable icon and border blur, saturation, brightness, and contrast parameters
- Composable GlowCard and GlowCardGrid components
Examples
Subtle glow
Chánh Đại
@iamncdai
Emil Kowalski
@emilkowalski
Vibrant glow
Chánh Đại
@iamncdai
Emil Kowalski
@emilkowalski
Shape and layout
Chánh Đại
@iamncdai
Emil Kowalski
@emilkowalski
Props
GlowCardGrid
Grid provider that controls the shared pointer glow styles.
| Name | Type | Default | Description |
|---|---|---|---|
children | Snippet | required | Glow cards rendered inside the grid. |
cardRadius | number | 16 | Card corner radius in pixels. |
iconBlur | number | 25 | Blur radius applied to the moving background image. |
iconSaturate | number | 5 | Saturation multiplier for the background image. |
iconBrightness | number | 1.3 | Brightness multiplier for the background image. |
iconScale | number | 4 | Scale applied to the moving background image. |
iconOpacity | number | 0.3 | Opacity of the moving background image. |
borderWidth | number | 3 | Width of the glowing border in pixels. |
borderBlur | number | 10 | Backdrop blur applied to the glowing border. |
borderSaturate | number | 4.2 | Backdrop saturation multiplier for the border. |
borderBrightness | number | 2.5 | Backdrop brightness multiplier for the border. |
borderContrast | number | 2.5 | Backdrop contrast multiplier for the border. |
ref | HTMLDivElement | null | null | Bindable reference to the grid element. |
class | string | undefined | Additional classes applied to the grid. |
GlowCard
Profile card rendered within a GlowCardGrid.
| Name | Type | Default | Description |
|---|---|---|---|
name | string | required | Display name shown on the card. |
handle | string | required | Secondary handle shown below the name. |
avatar | string | required | Avatar image URL used by the card and glow effect. |
class | string | undefined | Additional classes applied to the card. |