Best of CSS — June 2025

1. 1
   Article

   LogRocket·50w

   When to use Flexbox and when to use CSS Grid

   CSS Flexbox excels at one-dimensional layouts for aligning items in rows or columns, making it perfect for UI components and simple alignment tasks. CSS Grid handles two-dimensional layouts with both rows and columns simultaneously, ideal for complex page structures. The key principle is using Grid for overall layout architecture and Flexbox for component-level alignment. Both systems can be combined effectively - Grid for the main page structure and Flexbox within individual sections for precise element positioning. Modern web development benefits from understanding when each tool serves its purpose best rather than trying to force one solution for all layout needs.

   142

   4
2. 2
   Article

   LogRocket·50w

   Modern CSS carousels: No JavaScript required

   Chrome 135 introduces new CSS pseudo-elements ::scroll-button() and ::scroll-marker() that enable building fully functional carousels without JavaScript. These features create interactive scroll buttons and visual markers with built-in accessibility support, including automatic screen reader announcements and keyboard navigation. The pseudo-elements work with existing CSS features like scroll-snap-type for smooth navigation and can be styled like regular HTML elements.

   131

   4
3. 3
   Article

   Community Picks·47w

   Liquid Glass, but in CSS

   A detailed technical breakdown of recreating Apple's new Liquid Glass design language using CSS and SVG filters. The implementation involves multiple layers including specular highlights with box-shadow, backdrop blur and color filters, SVG displacement maps for refraction effects, and chromatic aberration simulation. The technique requires advanced CSS filter knowledge and has significant browser compatibility limitations, working primarily in Chrome with performance considerations for GPU usage.

   129

   11
4. 4
   Article

   Community Picks·49w

   Tailwind CSS Animations Plugin: Community-Powered Animation Magic

   A comprehensive Tailwind CSS animations plugin by @midudev that provides over 60 pre-built animation classes for web developers. The plugin includes common animations like fade-in/out, slide transitions, rotations, bouncing effects, and complex animations like heartbeat, dancing, and jelly. Installation is straightforward via npm, making it easy to add engaging animations to websites without writing custom CSS.

   128

   7
5. 5
   Article

   Chrome Developers·49w

   A new way to style gaps in CSS

   CSS gap decorations is a new feature available in Chrome and Edge 139 that allows developers to style gaps between items in flex, grid, and multi-column layouts without using border or pseudo-element workarounds. The feature extends the column-rule property to work with grid and flexbox layouts and introduces a new row-rule property. It offers benefits like no layout impact, repeat syntax for patterns, cleaner markup, and enhanced customizability through new properties like rule-break, rule-outset, and gap-rule-paint-order. The feature is currently in developer trial and requires enabling experimental web platform features.

   110

   4
6. 6
   Article

   Collections·49w

   A Guide to Creating Blurry Glass Effects with CSS

   Glassmorphism creates modern frosted glass effects in web design using CSS techniques like backdrop-filter, radial gradients, and pseudo-elements. Basic approaches use gradient backgrounds and borders for solid backgrounds, while advanced methods employ CSS masks and backdrop filters for true transparency. A Glassmorphism CSS Generator tool based on Glass UI library provides ready-to-use code snippets with MIT licensing, offering backdrop-filter blur effects and browser compatibility information for streamlined implementation.

   110

   5
7. 7
   Article

   CSS Tip·51w

   How to correctly use if() in CSS

   CSS is introducing a new if() function for conditional styling, but there's a common pitfall when using calculations within conditions. The browser treats custom property values as strings unless they're registered with @property, which means calculations like calc(var(--n)/2) won't be evaluated. To fix this, you need to register the custom property with @property and specify its syntax and initial value. This registration is only required when calculations are involved - exact value matching works without registration.

   79

   2
8. 8
   Article

   CSS-Tricks·47w

   CSS-Tricks

   KelpUI is a new CSS library by Chris Ferdinandi that combines modern CSS features with Web Components. The library emphasizes base styles, utility classes, CSS variables for customization, and Web Components that keep HTML in the light DOM. It uses CSS Cascade Layers for logical structure, maintains low specificity selectors, includes accessible color palettes, and can be loaded from CDN or downloaded locally. The development process is being openly documented through a series of blog posts.

   78

   7
