Backlight

An SVG-based glow effect that creates a saturated blur behind images, videos, and SVGs. Inspired by Magic UI’s Backlight .

Installation

npx shadcn@latest add https://prismaui.com/components/backlight.json

Import


import { Backlight } from '@/components/ui/backlight';

Image Glow

Wrap any image to create a vivid glow effect behind it.


<Backlight className='rounded-lg'>
  <Image
    src='https://picsum.photos/320/200'
    alt='Example'
    width={320}
    height={200}
    className='rounded-lg'
  />
</Backlight>

Custom Blur

Adjust the blur prop to control the glow intensity.


<Backlight blur={40} className='rounded-lg'>
  <Image
    src='https://picsum.photos/322/204'
    alt='Strong glow'
    width={322}
    height={204}
    className='rounded-lg'
  />
</Backlight>

Props

Prop	Type	Default	Description
`children`	`ReactElement`	—	The image, video, or SVG to apply the backlight to.
`className`	`string`	—	Additional CSS classes for the wrapper.
`blur`	`number`	`20`	Blur intensity of the glow.