Pure CSSMIT licensed

Brutalist Input

Bold offset-shadow stamp with hard edges and monospace type — a confident input that doesn't apologize for itself. Press collapses into the shadow on focus.

Published May 4, 2026

Live Demo

Try it

The code

<label class="if-28">
  <span class="if-28-label">USERNAME_</span>
  <input type="text" name="user-brut" placeholder="enter handle..." />
</label>

<label class="if-28">
  <span class="if-28-label">USERNAME_</span>
  <input type="text" name="user-brut" placeholder="enter handle..." />
</label>

.if-28 {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 280px;
}

.if-28-label {
  font-family: "Courier New", monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #f0eeff;
}

.if-28 input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  background: #f0eeff;
  border: 2.5px solid #1a1a2e;
  border-radius: 0;
  color: #1a1a2e;
  font: 700 13px/1 "Courier New", monospace;
  letter-spacing: 0.06em;
  outline: none;
  box-shadow: 5px 5px 0 #ff6c8a;
  transition: transform 0.1s, box-shadow 0.1s;
}

.if-28 input::placeholder {
  color: rgba(26, 26, 46, 0.5);
}

.if-28 input:focus {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 #ff6c8a;
}

.if-28 input:invalid:not(:placeholder-shown) {
  box-shadow: 5px 5px 0 #ff5d6c;
}

.if-28 {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 280px;
}

.if-28-label {
  font-family: "Courier New", monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #f0eeff;
}

.if-28 input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  background: #f0eeff;
  border: 2.5px solid #1a1a2e;
  border-radius: 0;
  color: #1a1a2e;
  font: 700 13px/1 "Courier New", monospace;
  letter-spacing: 0.06em;
  outline: none;
  box-shadow: 5px 5px 0 #ff6c8a;
  transition: transform 0.1s, box-shadow 0.1s;
}

.if-28 input::placeholder {
  color: rgba(26, 26, 46, 0.5);
}

.if-28 input:focus {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 #ff6c8a;
}

.if-28 input:invalid:not(:placeholder-shown) {
  box-shadow: 5px 5px 0 #ff5d6c;
}

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: Brutalist Input
Source: https://codefronts.com/components/css-input-fields/brutalist-input/

Bold offset-shadow stamp with hard edges and monospace type — a confident input that doesn't apologize for itself. Press collapses into the shadow on focus.
## HTML
```html
<label class="if-28">
  <span class="if-28-label">USERNAME_</span>
  <input type="text" name="user-brut" placeholder="enter handle..." />
</label>
```
## CSS
```css
.if-28 {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 280px;
}

.if-28-label {
  font-family: "Courier New", monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #f0eeff;
}

.if-28 input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  background: #f0eeff;
  border: 2.5px solid #1a1a2e;
  border-radius: 0;
  color: #1a1a2e;
  font: 700 13px/1 "Courier New", monospace;
  letter-spacing: 0.06em;
  outline: none;
  box-shadow: 5px 5px 0 #ff6c8a;
  transition: transform 0.1s, box-shadow 0.1s;
}

.if-28 input::placeholder {
  color: rgba(26, 26, 46, 0.5);
}

.if-28 input:focus {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 #ff6c8a;
}

.if-28 input:invalid:not(:placeholder-shown) {
  box-shadow: 5px 5px 0 #ff5d6c;
}
```

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: Brutalist Input
Source: https://codefronts.com/components/css-input-fields/brutalist-input/

Bold offset-shadow stamp with hard edges and monospace type — a confident input that doesn't apologize for itself. Press collapses into the shadow on focus.
## HTML
```html
<label class="if-28">
  <span class="if-28-label">USERNAME_</span>
  <input type="text" name="user-brut" placeholder="enter handle..." />
</label>
```
## CSS
```css
.if-28 {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 280px;
}

.if-28-label {
  font-family: "Courier New", monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #f0eeff;
}

.if-28 input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  background: #f0eeff;
  border: 2.5px solid #1a1a2e;
  border-radius: 0;
  color: #1a1a2e;
  font: 700 13px/1 "Courier New", monospace;
  letter-spacing: 0.06em;
  outline: none;
  box-shadow: 5px 5px 0 #ff6c8a;
  transition: transform 0.1s, box-shadow 0.1s;
}

.if-28 input::placeholder {
  color: rgba(26, 26, 46, 0.5);
}

.if-28 input:focus {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 #ff6c8a;
}

.if-28 input:invalid:not(:placeholder-shown) {
  box-shadow: 5px 5px 0 #ff5d6c;
}
```

How this works

The look is built from three CSS primitives: a hard 2.5px black border, zero border-radius, and a solid offset box-shadow: 5px 5px 0 #ff6c8a — no blur radius, no gradient, so the shadow reads as a flat second rectangle behind the input. Courier monospace and heavy letter-spacing lock the neo-brutalist voice.

Interaction is the classic press-into-shadow gesture: :focus shifts the input with translate(2px, 2px) and shrinks the shadow to 3px 3px 0, so the field visually collapses into its own drop. The :invalid:not(:placeholder-shown) rule swaps the shadow to red once the user has typed something invalid, giving inline validation without a single line of JS.

Make it yours

Change the shadow colour — brutalist palettes use one bright accent (pink, lime, cyan) against black.
Increase the offset to 8px 8px 0 for a chunkier stamp, or drop to 3px 3px 0 for a subtler take.
Swap Courier for another monospace such as Space Mono or JetBrains Mono for a modern brutalist feel.
Add required pattern="[a-z0-9]{3,}" to make the red invalid-shadow fire on real validation, not just empty.

Gotchas — read before shipping

The hard-offset shadow points bottom-right, which breaks in RTL layouts — flip it to -5px 5px 0 under [dir="rtl"].
Zero border-radius plus 2.5px borders can look ragged on low-DPR displays; test on a 1x monitor before shipping.
The :invalid rule fires on empty required fields too — the :not(:placeholder-shown) guard is what suppresses the red flash before the user types.

Browser support

Chrome	Safari	Firefox	Edge
60+	12+	60+	60+

Pure CSS box-shadow, transform, and pseudo-classes — universal support, no JavaScript.