Agence WagnerAgence Wagner
FRENDEELS
Retour aux designs
NéonColoréLudiqueMaximaliste
Aperçu

Neon Ooze

An aesthetic rooted in 1980s--90s children's gross-out marketing culture, defined by dripping slime, toxic waste imagery, radioactive glow, lurid neon colors, and gleefully disgusting motifs. Neon Ooze channels the visual language of Nickelodeon slime dumps, B-movie toxic mutants, mad-scientist laboratories, and creepy-crawly creature features into a hyper-saturated, deliberately provocative design style. The mood is playfully menacing -- gross enough to thrill kids, bright enough to sell toys, and just unsettling enough to hint at genuine environmental anxiety about nuclear waste and pollution.

Color Palette

Core Principle

Neon Ooze uses toxic neon colors at maximum saturation against dark, murky backgrounds. The palette simulates the glow of radioactive substances in a dark laboratory or sewer. Colors should look like they emit light -- luminous, almost painful to look at, and distinctly unnatural.

Primary Scheme

Role Colors
Backgrounds Deep black, dark sewer greens, murky purple-black
Primary accent Toxic / slime green (the signature color)
Secondary accents Electric purple, neon blue
Tertiary / highlights Hot pink / magenta, hazard yellow-orange

Full Palette

Color Hex (suggested) Usage
Slime Green #39FF14, #00FF41 Primary accent, slime effects, glowing elements, headings
Toxic Yellow-Green #CCFF00, #B8FF00 Secondary green, radioactive glow, highlights
Electric Purple #BF00FF, #9B30FF Accent panels, borders, secondary headings
Deep Purple #4B0082, #3A0066 Dark accent backgrounds, gradient endpoints
Neon Blue #00BFFF, #00E5FF Tertiary accent, cool glow effects, links
Hot Pink / Magenta #FF00FF, #FF1493 Display text, call-to-action elements, decorative splats
Hazard Orange #FF6600, #FF4500 Warning elements, tertiary accents, small highlights
Sewer Black #0A0A0A, #0D1117 Primary background
Murky Green-Black #0B1A0B, #0F1F0F Alternative dark background with green undertone
Toxic Sludge Brown #2D1F0E, #3B2F1B Accent background suggesting contaminated earth
Biohazard Yellow #FFD700, #FFC200 Hazard symbols, small warning details
Bone White #E8E8D0, #D4D4AA Body text (slightly yellowed, never pure white)

Suggested CSS Custom Properties

:root {
  /* Backgrounds */
  --ooze-black: #0a0a0a;
  --ooze-dark-green: #0b1a0b;
  --ooze-deep-purple: #1a0033;
  --ooze-sludge: #2d1f0e;

  /* Neon accents */
  --ooze-slime: #39ff14;
  --ooze-slime-bright: #00ff41;
  --ooze-toxic-yellow: #ccff00;
  --ooze-purple: #bf00ff;
  --ooze-blue: #00bfff;
  --ooze-pink: #ff00ff;
  --ooze-orange: #ff6600;
  --ooze-hazard-yellow: #ffd700;

  /* Text */
  --ooze-text: #e8e8d0;
  --ooze-text-dim: #9a9a7a;

  /* Functional */
  --ooze-bg-primary: var(--ooze-black);
  --ooze-bg-secondary: var(--ooze-dark-green);
  --ooze-accent-primary: var(--ooze-slime);
  --ooze-accent-secondary: var(--ooze-purple);
  --ooze-border: var(--ooze-slime);
}

Color Usage Principles

  • Dark, cold base with neon overlays -- near-black backgrounds so neon colors appear to glow through contrast
  • Green dominates -- slime green is the signature color and should be the most prominent accent
  • Purple and blue as supporting neons -- used for variety but never overwhelming the green
  • Hot pink / magenta for typography -- especially display text and logos, as seen in classic Nickelodeon and toy branding
  • Avoid pastels, earth tones, or muted colors -- everything should feel radioactive and oversaturated
  • Hazard yellow sparingly -- used for biohazard/warning symbols and small detail elements

Typography

Typeface Characteristics

