CSS 2025: More power for modern styling – beyond Sass

In my previous article (“Goodbye Sass, Welcome Back Native CSS”), I demonstrated how the CSS landscape has evolved so quickly that many features formerly exclusive to Sass are now natively available. While that article covered container queries and selectors like :is() and :has(), there’s much more to discover in 2025. Below, we’ll explore several fresh CSS features—from scroll-driven animations to customizable form elements and trigonometric functions.

Scroll-driven animations: Dynamic effects while scrolling

Scroll-driven animations let you smoothly bring content into view, highlight specific sections, or gradually transform layouts as the user scrolls. Modern browsers are experimenting with APIs that combine CSS and JavaScript functionality, allowing elements to animate automatically based on scroll position.

A simple example might be a heading that starts out transparent and fades in as you scroll. Previously, this required complex JavaScript or dedicated scroll libraries. Nowadays, native CSS techniques (in combination with the Intersection Observer or experimental scroll-linked animations) handle the job with fewer performance bottlenecks. Browser vendors continue to push toward an even simpler, more declarative approach.

@scroll-timeline slide-timeline {
  scroll-source: auto;
  orientation: block;
  scroll-offsets: 0%, 100%;
}

.box {
  scroll-timeline: slide-timeline;
  animation: slide-in 1s linear 1 forwards;
}

@keyframes slide-in {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

accent-color: Unified Appearance of Native Form Controls

Another standout feature is accent-color. It lets you adapt native checkboxes, radio buttons, or progress bars to match your color scheme without completely rebuilding custom controls:

input[type="checkbox"] {
  accent-color: #ff7a00;
}

In supported browsers, this property applies a unified accent color to elements like checkboxes. Instead of using hacks or extensive resets, you can retain the inherent accessibility of native widgets while aligning them with your brand design. Chrome, Edge, Safari, and newer Firefox releases already offer solid support for accent-color.

Trigonometric functions in css: sin(), cos(), tan()

For advanced layout and animation scenarios, the trigonometric functions sin(), cos(), and tan() open up exciting possibilities. These functions let you calculate values dynamically—particularly useful for spacing, rotations, or wave-like transitions:

.element {
  transform: translateX(calc(50px * sin(45deg)));
}

This approach delivers a flexible movement—no extra JavaScript required. More complex layout effects are also possible. Currently, trig functions are part of CSS Values and Units Level 4, with implementation progressing in all modern browsers.

@scope: local style scoping

While the above features provide new styling and animation options, @scope addresses style encapsulation. This rule applies CSS only to specific areas of the DOM:

@scope (.widget) {
  h2 {
    font-size: 1.2rem;
  }
}

Such selective targeting avoids unintended side effects in other parts of the page. Though some browsers have yet to finalize their implementations, @scope hints at how beneficial it could be for larger codebases needing more modular styles.

New color formats: OKLCH for precise colors

Anyone looking for vibrant hues and wide-gamut design should pay attention to OKLCH. Unlike HSL or RGB, OKLCH is a perceptually uniform color model:

.element {
  color: oklch(65% 0.25 120);
}

This yields smoother transitions and consistent contrast. Modern browsers now support Lab, LCH, and OKLCH quite broadly. For older versions, consider adding a fallback color value in hex or RGB.

View Transitions API: fluid transitions with minimal JS

::view-transition-old {
  opacity: 1;
}
::view-transition-new {
  opacity: 0;
  transition: opacity 0.3s;
}

It’s already functional in Chrome and Edge, while Safari and Firefox are still catching up. With a suitable fallback, you can begin experimenting in production environments.

Check out csstoday.dev for regular posts about modern CSS tips and advanced features. Staying informed will help you adopt new techniques as soon as they become widely available.

Conclusion

By 2025, CSS provides a powerful toolkit: scroll-driven animations, customizable form controls, trigonometric calculations, local scoping, and new color models all streamline modern front-end projects. With widespread browser support, many of these features can already be used today. The future belongs to native CSS—so keep an eye on emerging standards and best practices to stay ahead of the curve.