UI Style Playground - 22 Design Aesthetics

Claymorphism

Soft, clay-like 3D effect with smooth gradients and organic shadows.

Trending Modern

Popularity 95%

claymorphism.css

.clay-card {
  background: linear-gradient(145deg, #e8d5f2, #f5e6ff);
  border-radius: 30px;
  box-shadow: 20px 20px 40px #c9b3d9, 
              -20px -20px 40px #ffffff;
  padding: 25px;
}

.clay-button {
  background: linear-gradient(145deg, #d4a5f5, #b085d5);
  color: #fff;
  box-shadow: 8px 8px 16px #c093e3, 
              -8px -8px 16px #e8b7ff;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
}

.clay-button:active {
  box-shadow: inset 6px 6px 12px #c093e3, 
              inset -6px -6px 12px #e8b7ff;
}

Neumorphism

Soft UI with subtle shadows creating pressed/raised effects.

Classic Elegant

Popularity 88%

neumorphism.css

.neuro-card {
  background: #e0e5ec;
  box-shadow: 12px 12px 24px #a3b1c6, 
              -12px -12px 24px #ffffff;
  border-radius: 12px;
  padding: 25px;
}

.neuro-button {
  background: #e0e5ec;
  color: #2d3748;
  box-shadow: 6px 6px 12px #a3b1c6, 
              -6px -6px 12px #ffffff;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
}

.neuro-button:active {
  box-shadow: inset 4px 4px 8px #a3b1c6, 
              inset -4px -4px 8px #ffffff;
}

Glassmorphism

Frosted glass effect with transparency and blur backdrop.

Premium Apple-like

Popularity 92%

glassmorphism.css

.glass-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 25px;
}

.glass-button {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  border-radius: 8px;
  padding: 12px 24px;
}

.glass-button:active {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(0.98);
}

Skeuomorphism

Real-world textures and materials in digital design.

Realistic Classic

Popularity 75%

skeuomorphism.css

.skeuo-card {
  background: linear-gradient(145deg, #8b7355, #6d5940);
  border-radius: 16px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3), 
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
  border: 1px solid #5a4630;
  padding: 25px;
}

.skeuo-button {
  background: linear-gradient(145deg, #c9a876, #a08968);
  color: #3a2f20;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
}

.skeuo-button:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
  transform: translateY(1px);
}

Flat Design

Simple, clean interface with no shadows or gradients.

Minimal 2013

Popularity 85%

flat.css

.flat-card {
  background: #3498db;
  border-radius: 0;
  padding: 25px;
  color: #fff;
}

.flat-button {
  background: #e74c3c;
  color: #fff;
  border: none;
  border-radius: 0;
  padding: 12px 24px;
  font-weight: 600;
}

.flat-button:active {
  background: #c0392b;
}

.flat-badge {
  background: #2980b9;
  color: #fff;
  border-radius: 20px;
  padding: 6px 14px;
}

Semi-Flat

Flat design enhanced with subtle shadows and depth.

Balanced Modern

Popularity 90%

semiflat.css

.semiflat-card {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 25px;
}

.semiflat-button {
  background: #2ecc71;
  color: #fff;
  box-shadow: 0 2px 4px rgba(46, 204, 113, 0.3);
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
}

.semiflat-button:active {
  background: #27ae60;
  box-shadow: 0 1px 2px rgba(46, 204, 113, 0.2);
  transform: translateY(1px);
}

Material Design

Google's design language with elevation and motion.

Google Depth

Popularity 93%

material.css

.material-card {
  background: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 
              0 1px 3px rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  padding: 25px;
  transition: box-shadow 0.3s;
}

.material-card:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15), 
              0 3px 6px rgba(0, 0, 0, 0.1);
}

.material-button {
  background: #ff5722;
  color: #fff;
  box-shadow: 0 2px 5px rgba(255, 87, 34, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none;
  border-radius: 4px;
  padding: 12px 24px;
}

Neo-Brutalism

Bold, loud, raw design with thick borders and high contrast.

Bold 2024

Popularity 87%

neobrutalism.css

.neobrutalism-card {
  background: #ffd700;
  border: 4px solid #000;
  border-radius: 0;
  box-shadow: 8px 8px 0 #000;
  transform: rotate(-1deg);
  padding: 25px;
}

.neobrutalism-button {
  background: #ff4500;
  color: #fff;
  border: 4px solid #000;
  box-shadow: 4px 4px 0 #000;
  font-weight: 900;
  text-transform: uppercase;
  border-radius: 0;
  padding: 12px 24px;
}

.neobrutalism-button:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #000;
}

Soft Brutalism

Brutalist aesthetics with softer colors and rounded edges.

Friendly 2024

Popularity 82%

softbrutalism.css