Neon Ooze typography is chunky, exaggerated, distorted, and dripping. Letters should look like they are melting, oozing, or mutating. The style draws from 1990s toy packaging, VHS horror covers, and Nickelodeon show titles.

  • Thick, heavy letterforms -- bold or black weights, wide proportions
  • Irregular baselines -- letters wobble, tilt, and bounce unevenly
  • Dripping / melting effects -- descenders and terminals that trail off into gooey drips
  • 3D extrusion and drop shadows -- chunky depth suggesting slimy physical mass
  • Outline and stroke treatments -- bright outlines around dark fills, or neon fills with dark outlines
  • All-caps dominant -- loud, aggressive, attention-grabbing
  • Rounded and bubbly forms -- letters that look inflated, bloated, or swollen

Recommended Web Fonts (Google Fonts / Free)

Font Style Usage
Bungee Shade Chunky layered display Hero headings, titles
Creepster Horror-tinged display Section headings, spooky emphasis
Fredoka One Rounded bold display Friendly-grotesque headings
Bangers Comic book display Subheadings, callouts
Permanent Marker Hand-drawn marker Accent text, labels
Rubik Mono One Heavy monospace display Technical / lab-style headings
Nunito Rounded sans-serif Body text (readable but soft)
Exo 2 Geometric sans-serif Body text alternative, UI elements

Typography CSS Example

@import url('https://fonts.googleapis.com/css2?family=Bungee+Shade&family=Creepster&family=Bangers&family=Nunito:wght@400;700&display=swap');

/* Display / Hero headings */
h1 {
  font-family: 'Bungee Shade', 'Creepster', cursive;
  font-size: clamp(3rem, 8vw, 7rem);
  text-transform: uppercase;
  color: var(--ooze-slime);
  text-shadow:
    0 0 10px var(--ooze-slime),
    0 0 20px var(--ooze-slime),
    0 0 40px rgba(57, 255, 20, 0.5),
    4px 4px 0 var(--ooze-deep-purple);
  letter-spacing: 0.05em;
  line-height: 1.1;
}

/* Section headings */
h2, h3 {
  font-family: 'Creepster', 'Bangers', cursive;
  text-transform: uppercase;
  color: var(--ooze-pink);
  text-shadow:
    0 0 7px var(--ooze-pink),
    0 0 15px rgba(255, 0, 255, 0.4),
    3px 3px 0 rgba(0, 0, 0, 0.8);
  letter-spacing: 0.04em;
}

/* Body text */
body {
  font-family: 'Nunito', 'Exo 2', sans-serif;
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ooze-text);
  letter-spacing: 0.01em;
}

/* Accent text / callouts */
.ooze-callout {
  font-family: 'Bangers', cursive;
  font-size: 1.4em;
  color: var(--ooze-toxic-yellow);
  text-shadow: 0 0 8px rgba(204, 255, 0, 0.6);
  text-transform: uppercase;
}

Key Design Elements and Motifs

Slime and Ooze Effects

The defining visual element. Dripping, splattered, and flowing slime should appear on borders, headers, dividers, and decorative elements.

  • Drip borders -- top or bottom edges of containers that appear to ooze downward
  • Splat shapes -- irregular blob shapes as decorative backgrounds or image masks
  • Slime trails -- thin rivulets connecting elements or following scroll direction
  • Bubble clusters -- small circular shapes suggesting gas bubbles in viscous liquid

Toxic / Nuclear Imagery

  • Biohazard symbols (Unicode: \2622) -- used as decorative accents and dividers
  • Radioactive trefoil (Unicode: \2622) -- section markers and icons
  • Warning stripes -- black and hazard-yellow diagonal stripes for borders and accents
  • Barrels and drums -- implied through cylindrical shapes and hazard markings
  • Glowing containers -- elements that appear to hold luminous liquid

Mad Science / Laboratory

  • Test tubes and beakers -- as decorative icons or section markers
  • Bubbling liquid -- animated bubble effects rising through containers
  • Electrical arcs -- jagged lightning-bolt shapes connecting elements
  • Circuit and pipe patterns -- suggesting laboratory plumbing and wiring

