Agence WagnerAgence Wagner
FRENDEELS
Retour aux designs
SombreNéonOrnementalClassique
Aperçu

Neon Gothic Design Reference

Overview

Neon Gothic is a hybrid visual aesthetic that fuses the dramatic verticality, ornate stonework, and spiritual gravitas of medieval Gothic architecture with the electric luminosity of neon lighting and contemporary dark-mode digital interfaces. Where traditional Gothic design draws the eye upward through pointed arches, ribbed vaults, and soaring spires, Neon Gothic reinterprets these forms as glowing outlines traced against near-black surfaces -- cathedral geometry rendered in phosphorescent light. The result is a design language that feels simultaneously ancient and hyper-modern, sacred and synthetic.

The aesthetic draws from several real-world visual sources. Gothic Revival architecture of the 18th and 19th centuries provides the structural vocabulary: lancet arches, tracery patterns, rose windows, flying buttresses, and pinnacle silhouettes. Neon signage culture, from the rain-slicked streets of Tokyo and Hong Kong to the vintage motel signs of the American Southwest, supplies the color temperature and luminous quality. Contemporary cyberpunk and dark-mode UI trends provide the digital framework, where darkness is not merely background but active negative space that amplifies every point of light.

In web and interface design, Neon Gothic translates to layouts built on strong vertical axes and symmetrical compositions, wrapped in deep black or dark purple-grey backgrounds. Typography blends blackletter and modern geometric sans-serifs, with display text often rendered in glowing neon hues. Decorative elements draw on Gothic tracery, pointed arch frames, and rose window motifs -- but always as luminous outlines rather than solid masses. The color palette is deliberately restricted: a foundation of near-blacks and dark stone greys punctuated by two or three neon accent colors, typically electric violet, cyan, and magenta, with occasional warm amber for contrast. Every colored element should appear to emit its own light, casting soft glow halos into the surrounding darkness. The overall mood is one of reverent intensity -- the hushed awe of a cathedral nave crossed with the electric buzz of a neon-lit urban night.

Visual Characteristics

Core Design Traits

  • Deep, near-black backgrounds -- charcoal, dark indigo, and desaturated purple-black surfaces simulating the interior darkness of a Gothic cathedral
  • Neon-outlined Gothic forms -- pointed arches, trefoils, quatrefoils, and tracery rendered as luminous stroke outlines rather than filled shapes
  • Strong vertical emphasis -- layouts, typography, and decorative elements all draw the eye upward, echoing the soaring verticality of Gothic spires
  • Glowing accent colors -- electric violet, neon cyan, hot magenta, and spectral green used sparingly against dark fields for maximum luminous impact
  • Stained-glass color effects -- translucent, jewel-toned panels and overlays that reference the light-filtering quality of Gothic stained glass windows
  • Ornate decorative borders -- intricate line-work frames inspired by Gothic tracery, rose windows, and pointed arch moldings
  • Stone and metal textures -- subtle background textures referencing dark stone, wrought iron, and weathered metal surfaces
  • Symmetrical compositions -- bilateral symmetry throughout layouts, echoing the formal symmetry of Gothic cathedral facades
  • Atmospheric depth layers -- fog, particle effects, and radial gradient halos that create a sense of cavernous depth
  • Neon glow halos -- every accent color element emits soft light into its surroundings via layered box-shadow and text-shadow effects
  • Gothic silhouette motifs -- gargoyles, spires, cruciform shapes, and flying buttress outlines used as decorative accents

Design Principles

  • Darkness is the dominant canvas -- light is always artificial, always neon, always the exception
  • Gothic architectural forms provide structural vocabulary; neon provides the material expression
  • Symmetry and vertical emphasis create a sense of sacred geometry and upward aspiration
  • Color is luminescence: every colored element should appear to radiate its own glow outward
  • Ornament is essential but must be rendered as light, not mass -- outlines over fills
  • Contrast is extreme: near-black backgrounds against vivid neon accents with minimal mid-tones
  • Typography bridges eras: blackletter display faces paired with clean modern body text
  • Restraint in accent color usage -- two to three neon hues maximum to avoid visual chaos

Color Palette

The Neon Gothic palette is built on a foundation of near-black and dark stone tones, pierced by intense neon accent colors. The darkness should feel deep and atmospheric, like the interior of a medieval cathedral at midnight, while the neon accents cut through with the sharp, electric quality of gas-tube signage. Every accent color should be applied with accompanying glow effects to maintain the luminous character.

Swatch Hex Role/Usage
Obsidian Black #0B0B10 Primary background, deepest layer
Cathedral Stone #15151F Card backgrounds, secondary surfaces
Dark Cloister #1C1C2A Elevated panels, nav backgrounds
Gargoyle Grey #2A2A3C Borders, dividers, subtle container backgrounds
Ash Mortar #3A3A50 Inactive states, subtle structural elements
Neon Violet #A855F7 Primary accent, headings, interactive elements
Electric Orchid #C026D3 Secondary accent, hover states, decorative glow
Spectral Cyan #06B6D4 Tertiary accent, links, informational highlights
Magenta Flame #EC4899 Highlight accent, notifications, call-to-action
Phantom Green #10B981 Success states, confirmations, secondary decorative
Votive Amber #F59E0B Warning indicators, warm accent, candle-light references
Crypt Crimson #EF4444 Error states, danger, critical alerts
Ghost Silver #D4D4E0 Primary body text on dark backgrounds
Mist Grey #8888A0 Secondary text, captions, muted labels
Wraith White #F0F0F8 High-emphasis text, bright display headings

