Modern CSS in 2026

Fluid Typography with Clamp

Gone are the days of complex media queries for font sizes. clamp() allows us to scale text smoothly.

:root {
  /* Minimum 1rem, Maximum 1.25rem, scales with viewport */
  --text-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
  
  /* Fluid spacing */
  --spacing-8: clamp(2rem, 1.6vw + 1.2rem, 3rem);
}

The Return of Glass

Glassmorphism has matured into a subtle, premium texture used for depth.

.glass-panel {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}