Design Styles Medium

Netflix Cinematic

Dark cinematic design with bold red accents, dramatic hero typography, and large imagery — perfect for media and entertainment.

Open in Lab

html css javascript

Targets: JS HTML

Code

/* ============================================================
   Netflix Cinematic — Design Style Showcase
   ============================================================ */

:root {
  /* Core palette */
  --bg-body: #141414;
  --bg-card: #1f1f1f;
  --bg-card-alt: #2a2a2a;
  --bg-input: #333333;
  --bg-hover: #3a3a3a;

  /* Text */
  --text-primary: #ffffff;
  --text-secondary: #b3b3b3;
  --text-placeholder: #888888;

  /* Accent — Netflix red */
  --red: #e50914;
  --red-dark: #b81d24;

  /* Borders — minimal */
  --border: rgba(255, 255, 255, 0.08);

  /* Radius — cinematic small */
  --radius-sm: 2px;
  --radius: 4px;

  /* Shadows */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.6);
  --shadow-heavy: 0 8px 40px rgba(0, 0, 0, 0.8);
}

/* ---- Reset ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg-body);
  color: var(--text-primary);
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}
button {
  font-family: inherit;
  cursor: pointer;
}

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(180deg, rgba(20, 20, 20, 0.98) 0%, rgba(20, 20, 20, 0.75) 100%);
  backdrop-filter: blur(4px);
}

.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 36px;
}

.header-logo {
  font-size: 22px;
  font-weight: 800;
  color: var(--red);
  letter-spacing: 3px;
  flex-shrink: 0;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
}

.nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color 0.15s;
}

.nav-link:hover {
  color: var(--text-primary);
}
.nav-link.active {
  color: var(--text-primary);
  font-weight: 600;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.icon-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
}

.icon-btn:hover {
  color: var(--text-primary);
}

.avatar-sm {
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.5px;
}

/* ---- Layout ---- */
.main {
  padding: 40px 0 80px;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ---- Page title ---- */
.page-title-area {
  padding: 4px 0 8px;
}

.page-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--red);
  margin-bottom: 8px;
}

.page-title {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.1;
}

.page-tagline {
  margin-top: 8px;
  font-size: 15px;
  color: var(--text-secondary);
}

/* ---- Card ---- */
.card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-card);
}

.section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

/* ---- Hero card ---- */
.hero-card {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-heavy);
}

.hero-image-placeholder {
  position: relative;
  width: 100%;
  padding-top: 42%; /* ~21:9 cinematic */
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 30%, #0f3460 60%, #1a1a2e 100%);
  overflow: hidden;
}

/* Decorative film-grain texture */
.hero-image-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 40%, rgba(229, 9, 20, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 60%, rgba(15, 52, 96, 0.4) 0%, transparent 50%);
}

.hero-gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(20, 20, 20, 1) 0%,
    rgba(20, 20, 20, 0.7) 35%,
    rgba(20, 20, 20, 0.1) 70%,
    transparent 100%
  );
}

.hero-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px;
}

.hero-badges {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.rating-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border: 1px solid var(--text-secondary);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
}

.new-badge {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.hero-title {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  margin-bottom: 10px;
}

.hero-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 14px;
}

.match-score {
  color: #46d369;
  font-weight: 700;
}

.hero-year,
.hero-seasons {
  color: var(--text-secondary);
}