Creepy Crawlies

  • Insects -- flies, spiders, cockroaches as small decorative details
  • Eyeballs -- floating, bulging eyes as icons or bullet points
  • Tentacles -- curving organic shapes used as borders or frames
  • Worms and maggots -- squirming shapes in backgrounds or dividers

Design Principles

  • Deliberate grossness -- the design should provoke a visceral "ewww" reaction while remaining fun
  • Aggressive energy -- nothing should feel calm, sterile, or refined
  • Playful menace -- threatening enough to be exciting, bright enough to be entertaining
  • Maximum contrast -- neon on black, always pushing toward the limits of readability
  • Organic chaos over geometric order -- blobs, splats, and drips instead of straight lines and grids

Layout Principles

Structure

  • Dark, immersive backgrounds -- the page should feel like peering into a murky sewer or abandoned laboratory
  • Asymmetric, irregular compositions -- avoid rigid grids; use off-kilter placement suggesting things that have oozed into position
  • Generous use of neon borders and dividers -- glowing lines that separate content areas
  • Layered depth -- overlapping drip effects, splat shapes, and glow layers creating visual richness
  • Contained chaos -- within each section, allow messy organic shapes, but maintain overall navigability

Section Organization

  • Use slime-drip dividers between sections (SVG drip shapes along horizontal rules)
  • Apply neon glow borders around content panels
  • Create hierarchy through color temperature -- slime green for primary, pink/purple for secondary, blue for tertiary
  • Employ splat-shaped containers for featured content (irregular blob outlines instead of rectangles)
  • Allow elements to break out of their containers -- drips that extend beyond borders, splats that overlap sections

CSS / Design Techniques

Neon Glow Effects

/* Primary slime glow for text */
.ooze-glow {
  color: var(--ooze-slime);
  text-shadow:
    0 0 7px var(--ooze-slime),
    0 0 10px var(--ooze-slime),
    0 0 21px var(--ooze-slime),
    0 0 42px rgba(57, 255, 20, 0.5),
    0 0 82px rgba(57, 255, 20, 0.3);
}

/* Purple neon glow */
.ooze-glow-purple {
  color: var(--ooze-purple);
  text-shadow:
    0 0 7px var(--ooze-purple),
    0 0 10px var(--ooze-purple),
    0 0 21px var(--ooze-purple),
    0 0 42px rgba(191, 0, 255, 0.4);
}

/* Glowing box border */
.ooze-box-glow {
  border: 2px solid var(--ooze-slime);
  box-shadow:
    0 0 5px var(--ooze-slime),
    0 0 15px rgba(57, 255, 20, 0.3),
    inset 0 0 15px rgba(57, 255, 20, 0.05);
}

Slime Drip Border (SVG-based)

/* Dripping slime effect along a container's bottom edge */
.ooze-drip-bottom {
  position: relative;
  overflow: visible;
}

.ooze-drip-bottom::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 0;
  right: 0;
  height: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 30' preserveAspectRatio='none'%3E%3Cpath d='M0,0 Q10,0 10,8 Q10,20 15,25 Q18,28 20,20 Q22,8 25,0 Q40,0 45,0 Q45,10 50,18 Q53,22 55,15 Q57,5 60,0 Q80,0 85,0 Q85,12 90,22 Q92,26 95,18 Q98,8 100,0 Q120,0 125,0 Q125,6 128,12 Q130,16 132,10 Q135,4 138,0 Q155,0 160,0 Q160,14 165,24 Q168,30 172,20 Q175,10 178,0 L200,0' fill='%2339ff14' /%3E%3C/svg%3E") repeat-x;
  background-size: 200px 30px;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(57, 255, 20, 0.6));
}

Toxic Bubble Animation

@keyframes bubble-rise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.7;
  }
  50% {
    transform: translateY(-40px) scale(1.1);
    opacity: 0.5;
  }
  100% {
    transform: translateY(-80px) scale(0.8);
    opacity: 0;
  }
}

.ooze-bubbles::before,
.ooze-bubbles::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,
    rgba(57, 255, 20, 0.4),
    rgba(57, 255, 20, 0.1));
  animation: bubble-rise 3s ease-in-out infinite;
}

