Digital / Web UI
Dark Neon
A dark interface material with disciplined neon edges, strong contrast, and a technical nighttime mood.
Dn
Usage
- AI tool shells
- Dashboards
- Developer landing pages
Adjustable parameters
- glow radius
- accent hue
- edge width
- contrast
- motion
AI Prompt
Create a dark neon interface with a graphite base, thin cyan and green edge lights, restrained glow, and crisp typography. Avoid nightclub clutter.
Tailwind notes
Use dark neutral backgrounds, small shadow glows, border accents, and monospace labels sparingly.
Performance notes
Box-shadow glow is fine in small amounts. Avoid dozens of animated glowing elements.
CSS
.dark-neon {
border: 1px solid rgba(72, 255, 203, .34);
border-radius: 14px;
background: linear-gradient(180deg, #111615, #080a0a);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
0 0 34px rgba(72, 255, 203, .18);
color: #e9fff8;
}React example
export function DarkNeonPanel({ children }) {
return <div className="dark-neon">{children}</div>;
}