CSS-lab · Hero's

Brutalist split-screen hero

Een brutalistische hero in twee helften: links een zwart vlak met kop en knoppen, rechts een off-white raster met een groot nummer.

Gemiddeld
Pure CSS
MIT-licentie
CSS Grid
gap als scheidingslijn
linear-gradient raster
container queries
cqi

HTML

<section class="ss-hero">
  <div class="ss-grid">
    <div class="ss-left">
      <p class="ss-kicker">[01] Webdesign & development</p>
      <h2 class="ss-title">Rauw ontwerp. <span class="ss-hl">Strakke</span> code.</h2>
      <p class="ss-intro">Geen sjablonen of opvulling, maar een site met een uitgesproken eigen gezicht. Gebouwd om snel te laden en makkelijk te beheren.</p>
      <div class="ss-actions">
        <a href="#" class="ss-btn ss-btn--primary">Start een project</a>
        <a href="#" class="ss-btn ss-btn--ghost">Bekijk cases</a>
      </div>
    </div>
    <div class="ss-right" aria-hidden="true">
      <span class="ss-meta ss-meta--tl">Index</span>
      <span class="ss-meta ss-meta--tr">2026</span>
      <span class="ss-num">01</span>
      <span class="ss-meta ss-meta--bl">Scroll ↓</span>
      <span class="ss-star">✦</span>
    </div>
  </div>
</section>

CSS

/* Brutalist split-screen hero - prefix .ss- */
.ss-hero {
  --ink: #0C0C0D;
  --paper: #F9F8F6;
  --accent: #C6FF3D;
  --cobalt: #2E5BFF;
  --rule: 2px;
  --cell: 40px;
  --line: rgba(12, 12, 13, 0.09);
  container-type: inline-size;
  width: 100%;
  background: var(--paper);
}

/* Twee kolommen; de gap is de harde scheidingslijn */
.ss-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--rule);
  min-height: 520px;
  background: var(--accent);
}

.ss-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: clamp(28px, 6vw, 72px);
  padding: clamp(28px, 6cqi, 72px);
  color: var(--paper);
  background: var(--ink);
}

.ss-kicker {
  margin: 0;
  font: 600 0.8rem/1.2 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.ss-title {
  margin: 0;
  font-family: "Arial Black", "Helvetica Neue", Impact, system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(2.2rem, 6vw, 5.2rem);
  font-size: clamp(2.2rem, 6cqi, 5.2rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.ss-hl {
  display: inline-block;
  padding: 0 0.1em;
  color: var(--ink);
  background: var(--accent);
  transform: rotate(-2deg);
}

.ss-intro {
  max-width: 40ch;
  margin: 0;
  font: 400 1.05rem/1.6 system-ui, sans-serif;
  color: rgba(249, 248, 246, 0.74);
}

.ss-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
}

.ss-btn {
  padding: 16px 22px;
  font: 700 0.95rem/1 system-ui, sans-serif;
  text-decoration: none;
  border: 2px solid var(--paper);
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, background-color 0.15s, color 0.15s;
}

/* Primair: offset-schaduw die groeit */
.ss-btn--primary {
  color: var(--ink);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 4px 4px 0 var(--paper);
}

.ss-btn--primary:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--paper);
}

.ss-btn--ghost {
  color: var(--paper);
}

.ss-btn--ghost:hover {
  color: var(--ink);
  background: var(--paper);
}

.ss-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 5px;
}

/* Rechts: raster uit twee 1px-gradients */
.ss-right {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
}

/* Scanlijn */
.ss-right::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--cobalt);
  opacity: 0.6;
  animation: ss-scan 6s linear infinite;
}

.ss-num {
  font: 900 clamp(7rem, 26vw, 20rem)/0.8 "Arial Black", "Helvetica Neue", Impact, system-ui, sans-serif;
  font-size: clamp(7rem, 26cqi, 20rem);
  letter-spacing: -0.06em;
  text-shadow: 0.04em 0.04em 0 var(--cobalt);
}

.ss-meta {
  position: absolute;
  padding: 6px 10px;
  font: 600 0.72rem/1 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--paper);
  border: 2px solid var(--ink);
}

.ss-meta--tl { top: 20px; left: 20px; }
.ss-meta--tr { top: 20px; right: 20px; }
.ss-meta--bl { bottom: 20px; left: 20px; }

.ss-star {
  position: absolute;
  right: 22px;
  bottom: 14px;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--cobalt);
  animation: ss-spin 12s linear infinite;
}

/* Smal: kolommen onder elkaar */
@container (max-width: 700px) {
  .ss-grid {
    grid-template-columns: 1fr;
  }

  .ss-right {
    min-height: 240px;
  }
}

