28 CSS Input Fields03 / 28
Neon Glow
Cyan neon-glow input. The border crisps and the box-shadow blooms on focus — perfect for dark dashboards, gaming UIs, and developer tools.
Published
The code
<label class="if-03"> <span class="if-03-label">SECURE TOKEN</span> <input type="text" name="token" placeholder="sk_live_••••••••••••" required /> </label>
<label class="if-03">
<span class="if-03-label">SECURE TOKEN</span>
<input type="text" name="token" placeholder="sk_live_••••••••••••" required />
</label>.if-03 {
display: grid;
gap: 6px;
width: 100%;
max-width: 280px;
}
.if-03-label {
font-family: "JetBrains Mono", monospace;
font-size: 10px;
letter-spacing: 0.18em;
color: #6cffff;
text-shadow: 0 0 8px rgba(108, 255, 255, 0.5);
}
.if-03 input {
width: 100%;
box-sizing: border-box;
background: #0a0a14;
border: 1px solid rgba(108, 255, 255, 0.4);
border-radius: 6px;
padding: 11px 14px;
color: #fff;
font-family: "JetBrains Mono", monospace;
font-size: 13px;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.if-03 input::placeholder {
color: rgba(108, 255, 255, 0.45);
}
.if-03 input:focus {
border-color: #6cffff;
background: #0d1820;
box-shadow: 0 0 0 1px #6cffff, 0 0 16px rgba(108, 255, 255, 0.45), inset 0 0 12px rgba(108, 255, 255, 0.12);
}.if-03 {
display: grid;
gap: 6px;
width: 100%;
max-width: 280px;
}
.if-03-label {
font-family: "JetBrains Mono", monospace;
font-size: 10px;
letter-spacing: 0.18em;
color: #6cffff;
text-shadow: 0 0 8px rgba(108, 255, 255, 0.5);
}
.if-03 input {
width: 100%;
box-sizing: border-box;
background: #0a0a14;
border: 1px solid rgba(108, 255, 255, 0.4);
border-radius: 6px;
padding: 11px 14px;
color: #fff;
font-family: "JetBrains Mono", monospace;
font-size: 13px;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.if-03 input::placeholder {
color: rgba(108, 255, 255, 0.45);
}
.if-03 input:focus {
border-color: #6cffff;
background: #0d1820;
box-shadow: 0 0 0 1px #6cffff, 0 0 16px rgba(108, 255, 255, 0.45), inset 0 0 12px rgba(108, 255, 255, 0.12);
}Here's a working CSS Input Field from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Neon Glow
Source: https://codefronts.com/components/css-input-fields/neon-glow/
Cyan neon-glow input. The border crisps and the box-shadow blooms on focus — perfect for dark dashboards, gaming UIs, and developer tools.
## HTML
```html
<label class="if-03">
<span class="if-03-label">SECURE TOKEN</span>
<input type="text" name="token" placeholder="sk_live_••••••••••••" required />
</label>
```
## CSS
```css
.if-03 {
display: grid;
gap: 6px;
width: 100%;
max-width: 280px;
}
.if-03-label {
font-family: "JetBrains Mono", monospace;
font-size: 10px;
letter-spacing: 0.18em;
color: #6cffff;
text-shadow: 0 0 8px rgba(108, 255, 255, 0.5);
}
.if-03 input {
width: 100%;
box-sizing: border-box;
background: #0a0a14;
border: 1px solid rgba(108, 255, 255, 0.4);
border-radius: 6px;
padding: 11px 14px;
color: #fff;
font-family: "JetBrains Mono", monospace;
font-size: 13px;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.if-03 input::placeholder {
color: rgba(108, 255, 255, 0.45);
}
.if-03 input:focus {
border-color: #6cffff;
background: #0d1820;
box-shadow: 0 0 0 1px #6cffff, 0 0 16px rgba(108, 255, 255, 0.45), inset 0 0 12px rgba(108, 255, 255, 0.12);
}
```Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Input Field from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Neon Glow
Source: https://codefronts.com/components/css-input-fields/neon-glow/
Cyan neon-glow input. The border crisps and the box-shadow blooms on focus — perfect for dark dashboards, gaming UIs, and developer tools.
## HTML
```html
<label class="if-03">
<span class="if-03-label">SECURE TOKEN</span>
<input type="text" name="token" placeholder="sk_live_••••••••••••" required />
</label>
```
## CSS
```css
.if-03 {
display: grid;
gap: 6px;
width: 100%;
max-width: 280px;
}
.if-03-label {
font-family: "JetBrains Mono", monospace;
font-size: 10px;
letter-spacing: 0.18em;
color: #6cffff;
text-shadow: 0 0 8px rgba(108, 255, 255, 0.5);
}
.if-03 input {
width: 100%;
box-sizing: border-box;
background: #0a0a14;
border: 1px solid rgba(108, 255, 255, 0.4);
border-radius: 6px;
padding: 11px 14px;
color: #fff;
font-family: "JetBrains Mono", monospace;
font-size: 13px;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.if-03 input::placeholder {
color: rgba(108, 255, 255, 0.45);
}
.if-03 input:focus {
border-color: #6cffff;
background: #0d1820;
box-shadow: 0 0 0 1px #6cffff, 0 0 16px rgba(108, 255, 255, 0.45), inset 0 0 12px rgba(108, 255, 255, 0.12);
}
```How this works
A cyan neon-glow input tuned for dark dashboards, gaming UIs, and developer-tool aesthetics. The resting state uses a translucent cyan border (rgba(108, 255, 255, 0.4)) on a near-black background, with a monospace typeface reinforcing the terminal feel.
On focus, three layered box-shadow stops fire together: a 1px solid outer ring that reads as a crisp border upgrade, a 16px cyan bloom that carries the glow, and an inset shadow that tints the field's interior. Because all three ride a single 0.2s transition, the bloom feels like a single continuous state change rather than three separate effects. This is an accessible drop-in for CodePen-style neon input snippets that would otherwise need a background-image or SVG.
Make it yours
- Retint by changing every
#6cffff/rgba(108, 255, 255, ...)instance — magenta, lime, and amber all read well on the same dark base. - Tune bloom intensity via the middle
box-shadowstop: raise16pxto 24px for a heavier halo, or drop the alpha below0.45for a subtler glow. - Swap the monospace stack (
"JetBrains Mono", monospace) for Fira Code or IBM Plex Mono without touching the rest of the CSS. - Deepen the field background by darkening
#0a0a14to pure black if the demo sits on a lighter parent surface.
Gotchas — read before shipping
- The bloom multiplies against light parent backgrounds and looks washed out — this pattern only reads correctly on backgrounds darker than roughly
#1a1a2a. - Heavy
box-shadowon focus can trigger repaints during typing on low-end Android; test scrolling performance if the form has many inputs. - The
outline: nonereset removes the native focus ring; users navigating by keyboard rely on the glow, so never lower the bloom intensity below where it's clearly visible.
Browser support
| Chrome | Safari | Firefox | Edge |
|---|---|---|---|
| 90+ | 14+ | 88+ | 90+ |
Layered box-shadow and text-shadow are universally supported; no fallback path required.