BFX: Instructions
Short videos to get you up and running fast.
BFX: Documentation
Every effect has setting variables at the top of the CSS which are easily set. You can set them site wide or on the ID level.
Filter classes by name:
Filter By Category:
Showing 1 - 10 of 596 effects.
bfx-bg_ambientGlow
Applies a soft ambient glow background effect with pulsing radial orbs.
| Variable | Description | Default | Details |
|---|---|---|---|
| –bfx-duration | Animation duration | 10s | Higher = longer duration (accepts s, ms) |
| –bfx-delay | Animation delay | 0s | Higher = longer delay (accepts s, ms) |
| –bfx-color | Orb color | rgba(255, 255, 255, 0.44) | Controls color appearance |
| –bfx-orb-size-1 | First orb size | 40% | Controls size (accepts px, %, rem) |
| –bfx-orb-size-2 | Second orb size | 50% | Controls size (accepts px, %, rem) |
| –bfx-blur-amount | Blur amount | 23px | Higher = more blur (accepts px) |
bfx-bg_ambientGlow-dark
Applies a dark ambient glow background effect with pulsing radial orbs.
| Variable | Description | Default | Details |
|---|---|---|---|
| –bfx-duration | Animation duration | 10s | Higher = longer duration (accepts s, ms) |
| –bfx-delay | Animation delay | 0s | Higher = longer delay (accepts s, ms) |
| –bfx-color | Orb color | rgba(0, 0, 0, 0.34) | Controls color appearance |
| –bfx-orb-size-1 | First orb size | 40% | Controls size (accepts px, %, rem) |
| –bfx-orb-size-2 | Second orb size | 50% | Controls size (accepts px, %, rem) |
| –bfx-blur-amount | Blur amount | 23px | Higher = more blur (accepts px) |
bfx-bg_cascadingThreads
Applies cascading vertical thread lines that fall through the background.
| Variable | Description | Default | Details |
|---|---|---|---|
| –bfx-duration | Animation duration | 10s | Higher = longer duration (accepts s, ms) |
| –bfx-color | Thread color | rgba(255, 255, 255, 0.22) | Controls color appearance |
| –bfx-blur | Thread blur | 0px | Higher = more blur (accepts px) |
| –bfx-thread-width | Thread width | 2px | Controls size (accepts px, %, rem) |
| –bfx-thread-length | Thread length | 180% | Controls size (accepts px, %, rem) |
| –bfx-cascade-offset | Cascade offset | 65% | Controls distance (accepts px, rem) |
bfx-bg_cascadingThreads-dark
Applies dark cascading vertical thread lines that fall through the background.
| Variable | Description | Default | Details |
|---|---|---|---|
| –bfx-duration | Animation duration | 10s | Higher = longer duration (accepts s, ms) |
| –bfx-color | Thread color | rgba(255, 255, 255, 0.22) | Controls color appearance |
| –bfx-blur | Thread blur | 0px | Higher = more blur (accepts px) |
| –bfx-thread-width | Thread width | 2px | Controls size (accepts px, %, rem) |
| –bfx-thread-length | Thread length | 180% | Controls size (accepts px, %, rem) |
| –bfx-cascade-offset | Cascade offset | 65% | Controls distance (accepts px, rem) |
bfx-bg_chromaticAberration
Applies a chromatic aberration background effect with shifting RGB color bands.
| Variable | Description | Default | Details |
|---|---|---|---|
| –bfx-duration | Animation duration | 14s | Higher = longer duration (accepts s, ms) |
| –bfx-color-r | Red channel color | rgba(255, 100, 100, 0.06) | Controls color appearance |
| –bfx-color-g | Green channel color | rgba(100, 255, 100, 0.05) | Controls color appearance |
| –bfx-color-b | Blue channel color | rgba(100, 100, 255, 0.07) | Controls color appearance |
| –bfx-blur | Blur amount | 2px | Higher = more blur (accepts px) |
| –bfx-separation | Color separation distance | 8px | Controls distance (accepts px, rem) |
| –bfx-wave-frequency | Wave frequency | 4 | Controls count/frequency |
bfx-bg_chromaticAberration-dark
Applies a dark chromatic aberration background effect with shifting RGB color bands.
| Variable | Description | Default | Details |
|---|---|---|---|
| –bfx-duration | Animation duration | 14s | Higher = longer duration (accepts s, ms) |
| –bfx-color-r | Red channel color | rgba(155, 0, 0, 0.06) | Controls color appearance |
| –bfx-color-g | Green channel color | rgba(0, 155, 0, 0.05) | Controls color appearance |
| –bfx-color-b | Blue channel color | rgba(0, 0, 155, 0.07) | Controls color appearance |
| –bfx-blur | Blur amount | 2px | Higher = more blur (accepts px) |
| –bfx-separation | Color separation distance | 8px | Controls distance (accepts px, rem) |
| –bfx-wave-frequency | Wave frequency | 4 | Controls count/frequency |
bfx-bg_digitalMatrix
Applies a digital matrix grid background effect with pulsing grid lines.
| Variable | Description | Default | Details |
|---|---|---|---|
| –bfx-duration | Animation duration | 12s | Higher = longer duration (accepts s, ms) |
| –bfx-color | Grid color | rgba(255, 255, 255, 0.05) | Controls color appearance |
| –bfx-blur | Grid blur | 0.5px | Higher = more blur (accepts px) |
| –bfx-pixel-size | Pixel grid size | 8px | Controls size (accepts px, %, rem) |
| –bfx-matrix-density | Matrix density | 0.3 | Controls intensity (accepts 0-1) |
bfx-bg_digitalMatrix-dark
Applies a dark digital matrix grid background effect with pulsing grid lines.
| Variable | Description | Default | Details |
|---|---|---|---|
| –bfx-duration | Animation duration | 12s | Higher = longer duration (accepts s, ms) |
| –bfx-color | Grid color | rgba(0, 0, 0, 0.05) | Controls color appearance |
| –bfx-blur | Grid blur | 0.5px | Higher = more blur (accepts px) |
| –bfx-pixel-size | Pixel grid size | 8px | Controls size (accepts px, %, rem) |
| –bfx-matrix-density | Matrix density | 0.3 | Controls intensity (accepts 0-1) |
bfx-bg_driftParticles
Applies drifting particle orbs that float across the background.
| Variable | Description | Default | Details |
|---|---|---|---|
| –bfx-duration | Animation duration | 12s | Higher = longer duration (accepts s, ms) |
| –bfx-delay | Animation delay | 0s | Higher = longer delay (accepts s, ms) |
| –bfx-color | Particle color | rgba(255, 255, 255, 0.2) | Controls color appearance |
| –bfx-particle-size | Particle size | 28px | Controls size (accepts px, %, rem) |
| –bfx-drift-distance | Drift distance | 200px | Controls distance (accepts px, rem) |
| –bfx-blur-amount | Blur amount | 1px | Higher = more blur (accepts px) |
bfx-bg_driftParticles-dark
Applies dark drifting particle orbs that float across the background.
| Variable | Description | Default | Details |
|---|---|---|---|
| –bfx-duration | Animation duration | 12s | Higher = longer duration (accepts s, ms) |
| –bfx-delay | Animation delay | 0s | Higher = longer delay (accepts s, ms) |
| –bfx-color | Particle color | rgba(0, 0, 0, 0.2) | Controls color appearance |
| –bfx-particle-size | Particle size | 6% | Controls size (accepts px, %, rem) |
| –bfx-drift-distance | Drift distance | 200px | Controls distance (accepts px, rem) |
| –bfx-blur-amount | Blur amount | 15px | Higher = more blur (accepts px) |
Showing 1 - 10 of 596 effects.