CSS & UI Design Trends to Watch in 2025

Scroll-Driven Animations

The CSS Scroll-driven Animations spec (supported in Chrome 115+, coming to Firefox and Safari) lets you tie CSS animations to scroll position without any JavaScript. Elements can animate in as they enter the viewport, progress bars fill as users scroll, and parallax effects become trivial to implement:

/* Fade in as element enters viewport — no JavaScript */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.scroll-reveal {
  animation: fade-in linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

/* Reading progress bar */
@keyframes fill-width {
  from { width: 0%; }
  to   { width: 100%; }
}

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #7c6fff, #ff6fb0);
  animation: fill-width linear both;
  animation-timeline: scroll(root);
}

Container Queries

Container queries are one of the most significant additions to CSS in years. Instead of adapting to the viewport width, a component adapts to the size of its containing parent. This makes components truly portable — the same card component can render as a wide horizontal card in a sidebar and as a compact vertical card in a narrow widget, with no JavaScript and no duplicate CSS:

/* Make a container queryable */
.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

/* Component responds to its container, not the viewport */
.card {
  display: flex;
  flex-direction: column; /* default: vertical stacked */
}

@container card (min-width: 500px) {
  .card {
    flex-direction: row; /* switch to horizontal when wide enough */
    align-items: center;
  }
  .card-image {
    width: 200px;
    flex-shrink: 0;
  }
}

Browser support for container queries has reached universal coverage: Chrome 105+, Firefox 110+, Safari 16+. This is safe to use in production today.

View Transitions API

The View Transitions API (Chrome 111+) enables smooth animated transitions between different page states or routes with remarkably little code. For single-page applications and server-rendered pages alike, elements can morphe and cross-fade during navigation rather than cutting abruptly:

/* Default cross-fade — comes for free */
@view-transition {
  navigation: auto;
}

/* Customise the transition */
::view-transition-old(root) {
  animation: fade-out 0.3s ease;
}
::view-transition-new(root) {
  animation: fade-in 0.3s ease;
}

/* Named transitions — element morphs between pages */
.hero-image { view-transition-name: hero; }
.detail-image { view-transition-name: hero; }
/* Browser automatically animates between the two */

New Colour Spaces

CSS now supports modern colour spaces that go beyond the sRGB limitations of hex and rgb(). The oklch() and oklab() colour spaces offer perceptual uniformity — gradients through them look natural where gradients through HSL can pass through grey. This is a significant upgrade for gradient design:

/* oklch(lightness chroma hue) */
--color-primary: oklch(60% 0.18 270); /* purple */
--color-accent:  oklch(70% 0.2 330);  /* pink */

/* Gradient through oklch — no grey muddy midpoint */
background: linear-gradient(
  in oklch,
  oklch(60% 0.18 270),
  oklch(70% 0.2 330)
);

/* Wider gamut — colours beyond sRGB */
--vivid-red: color(display-p3 1 0 0);    /* richer than #ff0000 */
--vivid-green: color(display-p3 0 1 0);  /* outside sRGB gamut */

Native CSS Nesting

CSS nesting is now supported natively in all modern browsers (Chrome 120+, Firefox 117+, Safari 17.2+) — no Sass or PostCSS required. Nesting reduces repetition, improves component locality, and makes stylesheets significantly easier to read and maintain:

/* Native CSS nesting — no preprocessor needed */
.card {
  background: var(--surface);
  border-radius: 16px;
  padding: 24px;

  /* Nested selectors */
  & .card-title {
    font-size: 1.2rem;
    font-weight: 700;
  }

  & .card-body {
    color: var(--muted);
    line-height: 1.7;
  }

  /* Nested pseudo-classes */
  &:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
  }

  /* Nested media queries */
  @media (max-width: 768px) {
    padding: 16px;
    & .card-title { font-size: 1rem; }
  }
}

Visual Design Trends for 2025

Bolder border radius

Cards are getting rounder. 16–24px on cards, 999px on buttons, and even intentionally organic blob shapes are replacing the tight 4–8px radii of the previous decade. The Border Radius Generator covers the full range from sharp to blob.

Glassmorphism 2.0

The original frosted-glass trend has evolved. 2025 glassmorphism pairs stronger blur values (16–24px), more saturated tint colours, and gradient borders instead of plain white borders. See our Glassmorphism Generator for production-ready variants.

Gradient text everywhere

Gradient text headings are standard practice in product marketing and SaaS UIs. The background-clip technique works in all modern browsers. Build the gradient in our Gradient Generator and apply the three-line clip technique.

Coloured shadows

Coloured box-shadows that match the element's background colour have replaced plain grey shadows as the standard for elevated cards and buttons. See the Box Shadow Generator for coloured shadow combinations.

Elevated button design

Buttons in 2025 have personality — gradient fills, matching coloured shadows, glow effects on hover, and more expressive hover states. The Button Generator covers all six popular styles with live hover preview.

Browser Support Summary