CSS Custom Properties

:root {
  /* Backgrounds */
  --gothic-bg-void: #0b0b10;
  --gothic-bg-stone: #15151f;
  --gothic-bg-cloister: #1c1c2a;
  --gothic-bg-elevated: #2a2a3c;
  --gothic-bg-mortar: #3a3a50;

  /* Neon accents */
  --gothic-violet: #a855f7;
  --gothic-orchid: #c026d3;
  --gothic-cyan: #06b6d4;
  --gothic-magenta: #ec4899;
  --gothic-green: #10b981;
  --gothic-amber: #f59e0b;
  --gothic-crimson: #ef4444;

  /* Text */
  --gothic-text-primary: #d4d4e0;
  --gothic-text-secondary: #8888a0;
  --gothic-text-bright: #f0f0f8;

  /* Glows (box-shadow / text-shadow values) */
  --gothic-glow-violet: 0 0 12px rgba(168, 85, 247, 0.5), 0 0 45px rgba(168, 85, 247, 0.15);
  --gothic-glow-orchid: 0 0 12px rgba(192, 38, 211, 0.5), 0 0 45px rgba(192, 38, 211, 0.15);
  --gothic-glow-cyan: 0 0 12px rgba(6, 182, 212, 0.5), 0 0 45px rgba(6, 182, 212, 0.15);
  --gothic-glow-magenta: 0 0 12px rgba(236, 72, 153, 0.5), 0 0 45px rgba(236, 72, 153, 0.15);

  /* Borders */
  --gothic-border: 1px solid rgba(168, 85, 247, 0.15);
  --gothic-border-bright: 1px solid rgba(168, 85, 247, 0.4);
  --gothic-border-cyan: 1px solid rgba(6, 182, 212, 0.3);
}

Typography

Neon Gothic typography bridges two eras: the dense, ornamental character of medieval blackletter scripts and the clean precision of modern geometric sans-serifs. Display text and headings lean into blackletter or decorative serif faces to establish the Gothic identity, while body text uses highly legible sans-serif or monospace fonts to ensure readability on dark backgrounds. Glowing text-shadow effects applied to headings reinforce the neon dimension. The interplay between archaic letterforms and electric luminosity is central to the aesthetic's tension.

Font Style Best For
UnifrakturCook Blackletter, medieval Display headings, hero titles, logo text
MedievalSharp Gothic serif, angular Secondary headings, section titles
Cinzel Classical serif, elegant Formal headings, navigation labels
Cinzel Decorative Ornamental serif Feature titles, decorative display
Playfair Display High-contrast serif Subheadings, pull quotes, editorial text
Inter Clean geometric sans Body text, readable long-form content
Rajdhani Condensed semi-rounded Navigation, labels, UI elements
Space Mono Retro-futuristic monospace Code blocks, data elements, technical captions
Orbitron Geometric, futuristic Accent labels, counters, secondary display

Font Pairing Suggestions

Heading Font Body Font Character
UnifrakturCook (700) Inter (400) High-contrast medieval-modern, signature Neon Gothic
Cinzel Decorative (400) Inter (300) Elegant Gothic-classical with clean readability
MedievalSharp (400) Rajdhani (400) Angular Gothic with condensed modern body
Cinzel (700) Space Mono (400) Formal Gothic meets technical interface
Playfair Display (700) Inter (400) Refined Gothic-inspired editorial

Typography CSS Example

/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&family=Cinzel:wght@400;700;900&family=Inter:wght@300;400;500;600&display=swap');

/* Headings -- Gothic blackletter with neon glow */
h1, h2, h3 {
  font-family: 'Cinzel', 'Playfair Display', serif;
  font-weight: 700;
  color: var(--gothic-text-bright);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.2;
}

/* Display / Hero text -- blackletter with full neon treatment */
.gothic-display {
  font-family: 'UnifrakturCook', 'MedievalSharp', serif;
  font-size: clamp(2.5rem, 7vw, 6rem);
  letter-spacing: 0.05em;
  line-height: 1.1;
  color: var(--gothic-violet);
  text-shadow:
    0 0 10px rgba(168, 85, 247, 0.8),
    0 0 30px rgba(168, 85, 247, 0.4),
    0 0 60px rgba(168, 85, 247, 0.2);
}