.hero-desc {
  max-width: 520px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 20px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.hero-actions {
  display: flex;
  gap: 12px;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 22px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, filter 0.15s;
}

.btn:active {
  transform: scale(0.97);
}

/* Hero play button */
.btn-play {
  background: #fff;
  color: #000;
  font-size: 16px;
}

.btn-play:hover {
  background: rgba(255, 255, 255, 0.85);
}

/* Hero more-info */
.btn-moreinfo {
  background: rgba(109, 109, 110, 0.7);
  color: #fff;
}

.btn-moreinfo:hover {
  background: rgba(109, 109, 110, 0.5);
}

/* Section buttons */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn-white {
  background: #fff;
  color: #000;
}

.btn-white:hover {
  background: rgba(255, 255, 255, 0.85);
}

.btn-gray {
  background: rgba(109, 109, 110, 0.7);
  color: #fff;
}

.btn-gray:hover {
  background: rgba(109, 109, 110, 0.5);
}

.btn-red {
  background: var(--red);
  color: #fff;
}

.btn-red:hover {
  background: var(--red-dark);
  filter: brightness(1.05);
}

/* ---- Profile card ---- */
.profile-card {
  display: flex;
  align-items: center;
  gap: 24px;
}

.profile-avatar-wrap {
  flex-shrink: 0;
}

.profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: var(--radius);
  background: var(--red);
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-info {
  flex: 1;
}

.profile-name {
  font-size: 20px;
  font-weight: 700;
}

.profile-role {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 3px;
}

.profile-stats {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 16px;
}

.stat {
  text-align: center;
}

.stat-value {
  display: block;
  font-size: 20px;
  font-weight: 700;
}

.stat-label {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.stat-divider {
  width: 1px;
  height: 32px;
  background: var(--border);
}

/* ---- Continue watching card ---- */
.continue-thumb-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.continue-thumb {
  width: 120px;
  height: 68px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #1e1e3a, #2a1a1a);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.continue-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 60% 40%, rgba(229, 9, 20, 0.15) 0%, transparent 70%);
}

.continue-info {
  flex: 1;
}

.continue-title {
  font-size: 15px;
  font-weight: 600;
}

.continue-meta {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 3px;
}

.btn-icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}

.btn-icon-circle:hover {
  background: rgba(255, 255, 255, 0.35);
}

.progress-track {
  width: 100%;
  height: 3px;
  background: var(--bg-hover);
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--red);
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* ---- Input ---- */
.input-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.input-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.input {
  height: 44px;
  padding: 0 14px;
  background: var(--bg-input);
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}

.input::placeholder {
  color: var(--text-placeholder);
}

.input:focus {
  border-color: var(--text-secondary);
}

.input-hint {
  font-size: 12px;
  color: var(--text-secondary);
}

/* ---- Badges ---- */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: var(--radius-sm);
}

.new-badge-pill {
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
}

.genre-badge {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  border: none;
}

/* ---- Card hover scale ---- */
.hero-card {
  transition: transform 0.25s ease;
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .header-nav {
    display: none;
  }
  .hero-title {
    font-size: 28px;
  }
  .hero-image-placeholder {
    padding-top: 56%;
  }
  .hero-content {
    padding: 20px;
  }
  .hero-desc {
    display: none;
  }
  .profile-card {
    flex-direction: column;
  }
  .page-title {
    font-size: 28px;
  }
  .container {
    padding: 0 16px;
  }
}

/* Netflix Cinematic — Showcase interactions */

// ── Hero card: hover scale + brightness ──────────────────────
const heroCard = document.getElementById("hero-card");

if (heroCard) {
  heroCard.addEventListener("mouseenter", () => {
    heroCard.style.transform = "scale(1.015)";
    heroCard.style.transition = "transform 0.3s ease";
    heroCard.style.zIndex = "10";
  });
  heroCard.addEventListener("mouseleave", () => {
    heroCard.style.transform = "";
    heroCard.style.zIndex = "";
  });
}

// ── Continue watching card: hover lift ───────────────────────
const continueCard = document.getElementById("continue-card");

if (continueCard) {
  continueCard.style.transition = "transform 0.25s ease, box-shadow 0.25s ease";
  continueCard.addEventListener("mouseenter", () => {
    continueCard.style.transform = "translateY(-2px)";
    continueCard.style.boxShadow = "0 12px 40px rgba(0,0,0,0.7)";
  });
  continueCard.addEventListener("mouseleave", () => {
    continueCard.style.transform = "";
    continueCard.style.boxShadow = "";
  });
}

// ── Progress bar: animate on page load ───────────────────────
window.addEventListener("load", () => {
  const fill = document.querySelector(".progress-fill");
  if (fill) {
    const target = fill.style.width;
    fill.style.width = "0%";
    requestAnimationFrame(() => {
      setTimeout(() => {
        fill.style.width = target;
      }, 200);
    });
  }
});

