Agence WagnerAgence Wagner
FRENDEELS
Retour aux designs
RétroMaximalisteÉlégantColoré
Aperçu

Y2K Glam Design Reference

Y2K Glam is the glamorous, maximalist, pop-culture-driven branch of the late-1990s/early-2000s aesthetic, defined by chrome surfaces, holographic finishes, rhinestone embellishments, metallic fabrics, and celebrity excess. Where Y2K Futurism focuses on technology and digital utopia, Y2K Glam channels the era's pop-star decadence -- Paris Hilton's bedazzled Sidekick, Destiny's Child in matching metallic outfits, butterfly clips, low-rise everything, and velour tracksuits. In web and UI design, the aesthetic translates into shimmering metallic gradients, holographic color-shift effects, hot-pink-and-silver palettes, sparkle animations, and bold, bedazzled typography. It is a celebration of glamour, excess, and the optimistic materialism of the millennium turn, where everything glittered, everything was chrome, and more was always more.

Visual Characteristics

Core Design Traits

  • Chrome and silver surfaces: Highly reflective metallic gradients dominate backgrounds, buttons, and text treatments, simulating polished chrome jewelry and accessories
  • Holographic and iridescent effects: Rainbow color-shift overlays, prismatic light reflections, and oil-slick gradients reference holographic stickers, trading cards, and packaging of the era
  • Hot pink as primary accent: Vibrant fuchsia and bubblegum pink serve as the signature color pop against silver and white, evoking Barbie, lip gloss, and pop-star branding
  • Rhinestone and sparkle motifs: Scattered glitter particles, star-burst sparkle animations, and gem-like decorative elements reference bedazzled phones, tiaras, and crystal-encrusted accessories
  • Butterfly and star iconography: Stylized butterfly shapes and star/asterisk motifs used as decorative accents, dividers, and navigation elements
  • Glossy, wet-look surfaces: High-shine finishes with specular highlights that simulate lip gloss, vinyl, patent leather, and liquid metal
  • Metallic and gradient typography: Display text rendered with chrome, gold, or holographic gradient fills and reflective highlight bands
  • Soft-focus glamour photography treatment: Images styled with bloom effects, pink tinting, lens flare, and diffused lighting reminiscent of music video aesthetics
  • Frosted and translucent panels: Semi-transparent containers with blur effects that reference frosted lip gloss tubes, clear phones, and icy cosmetics packaging

Design Principles

  • Glamour over minimalism: Every surface should shimmer, sparkle, or reflect; restraint is not the goal
  • Pop-star confidence: Design should feel bold, unapologetic, and attention-grabbing, like a music video set
  • Pink-and-chrome duality: The core tension is between warm pink femininity and cool metallic futurism
  • Sparkle as texture: Glitter and rhinestone effects function as a visual texture layer, adding depth and movement
  • Aspirational excess: The aesthetic communicates luxury, desirability, and the fantasy of celebrity lifestyle
  • Playful futurism: Technology is exciting and fashionable, not cold or intimidating; phones are accessories, not tools
  • Layered maximalism: Multiple effects -- gradients, glows, sparkles, translucency -- combine to create rich, dimensional compositions

Color Palette

Swatch Hex Role/Usage
Chrome Silver #C0C0C8 Primary metallic surfaces, chrome gradients, text fills
Liquid Mercury #E8E8F0 Light metallic highlights, card backgrounds, chrome bright spots
Hot Pink #FF69B4 Primary accent, buttons, links, emphasis elements
Fuchsia Pop #FF1493 High-energy call-to-action, vibrant highlights
Bubblegum #FFB6D9 Soft pink backgrounds, card fills, hover states
Baby Pink #FFC0CB Secondary surfaces, soft overlays, subtle tints
Holo Violet #C084FC Holographic accent, tertiary highlights, gradient stops
Holo Cyan #67E8F9 Holographic accent, iridescent shimmer, cool-tone balance
Champagne Gold #D4A843 Metallic gold accents, premium highlights, star icons
Ice White #F8F8FF Page backgrounds, clean surfaces, text on dark
Midnight Glam #1A1025 Dark backgrounds, contrast base, deep sections
Deep Purple #2D1B4E Secondary dark surface, card backgrounds on dark mode
Rhinestone Sparkle #FFFACD Sparkle/star particle effects, glitter highlights
Lip Gloss #FF85A2 Mid-tone pink, gradient midpoints, interactive hover