/* Body text -- clean modern sans for readability */
body {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.75;
  color: var(--gothic-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Layout Principles

  • Strong vertical axis -- content flows along a central vertical spine, echoing the nave of a Gothic cathedral; center-aligned sections and symmetrical columns
  • Bilateral symmetry -- layouts mirror across a central axis, reinforcing the formal, sacred geometry of Gothic architecture
  • Pointed-arch section dividers -- use CSS clip-path or SVG pointed-arch shapes to transition between full-width sections
  • Generous dark space -- treat negative space as the cathedral interior; ample breathing room around neon-accented elements prevents visual overload
  • Layered depth through overlapping panels -- semi-transparent cards and panels stacked with slight offsets to create a sense of cavernous depth
  • Grid-based modular structure -- use CSS Grid with consistent gutters, aligning content to a structured grid that references Gothic floor plans
  • Gothic tracery borders as section frames -- ornamental borders around major content areas using CSS borders, outlines, and pseudo-elements
  • Vertical rhythm through consistent spacing -- use a modular scale (e.g., 8px base) to maintain harmonious vertical rhythm throughout
  • Full-width hero sections with contained content -- hero areas span the viewport but inner content is constrained to 900-1100px
  • Progressive reveal via scroll -- content sections emerge from darkness, reinforcing the atmospheric depth; use subtle opacity transitions on scroll
  • Neon accent placement at structural intersections -- place glow effects at borders, corners, and divider lines where architectural elements would join

CSS / Design Techniques

Neon Glow Text Effect

/* Multi-layered neon text glow */
.gothic-neon-text {
  color: var(--gothic-violet);
  text-shadow:
    0 0 7px rgba(168, 85, 247, 0.9),
    0 0 20px rgba(168, 85, 247, 0.6),
    0 0 42px rgba(168, 85, 247, 0.35),
    0 0 82px rgba(168, 85, 247, 0.15);
}

/* Cyan neon variant */
.gothic-neon-text--cyan {
  color: var(--gothic-cyan);
  text-shadow:
    0 0 7px rgba(6, 182, 212, 0.9),
    0 0 20px rgba(6, 182, 212, 0.6),
    0 0 42px rgba(6, 182, 212, 0.35),
    0 0 82px rgba(6, 182, 212, 0.15);
}

/* Pulsing neon animation */
@keyframes neon-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

.gothic-neon-text--pulse {
  animation: neon-pulse 3s ease-in-out infinite;
}

Neon Gothic Card

.gothic-card {
  background: var(--gothic-bg-stone);
  border: 1px solid rgba(168, 85, 247, 0.2);
  padding: 2rem;
  position: relative;
  text-align: center;
  clip-path: polygon(
    0% 5%, 5% 0%, 95% 0%, 100% 5%,
    100% 95%, 95% 100%, 5% 100%, 0% 95%
  );
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.gothic-card:hover {
  border-color: rgba(168, 85, 247, 0.5);
  box-shadow:
    0 0 15px rgba(168, 85, 247, 0.15),
    0 0 45px rgba(168, 85, 247, 0.05),
    inset 0 0 15px rgba(168, 85, 247, 0.05);
}

/* Pointed arch top ornament */
.gothic-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 30px;
  border-bottom: 2px solid var(--gothic-violet);
  border-radius: 0 0 50% 50%;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
}

/* Bottom glow line */
.gothic-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--gothic-violet),
    transparent
  );
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
}

Neon Gothic Button

.gothic-button {
  display: inline-block;
  padding: 0.85rem 2.5rem;
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--gothic-violet);
  background: transparent;
  border: 1px solid var(--gothic-violet);
  position: relative;
  cursor: pointer;
  transition: all 0.35s ease;
  text-decoration: none;
  clip-path: polygon(
    0% 8px, 8px 0%, calc(100% - 8px) 0%, 100% 8px,
    100% calc(100% - 8px), calc(100% - 8px) 100%,
    8px 100%, 0% calc(100% - 8px)
  );
}

.gothic-button:hover {
  color: var(--gothic-text-bright);
  background: rgba(168, 85, 247, 0.1);
  border-color: var(--gothic-violet);
  box-shadow:
    0 0 12px rgba(168, 85, 247, 0.5),
    0 0 35px rgba(168, 85, 247, 0.15),
    inset 0 0 12px rgba(168, 85, 247, 0.1);
  text-shadow: 0 0 8px rgba(168, 85, 247, 0.6);
}

/* Magenta variant */
.gothic-button--magenta {
  color: var(--gothic-magenta);
  border-color: var(--gothic-magenta);
}

.gothic-button--magenta:hover {
  background: rgba(236, 72, 153, 0.1);
  border-color: var(--gothic-magenta);
  box-shadow:
    0 0 12px rgba(236, 72, 153, 0.5),
    0 0 35px rgba(236, 72, 153, 0.15),
    inset 0 0 12px rgba(236, 72, 153, 0.1);
  text-shadow: 0 0 8px rgba(236, 72, 153, 0.6);
}

Neon Gothic Navigation

.gothic-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  padding: 1.25rem 2rem;
  background: rgba(11, 11, 16, 0.92);
  border-bottom: 1px solid rgba(168, 85, 247, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 100;
}

.gothic-nav::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--gothic-violet) 20%,
    var(--gothic-cyan) 50%,
    var(--gothic-violet) 80%,
    transparent
  );
  opacity: 0.5;
}

.gothic-nav a {
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gothic-text-secondary);
  text-decoration: none;
  padding: 0.4rem 0;
  position: relative;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.gothic-nav a:hover {
  color: var(--gothic-violet);
  text-shadow: 0 0 12px rgba(168, 85, 247, 0.5);
}