// ── Nav: active state toggle ──────────────────────────────────
document.querySelectorAll(".nav-link").forEach((link) => {
  link.addEventListener("click", function (e) {
    e.preventDefault();
    document.querySelectorAll(".nav-link").forEach((l) => l.classList.remove("active"));
    this.classList.add("active");
  });
});

// ── Search input: instant feedback ───────────────────────────
const searchInput = document.getElementById("search-input");
const searchHint = searchInput?.nextElementSibling;

if (searchInput && searchHint) {
  const suggestions = ['Try "dark sci-fi" or "award-winning"', 'Searching for "' + "" + '"...'];

  searchInput.addEventListener("input", () => {
    const val = searchInput.value.trim();
    if (val.length > 0) {
      searchHint.textContent = `Searching for "${val}"...`;
      searchHint.style.color = "#B3B3B3";
    } else {
      searchHint.textContent = suggestions[0];
      searchHint.style.color = "";
    }
  });
}

// ── Button active feedback ────────────────────────────────────
document.querySelectorAll(".btn").forEach((btn) => {
  btn.addEventListener("click", () => {
    btn.style.transition = "transform 0.08s";
    btn.style.transform = "scale(0.96)";
    setTimeout(() => {
      btn.style.transform = "";
    }, 100);
  });
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Netflix Cinematic — Style Showcase</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <!-- Header / Navbar -->
  <header class="site-header">
    <div class="header-inner">
      <div class="header-logo">STREAMIX</div>
      <nav class="header-nav">
        <a href="#" class="nav-link active">Home</a>
        <a href="#" class="nav-link">Series</a>
        <a href="#" class="nav-link">Films</a>
        <a href="#" class="nav-link">New &amp; Popular</a>
      </nav>
      <div class="header-actions">
        <button class="icon-btn" aria-label="Search">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
          </svg>
        </button>
        <div class="avatar-sm" style="background: #E50914; color: #fff;">NX</div>
      </div>
    </div>
  </header>

  <main class="main">
    <div class="container">

      <!-- Page title -->
      <div class="page-title-area">
        <p class="page-eyebrow">DESIGN STYLE</p>
        <h1 class="page-title">Netflix Cinematic</h1>
        <p class="page-tagline">Dark surfaces, bold red, and dramatic cinema typography</p>
      </div>

      <!-- Hero card (featured show) -->
      <section class="hero-card" id="hero-card">
        <div class="hero-image-placeholder">
          <div class="hero-gradient-overlay"></div>
          <div class="hero-content">
            <div class="hero-badges">
              <span class="rating-badge">TV-MA</span>
              <span class="rating-badge">4K</span>
              <span class="rating-badge new-badge">NEW</span>
            </div>
            <h2 class="hero-title">Dark Horizon</h2>
            <p class="hero-meta">
              <span class="match-score">97% Match</span>
              <span class="hero-year">2026</span>
              <span class="hero-seasons">3 Seasons</span>
            </p>
            <p class="hero-desc">A gripping sci-fi thriller about a team of engineers who discover an anomaly at the edge of the observable universe — and what answers it holds.</p>
            <div class="hero-actions">
              <button class="btn btn-play">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                  <polygon points="5,3 19,12 5,21"/>
                </svg>
                Play
              </button>
              <button class="btn btn-moreinfo">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                  <circle cx="12" cy="12" r="10"/>
                  <line x1="12" y1="8" x2="12" y2="12"/>
                  <line x1="12" y1="16" x2="12.01" y2="16"/>
                </svg>
                More Info
              </button>
            </div>
          </div>
        </div>
      </section>

      <!-- Profile card -->
      <section class="card profile-card">
        <div class="profile-avatar-wrap">
          <div class="profile-avatar">NX</div>
        </div>
        <div class="profile-info">
          <h2 class="profile-name">Nina Cross</h2>
          <p class="profile-role">Subscriber · Premium Plan</p>
          <div class="profile-stats">
            <div class="stat">
              <span class="stat-value">248</span>
              <span class="stat-label">Watched</span>
            </div>
            <div class="stat-divider"></div>
            <div class="stat">
              <span class="stat-value">17</span>
              <span class="stat-label">My List</span>
            </div>
            <div class="stat-divider"></div>
            <div class="stat">
              <span class="stat-value">4K</span>
              <span class="stat-label">Quality</span>
            </div>
          </div>
        </div>
      </section>

      <!-- Continue Watching card -->
      <section class="card continue-card" id="continue-card">
        <p class="section-label">CONTINUE WATCHING</p>
        <div class="continue-thumb-wrap">
          <div class="continue-thumb"></div>
          <div class="continue-info">
            <p class="continue-title">The Last Signal</p>
            <p class="continue-meta">S2 · E6 · 38 min left</p>
          </div>
          <button class="btn-icon-circle" aria-label="Play">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
              <polygon points="5,3 19,12 5,21"/>
            </svg>
          </button>
        </div>
        <div class="progress-track">
          <div class="progress-fill" style="width: 64%;"></div>
        </div>
      </section>

      <!-- Buttons section -->
      <section class="card">
        <p class="section-label">ACTIONS</p>
        <div class="btn-row">
          <button class="btn btn-white">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="5,3 19,12 5,21"/></svg>
            Play
          </button>
          <button class="btn btn-gray">More Info</button>
          <button class="btn btn-red">Watch Now</button>
        </div>
      </section>

      <!-- Input section -->
      <section class="card">
        <p class="section-label">SEARCH</p>
        <div class="input-group">
          <label class="input-label" for="search-input">Find something to watch</label>
          <input
            id="search-input"
            class="input"
            type="text"
            placeholder="Titles, genres, people..."
          />
          <p class="input-hint">Try "dark sci-fi" or "award-winning"</p>
        </div>
      </section>

      <!-- Badges -->
      <section class="card">
        <p class="section-label">CONTENT LABELS</p>
        <div class="badge-row">
          <span class="badge rating-badge">TV-MA</span>
          <span class="badge rating-badge">HD</span>
          <span class="badge rating-badge">4K</span>
          <span class="badge rating-badge">HDR</span>
          <span class="badge new-badge-pill">NEW</span>
          <span class="badge genre-badge">SCI-FI</span>
          <span class="badge genre-badge">THRILLER</span>
        </div>
      </section>

    </div>
  </main>

  <script src="script.js"></script>
</body>
</html>

Netflix Cinematic

A full-page component showcase faithful to the Netflix design language — the defining visual standard for modern streaming and entertainment UI. The pure #141414 background and almost-no-border card style creates an immersive, cinema-like environment where content imagery commands full attention. Red is used surgically: only on the single primary CTA, just as Netflix uses it exclusively for the “N” logo and play buttons. Every other affordance is handled with dark grays and white text.

The showcase includes a hero banner card with a 16:9 image placeholder and gradient overlay, profile stats card, a “continue watching” progress-bar card, and the full action button palette. Content-rating style badges (TV-MA, HD, 4K) complete the authentic streaming experience. DM Sans from Google Fonts delivers the bold, screen-fill typographic weight that Netflix Sans is known for.

Key characteristics

Flat dark canvas — #141414 body with #1F1F1F/#2A2A2A card surfaces; no visible borders, no outer glows
Minimal border-radius — 4px on cards and buttons mirrors Netflix’s near-square component style
Red used once — #E50914 appears only on the hero primary action; all other buttons use white or gray
16:9 hero card — full-width aspect-ratio image placeholder with a cinematic bottom-to-top gradient overlay
Progress bar — thin red #E50914 fill at card bottom communicates “continue watching” state
Hover scale — cards scale to 1.04 with brightness increase on hover, exactly like Netflix shelf items

When to use

Built for entertainment, media, streaming, and content-discovery interfaces. This style works wherever the content itself (cover art, thumbnails, imagery) is the primary visual element and the UI should recede gracefully into the background. Avoid using the red accent anywhere beyond the primary CTA — diluting it breaks the brand grammar. Use this pattern for content library browsers, media player landing pages, video-on-demand showcases, and entertainment app prototypes.