9. 9
   Article

   Twitter X·49w

   Liquid Glass for VueJS

   A Vue.js library that provides glassmorphism UI components with translucent, frosted glass visual effects. The library offers pre-built components that implement the popular glass design trend using CSS backdrop filters and transparency effects, making it easy for developers to add modern glass-like interfaces to their Vue applications.

   78

   3
10. 10
    Article

    Codrops·49w

    Building an Infinite Parallax Grid with GSAP and Seamless Tiling

    A comprehensive tutorial on creating an infinitely scrolling image grid with parallax effects using GSAP. Covers dynamic tile generation from Figma layouts, smooth scroll and drag interactions, seamless tiling for infinite scrolling, visibility animations with IntersectionObserver, and polished intro animations. The implementation uses mathematical calculations for positioning, linear interpolation for smooth motion, and performance optimizations for web animations.

    75
11. 11
    Article

    Web Tools Weekly·50w

    CSS Tools, Git/CLI Tools, Mobile, React Native

    A curated collection of web development tools covering CSS utilities like atomic CSS solutions and browser compatibility checkers, Git/CLI tools including AI-powered terminal assistants and changelog generators, and React Native libraries for performance profiling and UI components. Features tools for developers ranging from beginner-friendly CSS generators to advanced mobile development libraries.

    75

    2
12. 12
    Article

    Piccalilli·50w

    Sticky revealing footer

    Learn how to create a sticky footer that reveals from the bottom using minimal CSS. The technique involves using position: sticky on the footer, creating proper stacking contexts with z-index values, and applying position: relative to main content elements to ensure proper layering. Key considerations include setting background colors to prevent content overlap and understanding how stacking contexts work in CSS.

    66
13. 13
    Article

    Community Picks·48w

    <syntax-highlight> element

    A web component library that provides syntax highlighting functionality using the CSS Custom Highlight API. The component can be imported as an ES module or via CDN, used with simple HTML markup by specifying a language attribute, and styled with CSS themes. Limited themes are currently available, but custom themes can be created.

    58

    4
14. 14
    Article

    CodePen·49w

    Chris’ Corner: Liquid Ass – CodePen

    The liquid glass design trend is gaining popularity among developers, with CSS implementations using backdrop-filter blur effects to create frosted glass appearances. While visually appealing and demonstrated by Apple in their recent designs, this trend raises accessibility concerns due to poor text contrast ratios. The effect has been around for years but is experiencing renewed interest, with developers creating various implementations and tutorials.

    50

    6
15. 15
    Article

    WebKit·48w

    A guide to Scroll-driven Animations with just CSS

    CSS scroll-driven animations allow developers to create animations that respond to user scrolling without JavaScript. The feature uses animation-timeline property with scroll() and view() functions to control when animations trigger. Scroll() timelines activate during any scrolling, while view() timelines activate when elements enter the viewport. The guide covers creating progress bars and sliding image effects, emphasizing accessibility considerations with prefers-reduced-motion media queries. Animation-range property controls when animations start and stop within the timeline. The feature is available in Safari 26 beta and represents a significant advancement in CSS animation capabilities.

    47

    1
16. 16
    Article

    Bootstrap·48w

    Bootstrap 5.3.7

    Bootstrap 5.3.7 has been released with follow-up fixes from the Astro migration and various small improvements. Key updates include documentation fixes for broken GitHub URLs and HTML head content, improved accessibility features, refined sanitizer documentation, and better floating labels usage. The release also consolidates Sass box-shadow mixin values, fixes popover and tooltip behavior issues, and adds recommended VSCode extensions configuration to the repository.

    47

    3
17. 17
    Article

    Chrome Developers·47w

    Chrome for Developers

    Chrome 138 introduces built-in AI APIs for translation, language detection, and text summarization that run locally using Gemini Nano. New CSS functions include abs(), sign(), progress(), sibling-index(), and sibling-count() for enhanced styling capabilities. The Viewport Segments API enables responsive design for foldable devices by detecting hardware features like folds and hinges. Additional improvements include attribute serialization fixes, new Clear-Site-Data header values, and the stretch keyword for CSS sizing properties.

    43