CSS Custom Properties

:root {
  /* Chrome metallics */
  --glam-chrome: #c0c0c8;
  --glam-chrome-light: #e8e8f0;
  --glam-chrome-bright: #f0f0f8;
  --glam-chrome-mid: #a0a0b0;
  --glam-chrome-dark: #707080;

  /* Pinks */
  --glam-hot-pink: #ff69b4;
  --glam-fuchsia: #ff1493;
  --glam-bubblegum: #ffb6d9;
  --glam-baby-pink: #ffc0cb;
  --glam-lip-gloss: #ff85a2;

  /* Holographic accents */
  --glam-holo-violet: #c084fc;
  --glam-holo-cyan: #67e8f9;
  --glam-holo-green: #86efac;

  /* Metallics */
  --glam-gold: #d4a843;
  --glam-rose-gold: #e8b4b8;

  /* Neutrals */
  --glam-ice-white: #f8f8ff;
  --glam-midnight: #1a1025;
  --glam-deep-purple: #2d1b4e;

  /* Effects */
  --glam-sparkle: #fffacd;
  --glam-glow-pink: rgba(255, 105, 180, 0.4);
  --glam-glow-fuchsia: rgba(255, 20, 147, 0.3);
  --glam-glow-holo: rgba(192, 132, 252, 0.25);
  --glam-glass: rgba(255, 255, 255, 0.08);
  --glam-glass-pink: rgba(255, 105, 180, 0.08);
  --glam-glass-border: rgba(255, 255, 255, 0.15);

  /* Functional mappings */
  --glam-bg-primary: var(--glam-midnight);
  --glam-bg-secondary: var(--glam-deep-purple);
  --glam-bg-surface: var(--glam-glass);
  --glam-text-primary: var(--glam-ice-white);
  --glam-text-secondary: var(--glam-chrome-light);
  --glam-accent: var(--glam-hot-pink);
  --glam-accent-strong: var(--glam-fuchsia);
  --glam-border: var(--glam-glass-border);
}

Typography

Font Weight(s) Style Usage
Playfair Display 400, 700, 900 High-contrast serif with glamorous personality Hero headlines, editorial titles
Tenor Sans 400 Elegant, clean sans-serif with fashion-magazine feel Subheadings, navigation labels
Quicksand 300, 400, 500, 700 Rounded, soft, friendly geometric sans Body text, UI elements
Sacramento 400 Flowing script with handwritten glamour Decorative accents, taglines
Jost 300, 400, 500, 700 Geometric Futura-inspired sans-serif Headlines, versatile body text
Michroma 400 Wide, futuristic display face Display headlines, section titles
Outfit 300, 400, 600 Modern geometric sans with clean lines Body text, captions, labels
Poiret One 400 Art Deco-inspired geometric display Decorative headlines, accents

Font Pairing Suggestions

Heading Body Mood
Playfair Display 900 Quicksand 400 High-glamour editorial with soft readability
Michroma 400 Outfit 400 Futuristic chrome-era tech-glam
Playfair Display 700 Italic Tenor Sans 400 Fashion-magazine luxury with understated elegance
Poiret One 400 Jost 300 Art Deco meets millennium-turn futurism
Sacramento 400 Quicksand 400 Script-accented playful femininity

CSS Example

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Quicksand:wght@300;400;500;700&family=Michroma&family=Sacramento&family=Outfit:wght@300;400;600&display=swap');

body {
  font-family: 'Quicksand', 'Outfit', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--glam-text-secondary);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--glam-text-primary);
}

/* Chrome gradient display text */
.glam-display {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  font-weight: 900;
  line-height: 1.05;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #e0d0e8 20%,
    #c0c0c8 40%,
    #808090 55%,
    #c0b8c8 70%,
    #ffffff 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Script accent for decorative labels */
.glam-script {
  font-family: 'Sacramento', cursive;
  font-size: 1.8rem;
  color: var(--glam-hot-pink);
}

/* Futuristic label text */
.glam-label {
  font-family: 'Michroma', 'Outfit', sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--glam-chrome-mid);
}