.ooze-bubbles::before {
  width: 12px;
  height: 12px;
  bottom: 10%;
  left: 20%;
}

.ooze-bubbles::after {
  width: 8px;
  height: 8px;
  bottom: 15%;
  left: 35%;
  animation-delay: 1.5s;
}

Radioactive Pulsing Glow

@keyframes radioactive-pulse {
  0%, 100% {
    box-shadow:
      0 0 5px var(--ooze-slime),
      0 0 15px rgba(57, 255, 20, 0.3);
  }
  50% {
    box-shadow:
      0 0 10px var(--ooze-slime),
      0 0 30px rgba(57, 255, 20, 0.5),
      0 0 50px rgba(57, 255, 20, 0.2);
  }
}

.ooze-pulse {
  animation: radioactive-pulse 2s ease-in-out infinite;
}

Hazard Stripe Border

/* Black and yellow diagonal warning stripes */
.ooze-hazard-border {
  border: 4px solid transparent;
  border-image: repeating-linear-gradient(
    -45deg,
    #000 0px,
    #000 8px,
    var(--ooze-hazard-yellow) 8px,
    var(--ooze-hazard-yellow) 16px
  ) 4;
}

Slime Splat Background Shape

/* Irregular blob shape for featured content */
.ooze-splat {
  background: radial-gradient(
    ellipse at 40% 50%,
    rgba(57, 255, 20, 0.12) 0%,
    rgba(57, 255, 20, 0.04) 50%,
    transparent 70%
  );
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
  padding: 3rem;
}

Ooze Card / Panel

.ooze-card {
  background: linear-gradient(
    170deg,
    rgba(11, 26, 11, 0.9) 0%,
    rgba(10, 10, 10, 0.95) 100%
  );
  border: 2px solid var(--ooze-slime);
  border-radius: 4px;
  padding: 2rem;
  position: relative;
  box-shadow:
    0 0 8px rgba(57, 255, 20, 0.2),
    inset 0 0 30px rgba(57, 255, 20, 0.03);
}

.ooze-card::before {
  content: '\2622'; /* biohazard symbol */
  position: absolute;
  top: -12px;
  right: 16px;
  font-size: 1.4rem;
  color: var(--ooze-hazard-yellow);
  background: var(--ooze-black);
  padding: 0 0.4em;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

Sewer / Laboratory Background Textures

/* Dark background with subtle green noise */
.ooze-bg-sewer {
  background-color: var(--ooze-black);
  background-image:
    radial-gradient(ellipse at 20% 80%, rgba(57, 255, 20, 0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(191, 0, 255, 0.02) 0%, transparent 50%);
}

/* Vignette overlay for dark tunnel / sewer feel */
.ooze-vignette::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 30%,
    rgba(0, 0, 0, 0.6) 100%
  );
  pointer-events: none;
}