18. 18
    Article

    Prismic·47w

    CSS Flexbox vs Grid: Complete Guide & When to Use Each

    CSS Flexbox and Grid are powerful layout systems that revolutionized web design. Flexbox excels at one-dimensional layouts (rows or columns) and is ideal for component-level layouts like navigation bars and cards. Grid handles two-dimensional layouts (rows and columns simultaneously) and works best for page-level layouts and complex designs. Key differences include Flexbox being content-first and flow-driven, while Grid is container-first with precise element placement. The guide covers essential properties like flex-direction, justify-content, align-items for Flexbox, and grid-template-areas, subgrid for Grid. Best practice is using Grid for macro-layouts and Flexbox for micro-layouts within components.

    33

    3
19. 19
    Article

    CSS-Tricks·50w

    Creating an Auto-Closing Notification With an HTML Popover

    Learn how to create auto-closing notifications using HTML popover attributes combined with CSS transitions and JavaScript ResizeObserver. The technique uses CSS height transitions with @starting-style and transition-delay to visually hide the popover, while ResizeObserver detects when the animation completes to properly close the popover element. Includes fallback strategies for when JavaScript is disabled.

    32
20. 20
    Article

    Community Picks·49w

    civilblur/mazanoke: A self-hosted local image optimizer that runs in your browser.

    MAZANOKE is a browser-based image optimizer that processes images locally without uploading them to external servers. It supports multiple image formats (JPG, PNG, WebP, HEIC, etc.), removes EXIF data for privacy, and works offline. The tool can be deployed via Docker, run locally from downloaded files, or installed as a progressive web app. It offers quality adjustment, file size targeting, dimension controls, and clipboard integration while maintaining complete privacy by keeping all processing on-device.

    32

    1
21. 21
    Article

    80 LEVEL·49w

    Man Joked He Was Fired for Apple's New Liquid Glass Design

    Apple introduced Liquid Glass, a semi-transparent design at WWDC25 that drew comparisons to Windows Vista's Aero interface. A developer named Jon Yongfook successfully trolled the internet by falsely claiming Apple fired him for the design, leading some outlets to report it as real news. The design sparked various recreation attempts by artists using CSS, SVG, and Blender, with notable contributions from Blender creator Jesse Miettinen who created a glass-like interface parody.

    30

    8
22. 22
    Article

    LogRocket·49w

    7 common CSS navigation menu mistakes and how to fix them

    Navigation menus commonly suffer from seven key issues: dropdowns that disappear too quickly when users move their cursor, over-reliance on absolute positioning without proper constraints, using only hover states which breaks mobile functionality, inadequate touch target sizes below WCAG guidelines, hiding elements with display:none which breaks screen reader access, poor stacking context management causing z-index conflicts, and non-responsive layouts that break on smaller screens. Each problem can be solved with specific CSS techniques like transition delays, proper positioning contexts, focus-within selectors, minimum 44px touch targets, opacity/visibility combinations, intentional z-index usage, and flexible layouts.

    28
23. 23
    Article

    CSS-Tricks·47w

    CSS Blob Recipes

    Explores multiple techniques for creating blob shapes in CSS, comparing border-radius manipulation, SVG filters with multiple backgrounds, and the new CSS shape() function. Each method is evaluated based on single-element implementation, design ease, and compatibility with CSS effects like gradients and shadows. The shape() function emerges as the most promising approach, offering single-element blobs with gradient support, though it has limitations with borders and shadows due to clip-path behavior.

    27
24. 24
    Article

    Frontend Masters·49w

    Grainy Gradients – Frontend Masters Blog

    Explores advanced techniques for eliminating gradient banding by using SVG displacement maps instead of traditional noise layering. The approach uses feTurbulence and feDisplacementMap to create grainy effects without altering the original gradient colors, offering better visual results than previous methods that darkened or oversaturated gradients.

    26
25. 25
    Article

    Community Picks·50w

    State of CSS 2025

    The State of CSS 2025 survey is now open, aiming to track adoption of recent CSS features like subgrid, :has(), and scroll-driven animations. The survey organizers advocate for a slower pace of CSS innovation to allow developers time to master existing features and for browser vendors to consolidate improvements. The survey takes 15-20 minutes to complete and helps inform browser roadmaps and developer technology choices. Results will be released after the survey closes on July 1, 2025.

    26