Layout Principles

  • Centered, glamorous compositions: Content gravitates toward the center with symmetrical layouts that project confidence and poise, like a red-carpet photo setup
  • Full-width hero sections with dramatic scale: Large, immersive hero areas with oversized typography, metallic gradients, and sparkle effects set the tone immediately
  • Card grids with generous spacing: 2-3 column card grids with ample gutters allow each element to sparkle without crowding; cards should feel like display cases
  • Layered depth through translucency: Semi-transparent panels, blurred backgrounds, and overlapping elements create rich dimensional compositions
  • Pink-to-chrome gradient flow: Page sections transition between warm pink zones and cool chrome zones, creating visual rhythm and contrast
  • Decorative dividers between sections: Rhinestone-dot lines, star motifs, or butterfly icons separate content areas with ornamental flair
  • Narrow content widths for editorial feel: Body text should be constrained to 600-750px for an intimate, magazine-editorial reading experience within wider decorative frames
  • Mobile-first sparkle: On small screens, reduce particle effects and simplify gradients but maintain the pink-chrome palette and metallic typography

CSS / Design Techniques

Glam Card Component

.glam-card {
  background: linear-gradient(
    160deg,
    rgba(45, 27, 78, 0.9) 0%,
    rgba(26, 16, 37, 0.95) 100%
  );
  border: 1px solid rgba(255, 105, 180, 0.15);
  border-radius: 20px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(255, 105, 180, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Chrome highlight edge */
.glam-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 105, 180, 0.5),
    rgba(192, 132, 252, 0.4),
    transparent
  );
}

.glam-card:hover {
  border-color: rgba(255, 105, 180, 0.35);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(255, 105, 180, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

Glam Button Component

/* Metallic pink pill button */
.glam-button {
  display: inline-block;
  padding: 0.75rem 2.5rem;
  border-radius: 100px;
  border: 1px solid rgba(255, 105, 180, 0.5);
  background: linear-gradient(
    180deg,
    #ff85a2 0%,
    #ff69b4 40%,
    #e0559a 100%
  );
  color: #ffffff;
  font-family: 'Quicksand', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 4px 16px rgba(255, 20, 147, 0.3);
  transition: all 0.3s ease;
}

.glam-button:hover {
  background: linear-gradient(
    180deg,
    #ff99b8 0%,
    #ff7bc4 40%,
    #ff69b4 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 6px 24px rgba(255, 20, 147, 0.45);
  transform: translateY(-2px);
}

/* Chrome variant */
.glam-button--chrome {
  border: 1px solid var(--glam-chrome-mid);
  background: linear-gradient(
    180deg,
    #e0e0e8 0%,
    #c0c0c8 35%,
    #a0a0b0 65%,
    #c0c0c8 100%
  );
  color: var(--glam-midnight);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.3);
}

.glam-button--chrome:hover {
  background: linear-gradient(
    180deg,
    #f0f0f8 0%,
    #d0d0d8 35%,
    #b0b0b8 65%,
    #d0d0d8 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 4px 16px rgba(255, 105, 180, 0.2);
}

.glam-nav {
  background: rgba(26, 16, 37, 0.85);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid rgba(255, 105, 180, 0.12);
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

.glam-nav::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 105, 180, 0.3) 20%,
    rgba(192, 132, 252, 0.3) 50%,
    rgba(103, 232, 249, 0.2) 80%,
    transparent
  );
}

.glam-nav a {
  color: var(--glam-chrome-light);
  font-family: 'Quicksand', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.glam-nav a:hover {
  color: var(--glam-hot-pink);
  text-shadow: 0 0 12px rgba(255, 105, 180, 0.4);
}

Hero Section

.glam-hero {
  text-align: center;
  padding: 8rem 2rem 6rem;
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    var(--glam-midnight) 0%,
    var(--glam-deep-purple) 60%,
    var(--glam-midnight) 100%
  );
}

/* Ambient pink-violet glow */
.glam-hero::before {
  content: '';
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 400px;
  background: radial-gradient(
    ellipse,
    rgba(255, 105, 180, 0.12) 0%,
    rgba(192, 132, 252, 0.06) 40%,
    transparent 70%
  );
  pointer-events: none;
}

.glam-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 900;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #ffc0cb 20%,
    #c0c0c8 45%,
    #808090 55%,
    #c0b0c8 75%,
    #ffffff 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  z-index: 1;
}

