Neon Button Generator is a free tool that creates CSS buttons whose rim (edge) glows, rendered with SVG filters rather than a flat box-shadow. Pick from 15 light patterns, tune the colors and size, and copy ready-to-paste HTML/CSS.
How to use it (3 steps)
- Pick one of the 15 light patterns with the buttons
- Adjust color, thickness, corner radius, blur and animation speed
- Copy the generated HTML and CSS and paste them into your project
The 15 light patterns at a glance
| Pattern | What it does |
|---|---|
| Directional | One-sided sweep light (feDistantLight) |
| Point | A single bright point (radial gradient) |
| Arc Shine | A smooth glossy sheen sweeps part of the rim |
| Beam Glow | A focused pool of light gathers on the rim |
| Gloss Shine | A glass-like diagonal sheen runs across the rim |
| Neon | The whole rim glows evenly |
| Dual | Two colors from opposite sides |
| Gradient | A multi-color gradient flows around the rim |
| Tri | Three colors from three directions |
| Pulse | The rim glow breathes slowly |
| Chase | A band of light runs around the rim |
| Flicker | Random flicker like a neon tube |
| Double Rim | Two layers glow in different colors |
| Underglow | Light pooling below, like a floor reflection |
| Corner | The four corners glow |
FAQ
What kind of buttons can I make?
You can make CSS buttons whose rim (edge) glows. Choose from 15 light patterns — directional, neon, arc shine, gradient, double rim, underglow and more — and tune color, thickness, corner radius and blur.
Can I use the output code as-is?
Yes. Copy the two HTML and CSS blocks and paste them — that is all. There are no external libraries; the code, including the SVG filter, is self-contained.
Are the glow animations included?
Yes. With auto-animate on, JavaScript for the pattern's rotation or pulse animation is appended to the output code and runs wherever you paste it.
Which browsers are supported?
It works in major browsers that support SVG filters (feSpecularLighting, feGaussianBlur), such as Chrome, Edge, Safari and Firefox.
Is it free for commercial use?
Yes. It is free, and the buttons you generate can be used on commercial sites.