.softbrutalism-card {
  background: #ffeaa7;
  border: 3px solid #2d3436;
  border-radius: 12px;
  box-shadow: 6px 6px 0 rgba(45, 52, 54, 0.3);
  padding: 25px;
}

.softbrutalism-button {
  background: #00b894;
  color: #fff;
  border: 3px solid #2d3436;
  box-shadow: 4px 4px 0 rgba(45, 52, 54, 0.3);
  font-weight: 700;
  border-radius: 8px;
  padding: 12px 24px;
}

.softbrutalism-button:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 rgba(45, 52, 54, 0.3);
}

Aurora UI

Vibrant gradients with animated shimmer effects.

Vibrant Animated

Popularity 91%

aurora.css

.aurora-card {
  background: linear-gradient(135deg, 
              #667eea 0%, #764ba2 50%, #f093fb 100%);
  border-radius: 20px;
  padding: 25px;
  position: relative;
  overflow: hidden;
}

.aurora-card::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: linear-gradient(45deg, transparent, 
              rgba(255, 255, 255, 0.1), transparent);
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

Neon Glow

Dark background with glowing neon borders and text.

Futuristic Dark

Popularity 84%

neon.css

.neon-card {
  background: #0a0a0a;
  border: 2px solid #00ffff;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.5), 
              inset 0 0 20px rgba(0, 255, 255, 0.1);
  padding: 25px;
}

.neon-title {
  color: #00ffff;
  text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff;
  font-weight: 700;
}

.neon-button {
  background: transparent;
  color: #00ffff;
  border: 2px solid #00ffff;
  box-shadow: 0 0 15px #00ffff;
  text-shadow: 0 0 8px #00ffff;
  border-radius: 8px;
  padding: 12px 24px;
}

Editorial

Typography-first design inspired by print magazines and newspapers.

Classic Type-heavy

Popularity 78%

editorial.css

.editorial-card {
  background: #fff;
  border-radius: 0;
  border-left: 8px solid #000;
  padding: 25px;
}

.editorial-title {
  color: #000;
  font-size: 2.2em;
  font-weight: 900;
  line-height: 1.1;
  font-family: Georgia, serif;
}

.editorial-text {
  color: #333;
  font-size: 1.05em;
  line-height: 1.7;
  font-family: Georgia, serif;
}

.editorial-button {
  background: #000;
  color: #fff;
  font-family: Georgia, serif;
  border: none;
  border-radius: 0;
  padding: 12px 24px;
}

Maximalism

More is more! Bright colors, patterns, and visual abundance.

Explosive Bold

Popularity 79%

maximalism.css

.maximalism-card {
  background: linear-gradient(45deg, 
              #ff006e, #ffbe0b, #8338ec, #3a86ff);
  background-size: 400% 400%;
  animation: maxGradient 5s ease infinite;
  border: 5px solid;
  border-image: linear-gradient(45deg, 
              #fb5607, #ff006e, #8338ec, #3a86ff) 1;
  border-radius: 15px;
  padding: 25px;
}

@keyframes maxGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.maximalism-button {
  background: linear-gradient(135deg, #ff006e, #8338ec);
  color: #fff;
  font-weight: 900;
  border: 3px solid #fff;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
}

Cyberpunk HUD

Futuristic interface with neon accents and terminal aesthetics.

Sci-Fi Tech

Popularity 86%

cyberpunk.css

.cyberpunk-card {
  background: rgba(0, 20, 40, 0.9);
  border: 2px solid #00d9ff;
  border-radius: 0;
  box-shadow: 0 0 30px rgba(0, 217, 255, 0.3);
  clip-path: polygon(0 0, 95% 0, 100% 10%, 
              100% 100%, 5% 100%, 0 90%);
  padding: 25px;
}

.cyberpunk-title {
  color: #00d9ff;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  text-shadow: 0 0 10px #00d9ff;
  font-weight: 900;
}

.cyberpunk-button {
  background: transparent;
  color: #00d9ff;
  border: 2px solid #00d9ff;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  box-shadow: 0 0 10px #00d9ff;
}

Retro Pixel

8-bit and 16-bit inspired design with pixelated graphics.

Nostalgia Gaming

Popularity 80%

retro.css

.retro-card {
  background: #8b4513;
  border: 4px solid #000;
  border-radius: 0;
  box-shadow: 4px 4px 0 #000;
  image-rendering: pixelated;
  padding: 25px;
}

.retro-title {
  color: #ffeb3b;
  font-family: 'Courier New', monospace;
  text-shadow: 2px 2px 0 #000;
  font-weight: 900;
}

.retro-button {
  background: #f44336;
  color: #fff;
  border: 3px solid #000;
  font-family: 'Courier New', monospace;
  box-shadow: 3px 3px 0 #000;
  font-weight: 900;
  border-radius: 0;
  padding: 12px 24px;
}

Y2K Aesthetic

Early 2000s style with glossy effects and soft blue gradients.

Nostalgic Glossy

Popularity 88%

y2k.css

.y2k-card {
  background: linear-gradient(135deg, 
              #cfe9ff 0%, #e0f7fa 100%);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 150, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.8);
  padding: 25px;
}

.y2k-button {
  background: linear-gradient(135deg, #29b6f6, #039be5);
  color: #fff;
  box-shadow: 0 4px 12px rgba(3, 155, 229, 0.3);
  font-weight: 700;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
}

.y2k-button:active {
  transform: scale(0.97);
  box-shadow: 0 2px 6px rgba(3, 155, 229, 0.3);
}

Memphis

1980s postmodern style with geometric patterns and bold colors.

Retro 1980s

Popularity 76%

memphis.css

.memphis-card {
  background: #fff;
  border: 4px solid #000;
  border-radius: 0;
  padding: 25px;
  position: relative;
}

.memphis-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image:
    repeating-linear-gradient(45deg, transparent, 
      transparent 10px, #ffeb3b 10px, #ffeb3b 20px),
    repeating-linear-gradient(-45deg, transparent, 
      transparent 10px, #ff5722 10px, #ff5722 20px);
  opacity: 0.1;
  pointer-events: none;
}

.memphis-button {
  background: #ffeb3b;
  color: #000;
  border: 4px solid #000;
  box-shadow: 5px 5px 0 #000;
  font-weight: 900;
}

Swiss Grid

Clean typography and precise grid systems from Swiss design tradition.

Precise Timeless

Popularity 81%

swiss.css

.swiss-card {
  background: #fff;
  border: 1px solid #000;
  border-radius: 0;
  padding: 25px;
  display: grid;
  gap: 15px;
}

.swiss-title {
  color: #000;
  font-weight: 700;
  font-size: 1.8em;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.swiss-button {
  background: #000;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  border: none;
  border-radius: 0;
  padding: 12px 24px;
}

Bauhaus

Geometric modernism with primary colors and functional design.

1920s Geometric

Popularity 74%

bauhaus.css

.bauhaus-card {
  background: #f0f0f0;
  border-radius: 0;
  padding: 25px;
  position: relative;
}

.bauhaus-card::before {
  content: '';
  position: absolute;
  top: -20px; right: -20px;
  width: 80px; height: 80px;
  background: #ff0000;
  border-radius: 50%;
}

.bauhaus-card::after {
  content: '';
  position: absolute;
  bottom: -15px; left: -15px;
  width: 60px; height: 60px;
  background: #0000ff;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.bauhaus-button {
  background: #ff0000;
  color: #fff;
  font-weight: 900;
  border: none;
  border-radius: 0;
}

Monochrome

Strict black and white palette for maximum contrast and clarity.

B&W Minimal

Popularity 83%

monochrome.css

.monochrome-card {
  background: #1a1a1a;
  border: 2px solid #fff;
  border-radius: 8px;
  padding: 25px;
}

.monochrome-title {
  color: #fff;
  font-weight: 700;
}

.monochrome-text {
  color: #d0d0d0;
}

.monochrome-button {
  background: #fff;
  color: #000;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
}

.monochrome-button:active {
  background: #d0d0d0;
}

Outline UI

Borderless design with outline-only elements for a light feel.

Light Airy

Popularity 77%

outline.css

.outline-card {
  background: transparent;
  border: 3px solid #6c5ce7;
  border-radius: 12px;
  padding: 25px;
}

.outline-title {
  color: #6c5ce7;
  font-weight: 800;
  border-bottom: 3px solid #6c5ce7;
  padding-bottom: 8px;
}

.outline-button {
  background: transparent;
  color: #6c5ce7;
  border: 3px solid #6c5ce7;
  font-weight: 700;
  border-radius: 8px;
  padding: 12px 24px;
}

.outline-button:active {
  background: rgba(108, 92, 231, 0.1);
  transform: scale(0.98);
}

Hand-drawn

Playful, sketchy style with irregular borders and comic fonts.

Playful Fun

Popularity 72%

doodle.css

.doodle-card {
  background: #fffacd;
  border: 3px solid #000;
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
  padding: 25px;
}

.doodle-title {
  color: #2d3436;
  font-weight: 700;
  font-family: 'Comic Sans MS', cursive;
}

.doodle-button {
  background: #55efc4;
  color: #2d3436;
  border: 3px solid #000;
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  font-family: 'Comic Sans MS', cursive;
  font-weight: 700;
  box-shadow: 2px 2px 0 #000;
  padding: 12px 24px;
}