.glam-hero p {
  margin-top: 1.5rem;
  font-family: 'Quicksand', sans-serif;
  font-size: 1.1rem;
  color: var(--glam-bubblegum);
  letter-spacing: 0.08em;
  position: relative;
  z-index: 1;
}

Holographic Shimmer Effect

/* Iridescent holographic overlay -- apply to containers or as a pseudo-element */
.glam-holographic {
  background: linear-gradient(
    135deg,
    rgba(255, 182, 217, 0.15) 0%,
    rgba(192, 132, 252, 0.12) 16%,
    rgba(103, 232, 249, 0.10) 33%,
    rgba(134, 239, 172, 0.08) 50%,
    rgba(255, 250, 205, 0.10) 66%,
    rgba(255, 105, 180, 0.12) 83%,
    rgba(192, 132, 252, 0.15) 100%
  );
  background-size: 300% 300%;
  mix-blend-mode: screen;
}

/* Animated holographic color shift */
@keyframes holo-shift {
  0% { background-position: 0% 50%; }
  25% { background-position: 100% 0%; }
  50% { background-position: 100% 100%; }
  75% { background-position: 0% 100%; }
  100% { background-position: 0% 50%; }
}

.glam-holographic--animated {
  animation: holo-shift 8s ease-in-out infinite;
}

/* Holographic card wrapper */
.glam-holo-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

.glam-holo-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 105, 180, 0.08) 0%,
    rgba(103, 232, 249, 0.06) 33%,
    rgba(192, 132, 252, 0.08) 66%,
    rgba(255, 182, 217, 0.06) 100%
  );
  background-size: 200% 200%;
  animation: holo-shift 6s ease-in-out infinite;
  pointer-events: none;
}

Chrome Text Effect

/* Chrome metallic gradient text */
.glam-chrome-text {
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #d0d0d8 20%,
    #808090 45%,
    #a0a0b0 55%,
    #d0d0d8 75%,
    #ffffff 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Pink chrome variant */
.glam-chrome-text--pink {
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #ffc0cb 20%,
    #c0c0c8 45%,
    #ff85a2 60%,
    #ffc0cb 80%,
    #ffffff 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Gold chrome variant */
.glam-chrome-text--gold {
  background: linear-gradient(
    180deg,
    #fff8e0 0%,
    #d4a843 30%,
    #a07830 50%,
    #d4a843 70%,
    #fff8e0 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Rhinestone Border / Sparkle Divider

/* Rhinestone-dot divider line */
.glam-rhinestone-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 3rem auto;
  max-width: 300px;
}

.glam-rhinestone-divider::before,
.glam-rhinestone-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--glam-hot-pink),
    transparent
  );
}

/* Rhinestone dots -- use multiple spans */
.glam-rhinestone-divider span {
  width: 6px;
  height: 6px;
  background: var(--glam-chrome-bright);
  border-radius: 50%;
  box-shadow:
    0 0 4px rgba(255, 255, 255, 0.6),
    0 0 8px rgba(255, 105, 180, 0.3);
}

/* Rhinestone border for a container */
.glam-rhinestone-border {
  position: relative;
  border: 2px solid transparent;
  border-radius: 20px;
  background-clip: padding-box;
}

.glam-rhinestone-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 22px;
  background: linear-gradient(
    135deg,
    var(--glam-hot-pink),
    var(--glam-chrome),
    var(--glam-holo-violet),
    var(--glam-chrome),
    var(--glam-hot-pink)
  );
  background-size: 300% 300%;
  animation: holo-shift 6s ease-in-out infinite;
  z-index: -1;
}

Butterfly Motif Decoration

/* CSS butterfly using pseudo-elements -- decorative accent */
.glam-butterfly {
  position: relative;
  width: 30px;
  height: 24px;
  display: inline-block;
}

.glam-butterfly::before,
.glam-butterfly::after {
  content: '';
  position: absolute;
  top: 0;
  width: 14px;
  height: 20px;
  border-radius: 50% 50% 50% 0;
  background: linear-gradient(
    135deg,
    var(--glam-hot-pink),
    var(--glam-holo-violet),
    var(--glam-holo-cyan)
  );
  opacity: 0.7;
}