@keyframes ss-scan {
  to { transform: translateY(520px); }
}

@keyframes ss-spin {
  to { transform: rotate(1turn); }
}

@media (prefers-reduced-motion: reduce) {
  .ss-right::after,
  .ss-star {
    animation: none;
  }

  .ss-btn {
    transition: none;
  }

  .ss-btn--primary:hover {
    transform: none;
  }
}

Wat het is en waar je het gebruikt

Deze hero is opgebouwd als een poster in twee helften. Links staat een zwart vlak met een kicker, een vette kop met één gemarkeerd woord, een korte intro en twee knoppen. Rechts ligt een off-white vlak met een technisch raster, een gigantisch nummer en kleine labels in de hoeken, als in een catalogus of een blauwdruk. Een harde acid-lime lijn van 2 pixels scheidt de twee helften.

Het patroon werkt goed voor agencies, portfolio’s, productpagina’s met een nummering (hoofdstuk 01, release 02) of een eventsite. De linkerhelft draagt de boodschap, de rechterhelft geeft karakter, zonder dat je een foto nodig hebt.

Zo werkt het

.ss-grid is een display: grid met grid-template-columns: 1.15fr 1fr. De scheidingslijn is geen border maar de gap van var(--rule), waar de achtergrondkleur van het grid doorheen schijnt.
Het raster rechts bestaat uit twee linear-gradient-lagen van 1 pixel, horizontaal en verticaal, herhaald met background-size: var(--cell) var(--cell). Er zijn dus geen afbeeldingen nodig.
Het nummer krijgt diepte met een harde text-shadow in cobalt, zonder blur. Een smalle cobaltlijn (.ss-right::after) scant met de keyframes ss-scan langzaam van boven naar beneden en een ster draait rustig in de hoek.
De hero is een container-type: inline-size. Met @container (max-width: 700px) vallen de kolommen onder elkaar zodra de hero zelf smal is, of dat nu op een telefoon is of in een smalle kolom. Lettergroottes schalen met clamp() en cqi.
De primaire knop heeft een brutalistische offset-schaduw in off-white die bij hover groeit.

Aanpassen

Op .ss-hero stel je met --ink en --paper de twee vlakken in, met --accent de scheidingslijn, de markering en de primaire knop, en met --cobalt de schaduw van het nummer, de scanlijn en de ster. --rule is de dikte van de scheidingslijn, --cell de grootte van een rastervak en --line de kleur van de rasterlijnen. Het nummer en de hoeklabels zijn gewone tekst, dus die pas je direct in de HTML aan.

Toegankelijkheid en browsersupport

De rechterhelft is puur decoratief en heeft aria-hidden="true", zodat schermlezers alleen de kop, de intro en de knoppen horen. De kop is een <h2> omdat de demopagina al een <h1> heeft. Op je eigen pagina maak je er een <h1> van. Beide knoppen zijn echte links met een duidelijke :focus-visible-outline. Off-white op carbon en carbon op acid lime hebben een hoog contrast. In het prefers-reduced-motion-blok stoppen de scanlijn en de ster en vallen de knop-transities weg. Container queries en cqi werken in alle actuele browsers. Zonder ondersteuning blijft de layout in twee kolommen staan, met de vw-fallback voor de lettergrootte.

Verder lezen

Lees meer over deze stijl in ons artikel over brutalistisch webdesign, of bekijk hoe we zulke layouts bouwen binnen webdesign.

Licentie & credit

Gratis te gebruiken onder de MIT-licentie, ook in commerciële projecten. Een link terug is niet verplicht, maar wordt enorm gewaardeerd:

Credit-link

<a href="https://manifestdigital.nl/css-snippets/split-screen-hero/">Brutalist split-screen hero door Manifest Digital</a>

Wil je deze stijl op maat, gekoppeld aan je merk en met scroll-animaties? Bekijk interactief webdesign →

Meer hero's

Nog meer gedurfde CSS

Hero's · GemiddeldKinetische typografie-heroBekijk & kopieer code

Hero's · GevorderdGrid-reveal heroBekijk & kopieer code

Hero's · GevorderdMesh-gradient heroBekijk & kopieer code

Alle CSS-snippets →

Brutalist split-screen hero

Rauw ontwerp. Strakke code.

Wat het is en waar je het gebruikt

Zo werkt het

Aanpassen

Toegankelijkheid en browsersupport

Verder lezen

Nog meer gedurfde CSS

Websites die bewegen en raken

Achter elk raster zit een plan

Kleur die beweegt, merken die blijven