/* Subtle grid pattern suggesting laboratory tiles */
.ooze-lab-grid {
  background-image:
    linear-gradient(rgba(57, 255, 20, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57, 255, 20, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}

Slime Drip Divider

.ooze-divider {
  height: 0;
  border: none;
  border-top: 2px solid var(--ooze-slime);
  margin: 3rem auto;
  width: 70%;
  position: relative;
  filter: drop-shadow(0 0 4px rgba(57, 255, 20, 0.5));
}

.ooze-divider::before {
  content: '\2622'; /* biohazard */
  position: absolute;
  top: -0.7em;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ooze-black);
  padding: 0 0.6em;
  color: var(--ooze-slime);
  font-size: 1.2rem;
  text-shadow: 0 0 8px rgba(57, 255, 20, 0.6);
}

CSS Techniques Summary

Technique CSS Property / Approach
Neon glow text Multiple text-shadow layers with same-hue colors at increasing blur
Glowing borders box-shadow with neon colors + border in matching hue
Slime drips SVG path with irregular curves as background-image or ::after pseudo-element
Radioactive pulse @keyframes animating box-shadow spread and opacity
Hazard stripes repeating-linear-gradient(-45deg, ...) as border-image
Splat shapes Irregular border-radius values (e.g., 60% 40% 55% 45% / 50% 60% 40% 50%)
Sewer atmosphere Radial gradients with very low-opacity greens and purples on black
Bubble effects @keyframes with translateY and opacity on ::before/::after circles
Lab tile grid linear-gradient grid pattern at low opacity
Vignette radial-gradient from transparent center to dark edges via ::after overlay
Toxic glow containers inset box-shadow with green tint + solid neon border

Animation and Motion

  • Dripping motion -- slow, viscous downward movement on drip elements using translateY with ease-in timing
  • Bubbling -- small circles rising and fading, staggered with animation-delay
  • Pulsing glow -- rhythmic brightening and dimming of neon borders and text shadows simulating radioactive energy
  • Splattering -- on hover or click, elements can "splat" outward with a scale + irregular border-radius transition
  • Flickering -- occasional rapid opacity flicker on neon elements suggesting unstable electrical power
  • Oozing text reveal -- text that appears to drip into place from above using clip-path animation
/* Flickering neon effect */
@keyframes neon-flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow:
      0 0 7px var(--ooze-slime),
      0 0 10px var(--ooze-slime),
      0 0 21px var(--ooze-slime);
  }
  20%, 24%, 55% {
    text-shadow: none;
  }
}

.ooze-flicker {
  animation: neon-flicker 4s infinite;
}

Materials and Textures (Visual Metaphors for Web)

Physical Material Web Equivalent
Green slime / ooze Semi-transparent green gradients with irregular edges, border-radius blobs
Toxic waste barrels Cylindrical shapes with hazard-stripe borders and yellow warning text
Sewer walls / pipes Dark textured backgrounds with subtle green-tinted grid patterns
Glowing radioactive liquid radial-gradient with neon green center fading to dark, animated pulse
Rubber / latex (lab gloves) Glossy solid-color surfaces with specular highlight gradients
Corroded metal Dark metallic gradients with green oxidation patches (green-tinted noise)
Laboratory glass (beakers) Semi-transparent panels with green or purple tint and subtle refraction effect
VHS packaging / 90s plastic High-contrast neon-on-black with chunky type and splatter elements
Nickelodeon slime Bright green with yellow-green highlights and drip morphology
Bug carapace / insect wings Iridescent purple-green gradients with high gloss

Cultural References and Exemplars

The visual identity draws from:

  • Nickelodeon (1990s era) -- green slime, bright orange-and-green branding, chaotic kid energy
  • Goosebumps book covers -- dripping typography, lurid greens and purples, creepy-fun horror
  • EarthBound (1995) -- green slime splatter graphic design on Nintendo marketing
  • Toxic Avenger / Troma Films -- low-budget horror with neon-toxic color grading
  • Creepy Crawlers oven toys -- gooey, brightly colored mold-making aesthetic
  • Captain Planet villains -- toxic waste, pollution, radioactive sludge as visual motifs
  • Boogerman (1994) -- gross-out video game with slime, snot, and neon palette
  • Trash Pack / Garbage Pail Kids -- grotesque character design in neon packaging
  • 90s skateboard graphics (Slime Balls brand) -- dripping slime logos on neon backgrounds
Aesthetic Relationship to Neon Ooze
Slimepunk Closely related; emphasizes toxic/radioactive imagery with punk-adjacent DIY attitude
Wacky Pomo Shares 90s kid-culture roots, bright neons, blob shapes, and anti-refined sensibility
Acid Design Parallel neon-on-black palette but more rave/club culture vs. kid/gross-out culture
Psychedelia Shared interest in lurid color and visual distortion, but different cultural origin
Kidcore Overlapping era and child-targeting aesthetic, but Kidcore is wholesome where Neon Ooze is gross
Y2K Futurism Shares neon palette and 90s nostalgia, but cleaner and more tech-optimistic
Goblincore Shared love of the grotesque and creepy-crawly, but Goblincore is earthy/natural vs. neon/synthetic
← Retour aux designs
Agence WagnerAgence Wagner

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

Designs issus de chrislemke/website_designs, sous licence MIT.