.glam-butterfly::before {
  left: 0;
  transform: rotate(-30deg);
  transform-origin: bottom right;
}

.glam-butterfly::after {
  right: 0;
  border-radius: 50% 50% 0 50%;
  transform: rotate(30deg);
  transform-origin: bottom left;
}

/* Animated wing flutter */
@keyframes flutter {
  0%, 100% { transform: rotate(-30deg) scaleX(1); }
  50% { transform: rotate(-30deg) scaleX(0.7); }
}

.glam-butterfly--animated::before {
  animation: flutter 2s ease-in-out infinite;
}

.glam-butterfly--animated::after {
  animation: flutter 2s ease-in-out infinite reverse;
}

Sparkle Particle Animation

/* Sparkle particle keyframes */
@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(180deg); }
}

/* Individual sparkle dot -- position with inline styles for variety */
.glam-sparkle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--glam-sparkle);
  border-radius: 50%;
  pointer-events: none;
  box-shadow:
    0 0 4px rgba(255, 250, 205, 0.8),
    0 0 8px rgba(255, 105, 180, 0.4);
  animation: sparkle 2s ease-in-out infinite;
}

/* Star-shaped sparkle variant using clip-path */
.glam-sparkle--star {
  width: 8px;
  height: 8px;
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%,
    79% 91%, 50% 70%, 21% 91%, 32% 57%,
    2% 35%, 39% 35%
  );
  background: white;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}

/* Container for sparkle field */
.glam-sparkle-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.glam-sparkle-field .glam-sparkle:nth-child(1) { top: 10%; left: 15%; animation-delay: 0s; }
.glam-sparkle-field .glam-sparkle:nth-child(2) { top: 25%; left: 75%; animation-delay: 0.5s; }
.glam-sparkle-field .glam-sparkle:nth-child(3) { top: 60%; left: 30%; animation-delay: 1.2s; }
.glam-sparkle-field .glam-sparkle:nth-child(4) { top: 45%; left: 85%; animation-delay: 0.8s; }
.glam-sparkle-field .glam-sparkle:nth-child(5) { top: 80%; left: 55%; animation-delay: 1.6s; }
.glam-sparkle-field .glam-sparkle:nth-child(6) { top: 15%; left: 50%; animation-delay: 0.3s; }

Design Do's and Don'ts

Do

  • Use chrome/metallic gradients on display typography for immediate glamour impact
  • Layer holographic color-shift effects at low opacity for iridescent shimmer
  • Apply hot pink as your primary accent against silver and dark purple surfaces
  • Include sparkle/rhinestone decorative elements as scattered ambient detail
  • Use frosted glass panels with pink-tinted blur for content containers
  • Pair high-contrast serif display fonts with soft, rounded sans-serif body text
  • Create depth through multiple translucent layers, glows, and reflections
  • Apply soft bloom/glow effects around key elements using box-shadow
  • Use butterfly and star motifs as recurring decorative icons and dividers
  • Animate holographic gradients slowly and subtly for living, breathing surfaces

Don't

  • Use flat, matte colors with no gradient or metallic treatment; everything should have some shine
  • Apply industrial, brutalist, or grunge typography that contradicts the glamour
  • Use sharp, angular, aggressive geometry; shapes should be rounded, soft, and luxurious
  • Overload the page with competing animation; sparkle effects should be ambient, not seizure-inducing
  • Use earthy, desaturated, or muddy color palettes; Y2K Glam demands saturation and brilliance
  • Mix in dark/dystopian cyberpunk elements; the mood is optimistic, celebratory, and aspirational
  • Set all text in decorative/script fonts; reserve these for accents and use readable sans-serif for body
  • Forget the chrome; even on warm/pink sections, metallic highlights should remain present
  • Create dense, cramped layouts; glamour requires breathing room and generous spacing