.gothic-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gothic-violet);
  box-shadow: 0 0 6px rgba(168, 85, 247, 0.5);
  transition: width 0.3s ease;
}

.gothic-nav a:hover::after {
  width: 100%;
}

Neon Gothic Hero Section

.gothic-hero {
  text-align: center;
  padding: 8rem 2rem 6rem;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(168, 85, 247, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(6, 182, 212, 0.05) 0%, transparent 50%),
    var(--gothic-bg-void);
  border-bottom: 1px solid rgba(168, 85, 247, 0.2);
}

/* Pointed arch overlay at bottom */
.gothic-hero::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 60px;
  border-top: 2px solid var(--gothic-violet);
  border-radius: 50% 50% 0 0;
  box-shadow: 0 -4px 20px rgba(168, 85, 247, 0.25);
}

.gothic-hero h1 {
  font-family: 'UnifrakturCook', serif;
  font-size: clamp(3rem, 8vw, 7rem);
  color: var(--gothic-violet);
  text-shadow:
    0 0 10px rgba(168, 85, 247, 0.8),
    0 0 30px rgba(168, 85, 247, 0.4),
    0 0 60px rgba(168, 85, 247, 0.2);
  margin-bottom: 1rem;
  line-height: 1.1;
}

.gothic-hero .subtitle {
  font-family: 'Cinzel', serif;
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--gothic-text-secondary);
  margin-bottom: 2rem;
}

.gothic-hero .description {
  max-width: 600px;
  margin: 0 auto 2.5rem;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--gothic-text-primary);
}

Gothic Tracery Divider

/* Pointed arch divider between sections */
.gothic-divider {
  width: 100%;
  height: 50px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 3rem 0;
}

.gothic-divider::before,
.gothic-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(168, 85, 247, 0.4)
  );
}

.gothic-divider::after {
  background: linear-gradient(
    90deg,
    rgba(168, 85, 247, 0.4),
    transparent
  );
}

/* Central ornament -- diamond shape */
.gothic-divider span {
  width: 10px;
  height: 10px;
  background: var(--gothic-violet);
  transform: rotate(45deg);
  margin: 0 1rem;
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.6);
  flex-shrink: 0;
}

Gothic Pointed-Arch Frame

/* Pointed arch container using clip-path */
.gothic-arch {
  position: relative;
  background: var(--gothic-bg-stone);
  padding: 3rem 2rem 2rem;
  clip-path: polygon(
    0% 15%, 50% 0%, 100% 15%,
    100% 100%, 0% 100%
  );
  border: 1px solid rgba(168, 85, 247, 0.2);
}

/* Inner content area */
.gothic-arch__content {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}

/* Stained-glass color overlay */
.gothic-stained-glass {
  background: linear-gradient(
    135deg,
    rgba(168, 85, 247, 0.05) 0%,
    rgba(6, 182, 212, 0.05) 33%,
    rgba(236, 72, 153, 0.05) 66%,
    rgba(168, 85, 247, 0.05) 100%
  );
  border: 1px solid rgba(168, 85, 247, 0.1);
  padding: 2rem;
}

Rose Window Decorative Element

/* CSS-only rose window ornament */
.gothic-rose {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 2px solid var(--gothic-violet);
  position: relative;
  margin: 2rem auto;
  box-shadow:
    0 0 12px rgba(168, 85, 247, 0.3),
    inset 0 0 12px rgba(168, 85, 247, 0.1);
}

.gothic-rose::before {
  content: '';
  position: absolute;
  inset: 15px;
  border-radius: 50%;
  border: 1px solid rgba(168, 85, 247, 0.4);
  background: conic-gradient(
    from 0deg,
    rgba(168, 85, 247, 0.1) 0deg,
    transparent 30deg,
    rgba(6, 182, 212, 0.1) 60deg,
    transparent 90deg,
    rgba(236, 72, 153, 0.1) 120deg,
    transparent 150deg,
    rgba(168, 85, 247, 0.1) 180deg,
    transparent 210deg,
    rgba(6, 182, 212, 0.1) 240deg,
    transparent 270deg,
    rgba(236, 72, 153, 0.1) 300deg,
    transparent 330deg,
    rgba(168, 85, 247, 0.1) 360deg
  );
}

.gothic-rose::after {
  content: '';
  position: absolute;
  inset: 35px;
  border-radius: 50%;
  border: 1px solid rgba(168, 85, 247, 0.3);
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.2);
}

Design Do's and Don'ts

Do's

  • Use deep, near-black backgrounds with subtle blue or purple undertones to create cathedral-like atmospheric depth
  • Apply multi-layered text-shadow and box-shadow to all neon accent elements for authentic luminous glow
  • Pair blackletter or decorative serif display fonts with clean sans-serif body text for the medieval-modern tension
  • Incorporate Gothic architectural motifs -- pointed arches, tracery, rose windows -- as luminous outlines and frames
  • Maintain strict bilateral symmetry in layouts to echo the formal geometry of Gothic cathedral facades
  • Limit neon accent colors to two or three hues to preserve visual coherence against the dark palette
  • Use generous dark space around neon elements; the surrounding darkness amplifies their perceived brightness
  • Apply slow, subtle animations (3-5 second cycles) for neon pulse and glow breathing effects

