Burned text using svg filter

SVG filter can be used to make the edge of text feel burned. Features customizable filter effects, responsive design, and optimized rendering for creating dramatic visual text effects.

v0.0.1

🍰

🏃

🎓

Beginner

css-tricks

#css #svg #svg-filter

Burned Text

Burned Text Components Demo

Enter your text:

Stateful Component (Adjustable)

Stateless Component (Fixed Settings)

Different Text Sizes Preview

Small Text (24px)

Medium Text (36px)

Large Text (64px)

Current Settings

contrast: 3

brightness: 0.5

secondBlurAmount: 2.1

secondBrightness: 0.17

Install

Requires a project with shadcn/ui initialized. Installs all 1 file and any listed registry dependencies.

npx shadcn@latest add https://manglekuo.com/showcase/r/burned-text.json

Registry deps: card, button

npm deps: lucide-react

Documentation

Burned Text Effect

SVG filters that char the edges of text for a dramatic burned look — pure CSS/SVG, no canvas.

Usage

1import { StatelessBurnedText } from '@/components/ui/burned-text';2 3<StatelessBurnedText4  text="Your text here"5  fontSize={48}6  settings={{ contrast: 3, brightness: 0.5, secondBlurAmount: 2.1, secondBrightness: 0.17 }}7/>Language: jsx

Props

StatelessBurnedText

text (string): Text to render.
fontSize (number, default: 48): Font size in pixels.
settings (FilterSettings): Contrast, brightness, and blur controls.
width / height (number, optional): SVG dimensions.
className (string, optional): Additional CSS classes.

StatefulBurnedText — same as above, plus an interactive control panel to tune filter settings live.

How It Works

The burned effect uses SVG filters:

Gaussian Blur — soft shadow around the text
Component Transfer — contrast and brightness adjustments
Color Matrix — charred edge coloring
Invert + hue-rotate — dark mode ash-white lettering overlaid on the dark surface

This creates a realistic burned text effect that can be customized for different use cases.