Best of CSS — September 2025
- 1
- 2
Hacker News·36w
Apple has a private CSS property to add Liquid Glass effects to web content
Apple has developed a private CSS property called `-apple-visual-effect` that enables Liquid Glass effects in web content within iOS apps. The property supports various system materials including the new glass effects from iOS 26, but requires enabling a private WKPreferences setting called `useSystemAppearance`. While this feature can't be used in App Store apps due to its private nature, it suggests Apple is using webviews with native UI integration in their own applications without users realizing it.
- 3
Flavio Copes·37w
The CSS Handbook, 2025 edition
Flavio Copes has released an updated 2025 edition of his CSS Handbook, covering modern CSS features like container queries, cascade layers, CSS nesting, and new color spaces. The comprehensive guide spans from fundamentals like selectors and the box model to advanced topics including CSS Grid, responsive design, animations, and best practices for maintainable code.
- 4
Josh W Comeau·37w
Color Shifting in CSS • Josh W. Comeau
Explores the challenges of animating color transitions in CSS, revealing that browsers perform color interpolation in RGB space even when colors are specified in HSL, causing unwanted gray intermediate colors. Demonstrates how CSS filters, specifically hue-rotate(), provide a superior solution for smooth color shifting animations. Includes practical techniques for creating particle effects with dynamic color transitions and twinkling animations.
- 5
This website has no class
A developer experiments with removing all CSS classes from their personal website, instead relying on semantic HTML elements, custom tags, and custom attributes for styling. The approach reduces CSS bundle size to ~5KB and improves accessibility, but requires more careful planning and deeper HTML/CSS knowledge. While successful for a personal project, the author acknowledges it may not scale well for larger teams with varied frontend expertise.
- 6
CSS-Tricks·37w
Composition in CSS
CSS has always been composable through the cascade, allowing developers to combine classes and styles naturally. While utility frameworks like Tailwind promote composition, traditional CSS approaches like combining classes or using Sass mixins are equally valid forms of composition. The author argues that CSS composition extends beyond just adding classes in HTML and proposes organizing styles into four categories: layouts, typography, theming, and effects. Rather than focusing on reducing CSS or HTML bloat, developers should prioritize code architecture, structure, and clarity for better maintainability.
- 7
- 8
Chrome Developers·35w
Chrome for Developers
Chrome 140 introduces several new web development features including the ToggleEvent source attribute for identifying which element triggered a toggle event, support for counter() and counters() functions in CSS content property alt text for better accessibility, and the font-variation-settings descriptor in @font-face rules for more flexible font customization.
- 9
Is it Time to Un-Sass?
A developer reflects on 13+ years of using Sass and evaluates whether modern CSS features like native nesting, custom properties, and color-mix() function make it time to abandon CSS preprocessors. The analysis covers how native CSS has evolved to include many Sass-like features, discusses the complexity of modern tooling, and concludes that the decision depends on project size and requirements. For personal sites, moving away from Sass makes sense, but larger codebases may not justify the refactoring effort.
- 10
web.dev·35w
A refresh of Learn CSS with nine new modules
Web.dev has refreshed their popular Learn CSS course with nine new modules covering modern CSS features that have emerged since 2021. The updated course includes modules on CSS nesting, container queries, custom properties, anchor positioning, view transitions for SPAs, and other contemporary features. The new content focuses on Baseline features that developers can confidently use in current projects, with clear browser compatibility information provided throughout.
- 11
CSS {IRL}·34w
CSS { In Real Life }
Modern web experiences have become cluttered with JavaScript-heavy pages, intrusive pop-ups, and poor UX design, driving users toward AI chatbots as an alternative to traditional web browsing. The author draws parallels between Adobe Acrobat's messy interface and the current state of websites, arguing that improving web usability could reduce demand for AI-powered browsing solutions despite their accuracy and ethical concerns.
- 12
What’re Your Top 4 CSS Properties?
CSS-Tricks team members share their picks for the top 4 CSS properties they'd choose if limited to only four for building a website. Responses vary from typography-focused selections (font, color, padding) to layout-oriented choices (display, flex-direction, grid). The exercise reveals different developer priorities and approaches to web styling, with most favoring shorthand properties like font and background for maximum versatility within tight constraints.
- 13
Liquid Glass in the Browser: Refraction with CSS and SVG — kube.io
A comprehensive technical guide to recreating Apple's Liquid Glass UI effect using CSS, SVG displacement maps, and physics-based refraction calculations. Covers the mathematical principles of light refraction through Snell's Law, surface function modeling, displacement vector field generation, and SVG filter implementation. Includes interactive simulations and practical UI component examples like magnifying glass, search box, and music player interfaces. Currently Chrome-only due to SVG backdrop-filter limitations.
- 14
Prismic·38w
CSS Sliders: 40 Examples + Best Libraries for Developers
A comprehensive collection of 40 CSS slider and carousel examples with CodePen demonstrations, ranging from pure CSS solutions to JavaScript-powered implementations. Covers popular libraries like Swiper, Splide, and Glide.js for creating responsive, interactive sliders for image galleries, testimonials, and content showcases.
- 15
CSS Tip·37w
The Fundamentals of CSS Alignment
A comprehensive guide to CSS alignment that explains the fundamental concepts behind alignment properties across different layout systems. Covers the two-level alignment theory (content and item levels), demonstrates how alignment works in Grid, Flexbox, and Block containers, and explains concepts like auto margins, safe alignment, and absolutely-positioned elements. Includes interactive demos and a quiz to test understanding.
- 16
Saad Hasan·35w
TailwindCSS to CSS Converter
A developer created an improved TailwindCSS to CSS converter tool that transforms utility classes into clean CSS code. The tool features real Tailwind output, responsive and pseudo-class support, custom selectors, syntax highlighting, and a polished dark UI with saved preferences. It addresses the common pain point of manually migrating projects away from TailwindCSS.
- 17
WeProDev·36w
Gradientscss: Beautiful gradients for your next project.
GradientCSS is an open-source tool that provides a curated collection of modern gradients for web projects. It offers one-click copying and exporting in multiple formats including CSS, Tailwind, SCSS, SVG, and images. The tool features live preview, animation controls, and supports various color formats without requiring user registration.
- 18
Web Dev Simplified·36w
How To Use CSS Dev Tools Like a Senior Developer
A comprehensive guide to advanced CSS debugging techniques using browser developer tools. Covers essential features like the styles panel, computed tab, layout visualization for grid and flexbox, DOM breakpoints, rendering tab for accessibility testing, animation scrubber, and CSS overview for analyzing colors, fonts, and contrast issues. Also includes Firefox-specific font debugging techniques to catch locally installed font issues before deployment.
- 19
What Can We Actually Do With corner-shape?
The corner-shape CSS property enables creating various UI effects beyond traditional rounded corners, including snipped corners, slanted sections, sale tags, tooltips, and squircles. Currently supported only in Chrome 139+, it works alongside border-radius to create beveled, scooped, notched, and squircle corner shapes. Examples demonstrate practical applications like arrow breadcrumbs, realistic text highlighting, and background clipping techniques.
- 20
CSS Typed Arithmetic
CSS typed arithmetic, available starting in Chrome 140, allows division of typed values to produce unitless numbers, enabling conversion between different CSS data types. This feature opens new possibilities for creating dynamic relationships between properties, such as calculating element positions based on screen width, determining opacity from font size, or creating responsive animations without media queries or JavaScript. The capability transforms CSS from static declarations into computational relationships between properties.
- 21
The Big Gotcha With @starting-style • Josh W. Comeau
The @starting-style CSS at-rule allows transitions for enter animations but has a significant specificity gotcha. Unlike keyframe animations, @starting-style declarations aren't promoted to a higher priority group, causing them to lose to more specific selectors. This creates unexpected behavior where animations fail to run when conflicting with inline styles or higher-specificity selectors. The post explores three solutions: using !important (not recommended), CSS custom properties (elegant but complex), or falling back to keyframe animations (simple and reliable). The author questions whether @starting-style offers real advantages over existing keyframe animations.
- 22
Web Tools Weekly·37w
CSS/HTML Tools, AI Tools & LLMs, JS Utilities
A curated collection of web development tools and resources organized into three categories: CSS/HTML tools including property references, design system generators, and email editors; AI tools and LLMs featuring Google's new AI SDK, local AI app builders, and browser automation libraries; and JavaScript utilities covering internationalization checkers, PDF viewers, color palette generators, and feed parsers.
- 23
Touring New CSS Features in Safari 26
Safari 26 introduces 75 new web platform features including major CSS additions like anchor positioning for tooltips and modals, scroll-driven animations that link CSS animations to scroll position, the progress() function for mixed unit calculations, and self-alignment in absolute positioning. New features also include contrast-color() function for automatic text color selection and improved text-wrap: pretty for better typography. These additions bring Safari closer to feature parity with Chrome and support the Interop 2025 initiative for cross-browser compatibility.
- 24
CSS Shapes using corner-shape
The new CSS corner-shape property enables developers to create common geometric shapes like triangles, rhombus, octagon, hexagon, trapezoid, parallelogram, arrows, and 3D boxes by manipulating corner shapes combined with border-radius. Currently limited to Chrome browser support only.
- 25
Coding in Public·35w
Relative colors are HERE!
CSS relative color syntax allows developers to create flexible color systems by defining colors based on existing ones using the 'from' keyword. The syntax supports color space conversion between HSL, OKLCH, and hex values, enabling dynamic color calculations with functions like calc() and clamp(). With 87% browser support as of 2023, this feature helps build more maintainable design systems by allowing relative color adjustments without manual conversion.