Don'ts

  • Use bright, flat, or pastel backgrounds; the darkness is fundamental and must never be compromised
  • Apply solid fills to Gothic forms; tracery, arches, and ornaments should be rendered as glowing outlines only
  • Use rounded, bubbly, or playful typography that contradicts the Gothic gravitas
  • Overwhelm the page with too many competing neon colors; cacophony of hues destroys the cathedral mood
  • Create fast, flashy, or aggressive animations; the aesthetic is reverent and measured, not frenetic
  • Mix warm, earthy, or natural color palettes with the neon accents; warmth undermines the electric chill
  • Use heavy drop shadows or neumorphic effects; depth comes from glow and transparency, not shadow
  • Neglect the Gothic structural vocabulary; without arches, tracery, or vertical emphasis the design becomes generic cyberpunk
Aesthetic Relationship to Neon Gothic
Cyberpunk Shares neon-on-dark palette and glow effects, but lacks Gothic architectural vocabulary
Gothic Revival Direct architectural ancestor; provides all structural and ornamental vocabulary
Dark Academia Shares reverence for historical forms and dark palettes, but is warm and analog where Neon Gothic is electric
Vaporwave Shares neon color sensibility, but is ironic and nostalgic vs. Neon Gothic's sincere gravitas
Cathedral Core Shares Gothic architectural fascination but favors natural stone and candlelight over neon
Stained Glass A decorative sub-element of Gothic design; Neon Gothic reinterprets it through luminous digital color
Dark Mode UI Shares the dark background paradigm; Neon Gothic adds ornamental and architectural character
Art Deco Shares geometric formality and luxury, but Art Deco is angular and metallic where Neon Gothic is pointed and luminous