Aesthetic Relationship to Y2K Glam
Y2K Futurism Sister aesthetic; shares the chrome and millennium-era optimism, but Y2K Futurism is tech-focused while Y2K Glam is pop-culture and fashion-focused
Chromecore Overlapping subgenre; isolates the metallic/chrome elements that Y2K Glam shares but without the pink, sparkle, and celebrity excess
Coquette Shares hyper-feminine sensibility and pink palette; Coquette is softer, more Rococo-romantic, while Y2K Glam is bolder, more metallic, and pop-star-driven
FantasY2K Fantasy-inflected Y2K variant; shares the era and some visual motifs but leans into fairy/fantasy themes over glamour
Jiggy Era Shares the late-90s/early-2000s cultural moment; Jiggy Era focuses more on hip-hop and R&B visual culture while Y2K Glam centers pop and celebrity fashion
Mallsoft Both reference turn-of-millennium consumer culture; Mallsoft is nostalgic and ambient while Y2K Glam is aspirational and flashy
Dopamine Design Shares bold, bright, saturated color maximalism; Dopamine Design is color-diverse while Y2K Glam is specifically pink-chrome focused
Avant Basic Both draw from pop-culture trends and mainstream aesthetics; Avant Basic is more contemporary and ironic while Y2K Glam is era-specific
Glassmorphism Shares frosted-glass translucent panel effects; Glassmorphism is minimal and neutral while Y2K Glam layers it with metallic glamour

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>Y2K Glam</title>
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Quicksand:wght@300;400;500;700&family=Sacramento&family=Outfit:wght@300;400;600&display=swap" rel="stylesheet">
  <style>
    :root {
      --glam-chrome: #c0c0c8;
      --glam-chrome-light: #e8e8f0;
      --glam-chrome-bright: #f0f0f8;
      --glam-chrome-mid: #a0a0b0;
      --glam-hot-pink: #ff69b4;
      --glam-fuchsia: #ff1493;
      --glam-bubblegum: #ffb6d9;
      --glam-baby-pink: #ffc0cb;
      --glam-holo-violet: #c084fc;
      --glam-holo-cyan: #67e8f9;
      --glam-gold: #d4a843;
      --glam-ice-white: #f8f8ff;
      --glam-midnight: #1a1025;
      --glam-deep-purple: #2d1b4e;
      --glam-sparkle: #fffacd;
    }

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

    body {
      background: linear-gradient(180deg, #1a1025 0%, #120a1c 50%, #1a1025 100%);
      color: var(--glam-chrome-light);
      font-family: 'Quicksand', sans-serif;
      font-weight: 400;
      font-size: 1rem;
      line-height: 1.7;
      letter-spacing: 0.02em;
      min-height: 100vh;
      overflow-x: hidden;
    }

    h1, h2, h3 {
      font-family: 'Playfair Display', serif;
      font-weight: 700;
      color: var(--glam-ice-white);
    }

    /* Navigation */
    nav {
      background: rgba(26, 16, 37, 0.85);
      backdrop-filter: blur(20px) saturate(1.4);
      -webkit-backdrop-filter: blur(20px) saturate(1.4);
      border-bottom: 1px solid rgba(255, 105, 180, 0.12);
      padding: 1rem 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2.5rem;
      position: sticky;
      top: 0;
      z-index: 100;
    }

    nav::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 105, 180, 0.3) 20%,
        rgba(192, 132, 252, 0.3) 50%,
        rgba(103, 232, 249, 0.2) 80%,
        transparent
      );
    }

    nav a {
      color: var(--glam-chrome-light);
      font-family: 'Quicksand', sans-serif;
      font-size: 0.8rem;
      font-weight: 500;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      text-decoration: none;
      transition: color 0.3s ease, text-shadow 0.3s ease;
    }

    nav a:hover {
      color: var(--glam-hot-pink);
      text-shadow: 0 0 12px rgba(255, 105, 180, 0.4);
    }

    /* Hero */
    .hero {
      text-align: center;
      padding: 8rem 2rem 6rem;
      position: relative;
      overflow: hidden;
    }

    .hero::before {
      content: '';
      position: absolute;
      top: 15%;
      left: 50%;
      transform: translateX(-50%);
      width: 700px;
      height: 400px;
      background: radial-gradient(
        ellipse,
        rgba(255, 105, 180, 0.12) 0%,
        rgba(192, 132, 252, 0.06) 40%,
        transparent 70%
      );
      pointer-events: none;
    }

    .hero .script {
      font-family: 'Sacramento', cursive;
      font-size: 2rem;
      color: var(--glam-hot-pink);
      display: block;
      margin-bottom: 0.25rem;
      position: relative;
      z-index: 1;
    }

    .hero h1 {
      font-size: clamp(3rem, 9vw, 6rem);
      font-weight: 900;
      letter-spacing: 0.03em;
      line-height: 1.05;
      background: linear-gradient(
        180deg,
        #ffffff 0%,
        #ffc0cb 18%,
        #c0c0c8 40%,
        #808090 55%,
        #c0b0c8 72%,
        #ffffff 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      position: relative;
      z-index: 1;
    }

    .hero p {
      margin-top: 1.5rem;
      font-size: 1.05rem;
      color: var(--glam-bubblegum);
      max-width: 560px;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      z-index: 1;
    }

    /* Holographic divider */
    .divider {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin: 2.5rem auto;
      max-width: 250px;
      position: relative;
      z-index: 1;
    }

    .divider::before,
    .divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(to right, transparent, var(--glam-hot-pink), transparent);
    }

    .divider span {
      width: 6px;
      height: 6px;
      background: var(--glam-chrome-bright);
      border-radius: 50%;
      box-shadow:
        0 0 4px rgba(255, 255, 255, 0.6),
        0 0 8px rgba(255, 105, 180, 0.3);
    }

    /* Cards section */
    .content {
      max-width: 960px;
      margin: 0 auto;
      padding: 2rem 2rem 5rem;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 2rem;
    }

    .card {
      background: linear-gradient(
        160deg,
        rgba(45, 27, 78, 0.85) 0%,
        rgba(26, 16, 37, 0.92) 100%
      );
      border: 1px solid rgba(255, 105, 180, 0.15);
      border-radius: 20px;
      padding: 2rem;
      position: relative;
      overflow: hidden;
      box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(255, 105, 180, 0.05);
      transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
    }

    .card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 15%;
      right: 15%;
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 105, 180, 0.5),
        rgba(192, 132, 252, 0.4),
        transparent
      );
    }

    /* Holographic shimmer overlay */
    .card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        135deg,
        rgba(255, 105, 180, 0.04) 0%,
        rgba(103, 232, 249, 0.03) 33%,
        rgba(192, 132, 252, 0.04) 66%,
        rgba(255, 182, 217, 0.03) 100%
      );
      background-size: 200% 200%;
      animation: holo-shift 8s ease-in-out infinite;
      pointer-events: none;
    }

    .card:hover {
      border-color: rgba(255, 105, 180, 0.35);
      box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(255, 105, 180, 0.1);
      transform: translateY(-4px);
    }

    .card h2 {
      font-size: 1.4rem;
      margin-bottom: 0.75rem;
      position: relative;
      z-index: 1;
    }

    .card p {
      color: var(--glam-chrome);
      position: relative;
      z-index: 1;
    }

    .card .tag {
      display: inline-block;
      margin-top: 1rem;
      font-family: 'Outfit', sans-serif;
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--glam-hot-pink);
      border: 1px solid rgba(255, 105, 180, 0.3);
      border-radius: 100px;
      padding: 0.3rem 1rem;
      position: relative;
      z-index: 1;
    }

    @keyframes holo-shift {
      0% { background-position: 0% 50%; }
      25% { background-position: 100% 0%; }
      50% { background-position: 100% 100%; }
      75% { background-position: 0% 100%; }
      100% { background-position: 0% 50%; }
    }

    /* CTA Button */
    .cta {
      text-align: center;
      padding: 2rem 2rem 6rem;
    }

    .button {
      display: inline-block;
      padding: 0.85rem 3rem;
      border-radius: 100px;
      border: 1px solid rgba(255, 105, 180, 0.5);
      background: linear-gradient(
        180deg,
        #ff85a2 0%,
        #ff69b4 40%,
        #e0559a 100%
      );
      color: #ffffff;
      font-family: 'Quicksand', sans-serif;
      font-size: 0.85rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      text-decoration: none;
      cursor: pointer;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 4px 20px rgba(255, 20, 147, 0.35);
      transition: all 0.3s ease;
    }

    .button:hover {
      background: linear-gradient(180deg, #ff99b8 0%, #ff7bc4 40%, #ff69b4 100%);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 6px 28px rgba(255, 20, 147, 0.5);
      transform: translateY(-2px);
    }

    .button--chrome {
      border: 1px solid var(--glam-chrome-mid);
      background: linear-gradient(
        180deg,
        #e0e0e8 0%,
        #c0c0c8 35%,
        #a0a0b0 65%,
        #c0c0c8 100%
      );
      color: var(--glam-midnight);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .button--chrome:hover {
      background: linear-gradient(180deg, #f0f0f8 0%, #d0d0d8 35%, #b0b0b8 65%, #d0d0d8 100%);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 4px 16px rgba(255, 105, 180, 0.2);
    }

    /* Sparkle particles */
    @keyframes sparkle {
      0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
      50% { opacity: 1; transform: scale(1) rotate(180deg); }
    }

    .sparkle-field {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
    }

    .sparkle-field i {
      position: absolute;
      width: 3px;
      height: 3px;
      background: var(--glam-sparkle);
      border-radius: 50%;
      box-shadow: 0 0 4px rgba(255, 250, 205, 0.6), 0 0 8px rgba(255, 105, 180, 0.3);
      animation: sparkle 3s ease-in-out infinite;
    }

    .sparkle-field i:nth-child(1) { top: 8%; left: 12%; animation-delay: 0s; }
    .sparkle-field i:nth-child(2) { top: 22%; left: 78%; animation-delay: 0.7s; }
    .sparkle-field i:nth-child(3) { top: 55%; left: 25%; animation-delay: 1.4s; }
    .sparkle-field i:nth-child(4) { top: 38%; left: 90%; animation-delay: 0.3s; }
    .sparkle-field i:nth-child(5) { top: 72%; left: 60%; animation-delay: 2.1s; }
    .sparkle-field i:nth-child(6) { top: 85%; left: 18%; animation-delay: 1.0s; }
    .sparkle-field i:nth-child(7) { top: 15%; left: 45%; animation-delay: 1.8s; }
    .sparkle-field i:nth-child(8) { top: 65%; left: 82%; animation-delay: 0.5s; }

    /* Footer */
    footer {
      text-align: center;
      padding: 2rem;
      font-family: 'Outfit', sans-serif;
      font-size: 0.75rem;
      letter-spacing: 0.1em;
      color: var(--glam-chrome-mid);
      border-top: 1px solid rgba(255, 105, 180, 0.08);
    }

    footer span {
      color: var(--glam-hot-pink);
    }
  </style>
</head>
<body>
  <!-- Ambient sparkle particles -->
  <div class="sparkle-field">
    <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
  </div>

  <!-- Navigation -->
  <nav>
    <a href="#">Glam</a>
    <a href="#">Collection</a>
    <a href="#">Lookbook</a>
    <a href="#">About</a>
  </nav>

  <!-- Hero -->
  <header class="hero">
    <span class="script">welcome to the</span>
    <h1>Y2K Glam Era</h1>
    <div class="divider">
      <span></span><span></span><span></span>
    </div>
    <p>Chrome surfaces, holographic shimmer, rhinestone sparkle,
       and the unapologetic glamour of the millennium turn.</p>
  </header>

  <!-- Cards -->
  <section class="content">
    <div class="card">
      <h2>Chrome & Silver</h2>
      <p>Polished metallic surfaces reflect the future.
         Every element shimmers with chrome gradients
         and liquid-mercury highlights.</p>
      <span class="tag">Metallic</span>
    </div>
    <div class="card">
      <h2>Holographic Shift</h2>
      <p>Iridescent color-shift overlays create prismatic
         rainbow effects across surfaces, capturing light
         like holographic trading cards.</p>
      <span class="tag">Iridescent</span>
    </div>
    <div class="card">
      <h2>Rhinestone Sparkle</h2>
      <p>Scattered glitter and gem-like accents bedazzle
         every detail, from dividers to borders, with
         the brilliance of a thousand crystals.</p>
      <span class="tag">Sparkle</span>
    </div>
  </section>

  <!-- CTA -->
  <div class="cta">
    <a href="#" class="button">Enter the Glam Era</a>
    &nbsp;&nbsp;
    <a href="#" class="button button--chrome">Chrome Collection</a>
  </div>

  <!-- Footer -->
  <footer>
    <p>Designed with <span>&hearts;</span> in the spirit of Y2K Glam</p>
  </footer>
</body>
</html>
← Retour aux designs
Agence WagnerAgence Wagner

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

Designs issus de chrislemke/website_designs, sous licence MIT.