Let's Look at 50 Interesting CSS Properties and Values

Why Modern CSS Matters

CSS has become increasingly capable, handling complex interactions and responsive designs without requiring JavaScript libraries. The specifications have matured to support real-world use cases while maintaining strong browser compatibility.

The CSS working group has focused on three key areas:

• Reducing JavaScript dependencies - Native solutions for accordions, modals, and animations
• Improving performance - Better rendering control through containment and scroll optimization
• Enhancing developer ergonomics - More intuitive properties and values

Performance Benefits

Modern CSS properties directly impact page performance. Properties like content-visibility allow browsers to skip rendering work for off-screen content, reducing initial load times and improving Core Web Vitals metrics. Container queries enable component-level responsive design, eliminating the need for JavaScript-based resize observers. Scroll-driven animations run on the compositor thread, providing smooth 60fps animations without main thread blocking.

For teams focused on professional web development, mastering these CSS capabilities is essential for delivering fast, accessible websites that rank well in search engines.

Responsive Design Properties

Modern CSS provides powerful tools for creating fluid, responsive layouts without relying on complex media query chains.

Fluid Typography with clamp()

The clamp() function revolutionizes responsive typography by defining a value that scales fluidly between a minimum and maximum:

h1 {
 font-size: clamp(1.5rem, 5vw + 1rem, 4rem);
}

p {
 font-size: clamp(1rem, 2.5vw + 0.5rem, 1.5rem);
}

This eliminates the need for multiple media queries to handle typography scaling, providing smooth transitions across all viewport sizes. As documented in the State of CSS 2025 survey, clamp() has become one of the most widely adopted modern CSS features due to its simplicity and effectiveness.

Container Queries

Container queries allow components to respond to their parent container's size rather than the viewport:

.card-container {
 container-type: inline-size;
 container-name: card;
}

@container card (min-width: 400px) {
 .card {
 display: grid;
 grid-template-columns: 200px 1fr;
 }
}

This enables truly reusable components that adapt to their container context, as detailed in the MDN Web Docs on container queries.

Container Units

CSS provides container-relative units that work within container query contexts:

.card {
 width: 50cqi;
 padding: 2cqh;
 font-size: 1.5cqw;
}

These units (cqi, cqh, cqw, cmin, cmax) enable proportional sizing based on container dimensions rather than viewport, making component-based design systems more flexible.

Color and Theming Innovations

CSS has introduced powerful color manipulation capabilities that simplify dark mode and theming implementation.

color-mix()

The color-mix() function allows mixing colors directly in CSS:

.button-primary {
 background-color: color-mix(in srgb, #0066ff, #ffffff 20%);
}

.sidebar {
 background-color: color-mix(in oklch, var(--primary), black 30%);
}

This eliminates the need for preprocessor color functions and enables runtime color manipulation, as noted in research on innovative CSS properties for 2025.

light-dark()

The light-dark() function provides elegant dark mode handling:

:root {
 --text-primary: light-dark(#1a1a1a, #f5f5f5);
 --background: light-dark(#ffffff, #121212);
 --border: light-dark(#e0e0e0, #333333);
}

This pairs perfectly with the color-scheme property for native dark mode support, reducing the need for complex JavaScript-based theme toggles.

Relative Color Syntax

Relative color syntax enables dynamic color manipulation based on an existing color:

.button {
 background: hsl(from var(--brand-color) h s l);
 background: hsl(from var(--brand-color) h s calc(l + 20%));
}

This powerful feature allows you to derive new colors from existing ones, making theme maintenance significantly easier.

oklch and oklab Color Spaces

Modern color spaces like oklch and oklab provide wider gamuts and better perceptual uniformity:

.brand {
 color: oklch(65% 0.15 280);
 background: oklch(95% 0.02 280);
}

Layout and Containment Properties

Modern CSS provides sophisticated containment options that dramatically improve rendering performance.

content-visibility

The content-visibility property dramatically improves rendering performance:

.article-content {
 content-visibility: auto;
}

.comments-section {
 content-visibility: auto;
}

This tells the browser to skip rendering content that's not currently visible, improving initial page load and scroll performance. As covered in top CSS features for 2025, this property can significantly reduce rendering work for long pages.

When implementing these performance optimizations as part of a comprehensive SEO services strategy, faster page loads directly contribute to better search rankings and improved user engagement metrics.

contain and contain-intrinsic-size

Containment properties isolate rendering:

.widget {
 contain: content;
 contain-intrinsic-size: 0 500px;
}

will-change

The will-change property prepares elements for animation:

.animated-element {
 will-change: transform, opacity;
}

paint-order and stroke-dasharray

For SVG and graphic elements:

.text-outline {
 paint-order: stroke fill;
 stroke-dasharray: 10, 5;
}

Animation and Motion Properties

CSS has evolved to support complex animations without JavaScript, including scroll-driven animations that run on the compositor thread.

scroll-timeline

Scroll-driven animations without JavaScript:

.progress-bar {
 animation: grow linear both;
 animation-timeline: scroll(root);
}

@keyframes grow {
 from { width: 0%; }
 to { width: 100%; }
}

This feature enables animations synchronized with scroll position, as documented in the MDN Web Docs on scroll-timeline.

animation-composition

The animation-composition property controls how animations combine:

.element {
 animation-composition: add;
 animation-name: slide-in, fade-in;
}

This allows multiple animations to layer their effects rather than overriding, as noted in innovative CSS properties research.

offset-path and offset-position

Animate elements along custom paths:

.animated-icon {
 offset-path: path("M10,80 Q95,10 180,80");
 offset-position: 0%;
 transition: offset-position 2s ease;
}

.animated-icon:hover {
 offset-position: 100%;
}

transition-behavior

For fine-grained transition control:

.modal {
 transition: opacity 0.3s;
 transition-behavior: allow-discrete;
}

The allow-discrete value enables transitions to/from display: none.

linear() Timing Function

The linear() timing function creates complex easing curves:

.element {
 transition-timing-function: linear(
 0, 0.1 0.2, 0.5 0.4, 0.8 0.7, 1
 );
}

Scroll Customization Properties

Modern CSS provides extensive control over scroll behavior, improving user experience and preventing common scroll issues.

scrollbar-gutter

Prevent layout shifts when scrollbars appear:

.scrollable {
 scrollbar-gutter: stable both-edges;
}

As documented in top CSS features for 2025, this property prevents jarring layout shifts when scrollbars appear or disappear.

scrollbar-color and scrollbar-width

Customize scrollbar appearance:

.custom-scrollbar {
 scrollbar-color: #666 #f0f0f0;
 scrollbar-width: thin;
}

scroll-behavior

Control smooth scrolling:

html {
 scroll-behavior: smooth;
}

.scrollable-region {
 scroll-behavior: auto;
}

overscroll-behavior

Prevent unwanted scroll chaining:

.dialog {
 overscroll-behavior: contain;
}

.feed {
 overscroll-behavior-y: contain;
}

Interactive State Selectors

CSS selectors have evolved to support complex state-based styling without JavaScript.

:state() Pseudo-class

The :state() pseudo-class targets custom element states:

my-element:state(open) {
 display: block;
}

my-element:state(loading) {
 opacity: 0.5;
}

As noted in innovative CSS properties research, this feature enables native state management for web components.

:has() Parent Selector

The :has() selector enables parent-based styling:

.card:has(.badge) {
 padding-top: 2rem;
}

.row:has(:hover) {
 background: #f5f5f5;
}

.form:has(.error) .submit-button {
 disabled: true;
}

:target-text Pseudo-element

Highlight text targeted by URL fragments:

::target-text {
 background: yellow;
 color: black;
}

This makes it easy for users to find the section they navigated to via anchor links, as covered in CSS features documentation.

:focus-visible

Control focus indicator visibility:

.button:focus-visible {
 outline: 2px solid blue;
 outline-offset: 2px;
}

.button:focus:not(:focus-visible) {
 outline: none;
}

Typography Properties

Modern CSS provides fine-grained control over text rendering, wrapping, and typographic features.

font-size-adjust

Maintain legibility when fonts fall back:

.text {
 font-family: "Custom Font", Arial, sans-serif;
 font-size-adjust: 0.5;
}

This ensures text remains readable even if the custom font fails to load, as documented in CSS features for 2025.

text-wrap and text-wrap-mode

Control text wrapping behavior:

.headline {
 text-wrap: balance;
}

.paragraph {
 text-wrap: pretty;
}

.label {
 text-wrap-mode: nowrap;
}

text-wrap-style and text-wrap-balance

Additional text wrapping controls:

.heading {
 text-wrap-style: strict;
 text-wrap-balance: 4;
}

hyphenate-limit-chars

Control hyphenation behavior:

.paragraph {
 hyphens: auto;
 hyphenate-limit-chars: 6 3 3;
}

initial-letter

Control initial letter styling:

.drop-cap::first-letter {
 initial-letter: 3;
}

Custom Property Advanced Features

CSS custom properties (CSS variables) have become significantly more powerful with typed definitions and advanced capabilities.

@property Definition

Define typed custom properties:

@property --progress {
 syntax: "<number>";
 inherits: false;
 initial-value: 0;
}

.progress-bar {
 --progress: 0;
 background: linear-gradient(
 to right,
 blue calc(var(--progress) * 1%),
 transparent 0
 );
}

This enables CSS variable animations that weren't possible before, as noted in CSS features documentation.

Custom Property Transitions

With @property, variables become animatable:

@property --angle {
 syntax: "<angle>";
 inherits: false;
 initial-value: 0deg;
}

.spinner {
 --angle: 0deg;
 animation: rotate 1s linear infinite;
}

@keyframes rotate {
 to {
 transform: rotate(var(--angle));
 }
}

CSS Mathematical Functions

Advanced calculation capabilities:

.element {
 width: calc(100% - clamp(1rem, 5vw, 3rem));
 font-size: round(nearest, 1rem + 2vw);
 padding: mod(10, 3) * 1rem;
}

The round(), mod(), and rem() functions simplify complex calculations, as documented in CSS features research.

Native HTML Enhancements

Modern HTML and CSS work together to provide native solutions for common UI patterns.

Exclusive Details Elements

Native accordions without JavaScript:

<details name="faq">
 <summary>What is CSS?</summary>
 <p>CSS is a stylesheet language...</p>
</details>

<details name="faq">
 <summary>How do I learn CSS?</summary>
 <p>Start with fundamentals...</p>
</details>

The name attribute creates mutually exclusive panels, eliminating the need for JavaScript accordion implementations as covered in CSS features documentation.

Popover Attribute

Native popover functionality:

<button popovertarget="settings-panel">
 Open Settings
</button>

<div id="settings-panel" popover>
 <settings-content />
</div>

Inert Attribute

Mark elements as inert:

<dialog>
 <form method="dialog">
 <p>This dialog prevents interaction with background</p>
 <button>Close</button>
 </form>
</dialog>

Scroll-State Queries

Container queries now extend to scroll position, enabling sophisticated scroll-based interactions.

scroll-state() Container Queries

Respond to scroll position within containers:

.scroll-container {
 scroll-state: container;
}

.scroll-container:scroll-state(scroll-vertical) {
 /* Has vertical scroll */
}

.scroll-container:scroll-state(scroll-at-end) {
 /* Reached bottom */
}

This enables sticky headers, progress indicators, and loading triggers, as documented in Chrome's scroll-state queries announcement.

Viewport Units for Modern Layouts

Beyond basic vw and vh, CSS now offers dynamic viewport units:

.hero {
 height: 100dvh;
 padding: 5dvh 5dvw;
}

The dvh (dynamic viewport height) accounts for browser UI, preventing content from being hidden behind address bars or navigation bars on mobile devices.

Grid and Flexbox Enhancements

CSS Grid and Flexbox continue to receive powerful enhancements.

grid-template-columns: subgrid

Extend grid alignment to nested items:

.card-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.card {
 display: grid;
 grid-template-columns: subgrid;
 grid-column: span 2;
}

align-tracks and justify-tracks

Track alignment in masonry-like layouts:

.masonry {
 grid-template-rows: masonry;
 align-tracks: start;
}

repeat(auto-fit, minmax()) Pattern

The powerful responsive pattern:

.responsive-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 gap: 1.5rem;
}

Overflow and Clipping Properties

Modern CSS provides safer alternatives for handling overflow and clipping.

overflow: clip

A safer alternative to overflow: hidden:

.scrollable-clip {
 overflow: clip;
}

.visual-effect {
 overflow: clip;
 mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

As noted in innovative CSS properties research, overflow: clip provides better security and performance characteristics.

overflow-block and overflow-inline

Logical overflow properties:

.element {
 overflow-block: auto;
 overflow-inline: hidden;
}

clip-path and shape-outside

Create non-rectangular layouts:

.polygon-shape {
 clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.text-around-image {
 shape-outside: circle(50% at 50% 50%);
 float: left;
}

Best Practices for Modern CSS

Progressive Enhancement

Use feature queries to provide fallbacks:

@supports (container-type: inline-size) {
 .card {
 container-type: inline-size;
 }
}

@supports not (container-type: inline-size) {
 .card {
 /* Fallback styles */
 }
}

@supports (color-mix(in srgb, red, blue)) {
 .mixed-color {
 background: color-mix(in srgb, var(--primary), white 20%);
 }
}

Performance-Conscious Usage

Prioritize properties that don't trigger layout or paint:

/* Good for performance */
.animated {
 will-change: transform;
 transform: translateZ(0);
}

/* Avoid excessive containment */
.contained {
 contain: content;
}

Maintainable CSS Architecture

Use custom properties for theming:

:root {
 --color-primary: oklch(65% 0.15 280);
 --color-secondary: oklch(70% 0.18 200);
 --spacing-unit: 0.5rem;
 --border-radius: 8px;

 /* Semantic mappings */
 --button-bg: var(--color-primary);
 --button-text: oklch(98% 0.02 280);
}

Implementation Examples

Responsive Card Component

.card-container {
 container-type: inline-size;
 container-name: card;
}

.card {
 display: flex;
 flex-direction: column;
 gap: 1rem;
 padding: 1.5rem;
 border-radius: 12px;
 background: light-dark(#ffffff, #1e1e1e);
}

@container card (min-width: 350px) {
 .card {
 flex-direction: row;
 align-items: center;
 }
}

Scroll-Driven Progress Indicator

.progress-container {
 position: fixed;
 top: 0;
 width: 100%;
 height: 4px;
 background: #e0e0e0;
}

.progress-bar {
 height: 100%;
 background: linear-gradient(90deg, #0066ff, #00ccff);
 animation: progress linear both;
 animation-timeline: scroll(root block);
}

@keyframes progress {
 from { width: 0%; }
 to { width: 100%; }
}

Dark Mode with color-mix()

:root {
 --primary: oklch(65% 0.15 280);
}

.theme-light {
 --button-bg: var(--primary);
 --button-hover: color-mix(in oklch, var(--primary), black 10%);
 --button-text: oklch(98% 0.02 280);
}

.theme-dark {
 --button-bg: color-mix(in oklch, var(--primary), white 15%);
 --button-hover: color-mix(in oklch, var(--primary), white 25%);
 --button-text: oklch(98% 0.02 280);
}

Conclusion

Modern CSS has evolved to handle complex design requirements without JavaScript dependencies. The 50 properties and values explored in this guide represent just a portion of what's available to developers today.

Key takeaways include:

• Performance-first properties like content-visibility and scroll-driven animations reduce JavaScript needs
• Container queries enable truly reusable responsive components that adapt to any container context
• Color manipulation functions like color-mix() and light-dark() simplify theming implementation
• Native HTML enhancements like exclusive details elements and popover eliminate common JavaScript patterns
• Typed custom properties via @property unlock new animation possibilities that weren't possible before

These modern CSS features represent a shift toward more performant, accessible, and maintainable web interfaces. By leveraging these capabilities, developers can build sophisticated UIs while reducing dependencies on JavaScript frameworks. Our web development services team stays current with these evolving standards to deliver cutting-edge solutions that improve both user experience and search engine performance.

For organizations looking to integrate these modern techniques with intelligent automation solutions, our AI automation services can complement your technical stack with smart workflows and enhanced functionality.

As browser support continues to improve across Chrome, Firefox, Safari, and Edge, these modern CSS features will become essential tools in every developer's toolkit. Start incorporating them into your projects today for faster, more maintainable stylesheets.

Sources

1. State of CSS 2025 - Comprehensive survey of CSS features with adoption rates and developer sentiment
2. MDN Web Docs: Container Queries - Official documentation for container queries
3. MDN Web Docs: scroll-timeline - Scroll-driven animations reference
4. Chrome for Developers: CSS scroll-state() - Scroll-state queries documentation
5. Talent500: 5 Innovative CSS Properties for Modern Web Development in 2025 - Covers animation-composition, :state(), color-mix(), overflow: clip, and clamp()
6. DEV Community: Top 10 CSS Features You Can Use in 2025 - Practical code examples for modern CSS features