Quick-Start HTML Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Neon Gothic</title>
  <link href="https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&family=Cinzel:wght@400;600;700;900&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
  <style>
    /* ===========================
       CSS CUSTOM PROPERTIES
    =========================== */
    :root {
      /* Backgrounds */
      --gothic-bg-void: #0b0b10;
      --gothic-bg-stone: #15151f;
      --gothic-bg-cloister: #1c1c2a;
      --gothic-bg-elevated: #2a2a3c;
      --gothic-bg-mortar: #3a3a50;

      /* Neon accents */
      --gothic-violet: #a855f7;
      --gothic-orchid: #c026d3;
      --gothic-cyan: #06b6d4;
      --gothic-magenta: #ec4899;
      --gothic-green: #10b981;
      --gothic-amber: #f59e0b;

      /* Text */
      --gothic-text-primary: #d4d4e0;
      --gothic-text-secondary: #8888a0;
      --gothic-text-bright: #f0f0f8;
    }

    /* ===========================
       RESET & BASE
    =========================== */
    *, *::before, *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      background: var(--gothic-bg-void);
      color: var(--gothic-text-primary);
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      font-weight: 400;
      letter-spacing: 0.02em;
      line-height: 1.75;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    h1, h2, h3, h4, h5, h6 {
      font-family: 'Cinzel', serif;
      font-weight: 700;
      color: var(--gothic-text-bright);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      line-height: 1.2;
    }

    a {
      color: var(--gothic-cyan);
      text-decoration: none;
      transition: color 0.3s ease, text-shadow 0.3s ease;
    }

    a:hover {
      color: var(--gothic-violet);
      text-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
    }

    /* ===========================
       AMBIENT BACKGROUND
    =========================== */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background:
        radial-gradient(ellipse at 20% 20%, rgba(168, 85, 247, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(6, 182, 212, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(236, 72, 153, 0.02) 0%, transparent 40%);
      pointer-events: none;
      z-index: 0;
    }

    /* ===========================
       NAVIGATION
    =========================== */
    nav {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 2.5rem;
      padding: 1.25rem 2rem;
      background: rgba(11, 11, 16, 0.92);
      border-bottom: 1px solid rgba(168, 85, 247, 0.12);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      position: sticky;
      top: 0;
      z-index: 100;
    }

    nav::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent,
        var(--gothic-violet) 20%,
        var(--gothic-cyan) 50%,
        var(--gothic-violet) 80%,
        transparent
      );
      opacity: 0.4;
    }

    nav a {
      font-family: 'Cinzel', serif;
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      color: var(--gothic-text-secondary);
      padding: 0.4rem 0;
      position: relative;
    }

    nav a:hover {
      color: var(--gothic-violet);
      text-shadow: 0 0 12px rgba(168, 85, 247, 0.5);
    }

    nav a::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 0;
      height: 1px;
      background: var(--gothic-violet);
      box-shadow: 0 0 6px rgba(168, 85, 247, 0.5);
      transition: width 0.3s ease;
    }

    nav a:hover::after {
      width: 100%;
    }

    /* ===========================
       HERO SECTION
    =========================== */
    .hero {
      text-align: center;
      padding: 8rem 2rem 6rem;
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(ellipse at 50% 0%, rgba(168, 85, 247, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 50% 100%, rgba(6, 182, 212, 0.05) 0%, transparent 50%);
      border-bottom: 1px solid rgba(168, 85, 247, 0.15);
    }

    .hero::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 50%;
      transform: translateX(-50%);
      width: 100px;
      height: 50px;
      border-top: 2px solid var(--gothic-violet);
      border-radius: 50% 50% 0 0;
      box-shadow: 0 -4px 18px rgba(168, 85, 247, 0.25);
    }

    .hero .overline {
      font-family: 'Cinzel', serif;
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.35em;
      color: var(--gothic-text-secondary);
      display: block;
      margin-bottom: 1rem;
    }

    .hero h1 {
      font-family: 'UnifrakturCook', serif;
      font-size: clamp(3rem, 8vw, 7rem);
      color: var(--gothic-violet);
      text-transform: none;
      text-shadow:
        0 0 10px rgba(168, 85, 247, 0.8),
        0 0 30px rgba(168, 85, 247, 0.4),
        0 0 60px rgba(168, 85, 247, 0.2);
      margin-bottom: 1.5rem;
      line-height: 1.1;
      letter-spacing: 0.03em;
    }

    .hero p {
      max-width: 580px;
      margin: 0 auto 2.5rem;
      font-size: 1.05rem;
      line-height: 1.85;
      color: var(--gothic-text-primary);
    }

    /* ===========================
       DIVIDER
    =========================== */
    .divider {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 3rem 0;
      padding: 0 2rem;
    }

    .divider::before,
    .divider::after {
      content: '';
      flex: 1;
      max-width: 300px;
      height: 1px;
    }

    .divider::before {
      background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.35));
    }

    .divider::after {
      background: linear-gradient(90deg, rgba(168, 85, 247, 0.35), transparent);
    }

    .divider span {
      width: 8px;
      height: 8px;
      background: var(--gothic-violet);
      transform: rotate(45deg);
      margin: 0 1rem;
      box-shadow: 0 0 8px rgba(168, 85, 247, 0.6);
      flex-shrink: 0;
    }

    /* ===========================
       CONTENT SECTION
    =========================== */
    .content {
      max-width: 1100px;
      margin: 0 auto;
      padding: 4rem 2rem;
      position: relative;
      z-index: 1;
    }

    .content h2 {
      text-align: center;
      font-size: clamp(1.4rem, 3vw, 2rem);
      margin-bottom: 0.75rem;
      color: var(--gothic-cyan);
      text-shadow: 0 0 12px rgba(6, 182, 212, 0.3);
    }

    .content .section-sub {
      text-align: center;
      font-size: 0.85rem;
      color: var(--gothic-text-secondary);
      letter-spacing: 0.15em;
      text-transform: uppercase;
      margin-bottom: 3rem;
    }

    /* ===========================
       CARD GRID
    =========================== */
    .card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
    }

    .card {
      background: var(--gothic-bg-stone);
      border: 1px solid rgba(168, 85, 247, 0.15);
      padding: 2.5rem 2rem 2rem;
      position: relative;
      text-align: center;
      transition: border-color 0.4s ease, box-shadow 0.4s ease;
    }

    .card:hover {
      border-color: rgba(168, 85, 247, 0.4);
      box-shadow:
        0 0 20px rgba(168, 85, 247, 0.1),
        inset 0 0 20px rgba(168, 85, 247, 0.03);
    }

    .card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 50px;
      height: 25px;
      border-bottom: 2px solid var(--gothic-violet);
      border-radius: 0 0 50% 50%;
      box-shadow: 0 4px 12px rgba(168, 85, 247, 0.25);
    }

    .card::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 15%;
      width: 70%;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--gothic-violet), transparent);
      box-shadow: 0 0 8px rgba(168, 85, 247, 0.4);
    }

    .card h3 {
      font-size: 1.1rem;
      margin-bottom: 1rem;
      color: var(--gothic-text-bright);
      letter-spacing: 0.12em;
    }

    .card p {
      font-size: 0.92rem;
      line-height: 1.75;
      color: var(--gothic-text-secondary);
      margin-bottom: 1.5rem;
    }

    .card .tag {
      display: inline-block;
      font-family: 'Cinzel', serif;
      font-size: 0.65rem;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      color: var(--gothic-violet);
      border: 1px solid rgba(168, 85, 247, 0.3);
      padding: 0.3rem 0.9rem;
      background: rgba(168, 85, 247, 0.05);
    }

    /* ===========================
       BUTTONS
    =========================== */
    .cta {
      text-align: center;
      padding: 2rem 2rem 4rem;
      position: relative;
      z-index: 1;
    }

    .button {
      display: inline-block;
      padding: 0.85rem 2.5rem;
      font-family: 'Cinzel', serif;
      font-size: 0.8rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--gothic-violet);
      background: transparent;
      border: 1px solid var(--gothic-violet);
      cursor: pointer;
      transition: all 0.35s ease;
      text-decoration: none;
      position: relative;
    }

    .button:hover {
      color: var(--gothic-text-bright);
      background: rgba(168, 85, 247, 0.1);
      box-shadow:
        0 0 14px rgba(168, 85, 247, 0.45),
        0 0 40px rgba(168, 85, 247, 0.12),
        inset 0 0 14px rgba(168, 85, 247, 0.08);
      text-shadow: 0 0 8px rgba(168, 85, 247, 0.5);
    }

    .button--cyan {
      color: var(--gothic-cyan);
      border-color: var(--gothic-cyan);
    }

    .button--cyan:hover {
      color: var(--gothic-text-bright);
      background: rgba(6, 182, 212, 0.1);
      border-color: var(--gothic-cyan);
      box-shadow:
        0 0 14px rgba(6, 182, 212, 0.45),
        0 0 40px rgba(6, 182, 212, 0.12),
        inset 0 0 14px rgba(6, 182, 212, 0.08);
      text-shadow: 0 0 8px rgba(6, 182, 212, 0.5);
    }

    /* ===========================
       FEATURES SECTION
    =========================== */
    .features {
      max-width: 900px;
      margin: 0 auto;
      padding: 4rem 2rem;
      position: relative;
      z-index: 1;
    }

    .features h2 {
      text-align: center;
      font-size: clamp(1.4rem, 3vw, 2rem);
      margin-bottom: 3rem;
      color: var(--gothic-violet);
      text-shadow: 0 0 12px rgba(168, 85, 247, 0.3);
    }

    .feature-list {
      list-style: none;
      display: grid;
      gap: 1.5rem;
    }

    .feature-list li {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      padding: 1.25rem 1.5rem;
      background: var(--gothic-bg-stone);
      border-left: 2px solid var(--gothic-violet);
      box-shadow: -4px 0 12px rgba(168, 85, 247, 0.08);
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .feature-list li:hover {
      border-left-color: var(--gothic-cyan);
      box-shadow: -4px 0 16px rgba(6, 182, 212, 0.12);
    }

    .feature-list li::before {
      content: '\2726';
      color: var(--gothic-violet);
      font-size: 1.2rem;
      flex-shrink: 0;
      margin-top: 0.1rem;
      text-shadow: 0 0 6px rgba(168, 85, 247, 0.5);
    }

    /* ===========================
       ROSE WINDOW ORNAMENT
    =========================== */
    .rose-ornament {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 2px solid var(--gothic-violet);
      position: relative;
      margin: 3rem auto;
      box-shadow:
        0 0 12px rgba(168, 85, 247, 0.25),
        inset 0 0 12px rgba(168, 85, 247, 0.08);
    }

    .rose-ornament::before {
      content: '';
      position: absolute;
      inset: 12px;
      border-radius: 50%;
      border: 1px solid rgba(168, 85, 247, 0.35);
      background: conic-gradient(
        from 0deg,
        rgba(168, 85, 247, 0.08) 0deg,
        transparent 30deg,
        rgba(6, 182, 212, 0.08) 60deg,
        transparent 90deg,
        rgba(236, 72, 153, 0.08) 120deg,
        transparent 150deg,
        rgba(168, 85, 247, 0.08) 180deg,
        transparent 210deg,
        rgba(6, 182, 212, 0.08) 240deg,
        transparent 270deg,
        rgba(236, 72, 153, 0.08) 300deg,
        transparent 330deg,
        rgba(168, 85, 247, 0.08) 360deg
      );
    }

    .rose-ornament::after {
      content: '';
      position: absolute;
      inset: 30px;
      border-radius: 50%;
      border: 1px solid rgba(168, 85, 247, 0.3);
      box-shadow: 0 0 6px rgba(168, 85, 247, 0.2);
    }

    /* ===========================
       FOOTER
    =========================== */
    footer {
      text-align: center;
      padding: 3rem 2rem;
      border-top: 1px solid rgba(168, 85, 247, 0.1);
      font-size: 0.8rem;
      color: var(--gothic-text-secondary);
      letter-spacing: 0.08em;
      position: relative;
      z-index: 1;
    }

    footer::before {
      content: '';
      position: absolute;
      top: -1px;
      left: 0;
      width: 100%;
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(168, 85, 247, 0.3) 30%,
        rgba(6, 182, 212, 0.2) 50%,
        rgba(168, 85, 247, 0.3) 70%,
        transparent
      );
    }

    footer span {
      color: var(--gothic-violet);
      text-shadow: 0 0 8px rgba(168, 85, 247, 0.4);
    }

    /* ===========================
       NEON PULSE ANIMATION
    =========================== */
    @keyframes neon-breathe {
      0%, 100% {
        text-shadow:
          0 0 10px rgba(168, 85, 247, 0.8),
          0 0 30px rgba(168, 85, 247, 0.4),
          0 0 60px rgba(168, 85, 247, 0.2);
      }
      50% {
        text-shadow:
          0 0 6px rgba(168, 85, 247, 0.6),
          0 0 20px rgba(168, 85, 247, 0.3),
          0 0 45px rgba(168, 85, 247, 0.1);
      }
    }

    .hero h1 {
      animation: neon-breathe 4s ease-in-out infinite;
    }

    /* ===========================
       RESPONSIVE
    =========================== */
    @media (max-width: 768px) {
      nav {
        gap: 1.2rem;
        padding: 1rem 1rem;
      }

      nav a {
        font-size: 0.65rem;
        letter-spacing: 0.12em;
      }

      .hero {
        padding: 5rem 1.5rem 4rem;
      }

      .card-grid {
        grid-template-columns: 1fr;
      }

      .button {
        display: block;
        margin: 0.5rem auto;
        max-width: 280px;
      }
    }
  </style>
</head>
<body>
  <!-- Navigation -->
  <nav>
    <a href="#">Cathedral</a>
    <a href="#">Gallery</a>
    <a href="#">Reliquary</a>
    <a href="#">Codex</a>
    <a href="#">Vespers</a>
  </nav>

  <!-- Hero Section -->
  <header class="hero">
    <span class="overline">Enter the Luminous Dark</span>
    <h1>Neon Gothic</h1>
    <p>Gothic architecture meets neon luminescence. Pointed arches
       traced in electric violet, dark stone rendered as pixel-deep
       black, and the sacred geometry of medieval cathedrals reborn
       in phosphorescent light.</p>
  </header>

  <!-- Divider -->
  <div class="divider">
    <span></span><span></span><span></span>
  </div>

  <!-- Cards Section -->
  <section class="content">
    <h2>The Three Pillars</h2>
    <p class="section-sub">Darkness &middot; Structure &middot; Light</p>

    <div class="card-grid">
      <div class="card">
        <h3>Vaulted Darkness</h3>
        <p>The near-black background is not mere absence but
           active negative space -- the vast interior of a
           cathedral nave at midnight, waiting to be pierced
           by luminous accents.</p>
        <span class="tag">Foundation</span>
      </div>
      <div class="card">
        <h3>Sacred Geometry</h3>
        <p>Pointed arches, tracery patterns, and rose window
           motifs provide the structural vocabulary. Every layout
           echoes the bilateral symmetry and vertical aspiration
           of Gothic architecture.</p>
        <span class="tag">Structure</span>
      </div>
      <div class="card">
        <h3>Neon Radiance</h3>
        <p>Electric violet, spectral cyan, and magenta flame
           cut through the darkness like stained glass lit
           from within. Every accent glows, every border
           emits its own light.</p>
        <span class="tag">Illumination</span>
      </div>
    </div>
  </section>

  <!-- CTA Buttons -->
  <div class="cta">
    <a href="#" class="button">Enter the Cathedral</a>
    &nbsp;&nbsp;
    <a href="#" class="button button--cyan">View the Codex</a>
  </div>

  <!-- Divider -->
  <div class="divider">
    <span></span><span></span><span></span>
  </div>

  <!-- Features Section -->
  <section class="features">
    <h2>Design Tenets</h2>

    <ul class="feature-list">
      <li>Darkness is the dominant canvas. Light is always artificial, always neon.</li>
      <li>Gothic forms provide structure. Neon provides the material expression.</li>
      <li>Symmetry and vertical emphasis create sacred, upward-drawing compositions.</li>
      <li>Ornament is essential but must be rendered as light -- outlines over fills.</li>
      <li>Restraint in accent hues. Two to three neon colors, never more.</li>
    </ul>
  </section>

  <!-- Rose Window Ornament -->
  <div class="rose-ornament"></div>

  <!-- Footer -->
  <footer>
    <p>Crafted in the spirit of <span>Neon Gothic</span> &middot; Where cathedrals meet circuitry</p>
  </footer>
</body>
</html>

Implementation Tips

  • Near-black with undertone: Use #0B0B10 or #15151F rather than pure #000000; the subtle blue-violet undertone creates atmospheric depth and prevents the flat, lifeless quality of true black
  • Layered glow shadows: Stack 3-4 box-shadow or text-shadow values with increasing spread radius and decreasing opacity to simulate realistic neon light falloff (e.g., 7px at 90%, 20px at 60%, 42px at 35%, 82px at 15%)
  • Font rendering on dark backgrounds: Always include -webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale to ensure clean, thin letterforms against dark surfaces
  • Performance with glow effects: Neon glows using box-shadow are GPU-composited but can be expensive when applied to many elements simultaneously; limit heavy multi-layer glows to key focal elements (hero text, primary buttons, card borders on hover) and use simpler single-layer glows for ambient elements
  • Pointed-arch clip-paths: Use clip-path: polygon() to create pointed arch shapes for cards and section containers; test on Safari with -webkit-clip-path fallback, and note that clip-path disables box-shadow -- use filter: drop-shadow() instead when both are needed
  • Breathing animations: Set neon pulse animations to 3-5 second cycles with ease-in-out timing; faster cycles feel anxious and undermine the reverential mood
  • Backdrop-filter for glass panels: Apply backdrop-filter: blur(12px) with semi-transparent backgrounds for navigation and overlay elements to create the effect of light filtering through translucent stone; always include the -webkit-backdrop-filter prefix for Safari
  • Color accent discipline: Limit neon accent usage to approximately 10-15% of visible surface area; the darkness must dominate for the luminous accents to retain their electric impact
← Retour aux designs
Agence WagnerAgence Wagner

© 2026 Agence Wagner. Tous droits réservés.

Designs issus de chrislemke/website_designs, sous licence MIT.