Best of CSS — May 2025

1. 1
   Article

   RUBYLAND·51w

   10 Modern CSS Features You Want to Use

   Modern CSS has evolved significantly with new features that reduce the need for preprocessors and frameworks. Key additions include mathematical functions (min, max, clamp) for responsive sizing, container queries for component-based responsive design, text-wrap properties for better typography, @starting-style for animating from display:none, :has() selector for parent styling based on children, simplified media query ranges, light-dark() function for theme switching, color-scheme property for system UI theming, native nesting support, new viewport units (dvh, svh, lvh) for mobile browsers, and @layer for managing CSS specificity conflicts.

   346

   6
2. 2
   Article

   Web Tools Weekly·1y

   CSS Tools, JSON, Databases, Uncats

   This post highlights various web tools related to CSS and HTML, JSON, databases, and other uncategorizable applications. It presents features like color palette creation, ER diagram generation, database management, and content moderation. A section on commercial apps and classifieds offers insights into different productivity tools and frameworks.

   191

   3
3. 3
   Article

   Hacker News·52w

   CSS Minecraft

   Explore a Minecraft clone designed using only HTML and CSS, with no JavaScript involved. For optimal performance, close other tabs and programs. The project utilizes the CSS :has() pseudo-class, requiring an updated browser version for proper functionality.

   174

   11
4. 4
   Article

   Hacker News·51w

   My website is ugly because I made it

   A developer shares their philosophy on creating personal websites, emphasizing authenticity over perfection. They detail specific CSS techniques used to make their site unique, including rotating navigation links with different fonts, adding texture with CSS-generated dots, and creating hover effects. The piece advocates for embracing imperfection and personal expression in web design rather than following conventional design standards.

   141

   15
5. 5
   Video

   Joy of Code·1y

   Animated 3D Sphere Intersection Using CSS And Trigonometry

   Learn step-by-step how to construct a dynamic and animated 3D sphere intersection using CSS and trigonometry principles. Explore techniques for styling elements with gradients, positioning in 3D space, and using transformations. Discover how to dynamically animate circles with trigonometric calculations to achieve pulsating effects.

   135

   2
6. 6
   Video

   Kevin Powell·1y

   5 CSS tips every developer should know

   Discover five CSS features that can enhance your code by reducing JavaScript reliance and solving common design problems efficiently. Learn to utilize single color gradients for borders, effective use of user select, mastering the 'all' property for style resets, innovating with CSS masks, and employing anchor positioning for consistent element placement.

   104

   1
7. 7
   Article

   LogRocket·52w

   6 CSS animation libraries to bring your project to life in 2025

   Explore six CSS animation libraries that offer powerful solutions for web developers in 2025. These libraries simplify the process of adding smooth transitions, engaging interactions, and eye-catching effects. The libraries discussed include Animista, Animate CSS, AnimXYZ, Whirl, Moving Letters, and LDRS, each with unique strengths and compatibility with various JavaScript frameworks. Whether you're working on small projects or large-scale applications, these tools can enhance user experience and streamline frontend development.

   84

   4
8. 8
   Article

   CSS-Tricks·1y

   Why is Nobody Using the hwb() Color Function?

   The hwb() color function in CSS, although designed to be intuitive by controlling whiteness and blackness, has seen declining usage due to common familiarity and more intuitive alternatives like hsl(). Newer color functions such as lab() and oklch() offer broader color ranges and perceptual uniformity, making them preferred options over hwb(). Though hwb() had a steep decline in adoption, it's still maintained for backward compatibility.

   68

   5
9. 9
   Article

   Community Picks·52w

   Tailwind CSS Gradient Generator & Text Gradients & Glassmorphism Generator

   Gradienty offers a Tailwind CSS Gradient Generator for creating visually appealing designs with customizable gradients. It features a collection of over 20,000 gradients suitable for vibrant and eye-catching web design projects.

   60

   2
10. 10
    Article

    web.dev·52w

    Visual Studio Code now supports Baseline

    Visual Studio Code has introduced Baseline support, enabling developers to easily view browser compatibility information by hovering over web features. This update, available in version 1.100, provides detailed insights into HTML and CSS element support across browsers. Additionally, linters in VS Code can highlight non-Baseline features, further aiding development productivity.

    55

    1
11. 11
    Article

    Community Picks·1y

    Wave UI

    Wave UI is a flexible and customizable framework that offers improved control over CSS, especially when using Sass. It provides modern design features, is fully responsive, and ensures accessibility.

    54

    3
12. 12
    Article

    Chrome Developers·1y

    How to style console logs in Chrome DevTools: Color and more!

    Discover methods to enhance the appearance of console logs in Chrome DevTools by using specifiers, ANSI escape sequences, and CSS styling techniques.

    53

    1
13. 13
    Article

    Josh W Comeau·1y

    The Height Enigma • Josh W. Comeau

    Josh W. Comeau explores the often confusing behavior of percentage-based heights in CSS, revealing the circular dependency issue when elements try to calculate sizes based on one another. Solutions involve using explicit sizes for parent elements or leveraging CSS layout modes like Flexbox and Grid to resolve height issues while avoiding fixed pixel heights, which affect accessibility. These insights help ensure smoother and more predictable CSS layout designs.

    51
14. 14
    Article

    All Tailwind CSS·1y

    50+ Tailwind CSS Templates, Components & Tools 💯

    Discover a curated collection of Tailwind CSS resources including templates, components, and UI kits designed to enhance your web development projects. Submit your tailwind-related projects to be featured on the platform.

    49

    5
15. 15
    Article

    CSS Tip·1y

    SVG to CSS Shape Converter

    This post introduces an online tool that converts SVG shapes into CSS using the clip-path property. The generator is responsive and simplifies the coding process by fitting the shape into the smallest rectangle without manual viewBox adjustments.

    48

    4
16. 16
    Article

    Sara Soueidan·1y

    Are 'CSS Carousels' accessible?

    The post examines the accessibility of CSS Carousels, highlighting concerns that these implementations often fail to meet necessary accessibility standards, particularly for screen reader and keyboard navigation. It encourages developers to understand the impact of new CSS features on web accessibility and stresses the importance of semantic HTML and ARIA roles. The author advocates for native HTML elements that inherently carry the necessary semantics and interactive behaviors.

    47

    2
17. 17
    Article

    WebKit·1y

    Two lines of Cross-Document View Transitions code you can use on every website today

    Cross-Document View Transitions enhance the navigation experience by enabling elements to persist across page transitions on websites, using just two lines of CSS code. This reduces the visual disruption between pages, creating a seamless transition effect. With browser support in Safari 18.2, Chrome 126, and Edge 126, it's accessible to most users. Considerations for motion sensitivity are discussed to ensure accessibility.

    42

    1
18. 18
    Video

    As a Programmer·1y

    HTML, CSS & JavaScript Bootcamp - 10 HOURS & 15 PROJECTS 🤯

    This bootcamp offers a comprehensive guide to building 15 projects using HTML, CSS, and JavaScript over 10 hours. The projects are beginner-friendly and include a quiz app, expense tracker, and more. The tutorial is detailed, with step-by-step explanations and free source code available for each project. Participants can practice skills in web development tools and methodologies, with an option to explore a premium course for building advanced full-stack applications.

    35
19. 19
    Article

    CSS-Tricks·1y

    Scroll-Driven Animations Inside a CSS Carousel

    CSS Carousels can be enhanced with scroll-driven animations, allowing animations to trigger as carousel items scroll into view. This technique involves defining keyframes and applying them using the animation-timeline property. While CSS Scroll Snapping is used for smooth scrolling, it can interfere when scroll-based animations are applied. Using view() timelines results in smoother animations but does not resolve the conflict with smooth scrolling.

    29
20. 20
    Article

    CSS-Tricks·1y

    SVG to CSS Shape Converter

    Temani Afif has developed a generator that converts SVG path commands to the new CSS shape() function, which is now supported in Chromium and Safari browsers. This tool is particularly useful for learning how the shape() function works, although its necessity might decrease as shape() becomes more common in web design.

    25
21. 21
    Article

    CSS-Tricks·1y

    CSS shape() Commands

    The CSS shape() function now supported in Chromium and WebKit browsers, allows developers to draw complex shapes using the clip-path property. Unlike the path() function, which utilizes SVG commands, shape() uses simpler commands and CSS units for drawing, making it more accessible. The function supports a variety of commands like line, arc, and curve, enhancing its flexibility for web design.

    20
22. 22
    Article

    HeydonWorks·51w

    The col element

    The HTML col element, used with colgroup, allows grouping table columns but creates complex, poorly supported structures. The element's behavior is counterintuitive - it doesn't contain columns but sets a schema for groupings, and CSS classes applied to col elements mysteriously affect other table cells. Screen reader support for spanned and grouped columns is unreliable across different assistive technologies. Simple table headers without complex grouping provide better accessibility and user comprehension than elaborate column structures.

    19

    2
23. 23
    Article

    Codrops·51w

    Animated Product Grid Preview with GSAP & Clip-Path

    Learn to transform a simple product grid into an interactive, animated experience using GSAP and CSS clip-path. This tutorial breaks down the process into manageable steps, from setting up the initial layout to implementing hover interactions and animating clip-paths. Attention is given to enhancing usability and accessibility, ensuring a smooth user experience.

    15
24. 24
    Article

    All Tailwind CSS·1y

    🧑‍💻 How Tailwind CSS Helped Me Build Responsive UIs Faster

    Tailwind CSS is a utility-first CSS framework that simplifies building responsive user interfaces. By using predefined classes, developers can style elements directly in their HTML, reducing the need for custom CSS and separate files. This framework makes responsive design easier with breakpoints and eliminates the complexity of media queries. Tailwind is especially beneficial for beginners, making the learning process smoother and more enjoyable.

    15

    9
25. 25
    Article

    CSS-Tricks·51w

    Better CSS Shapes Using shape() — Part 2: More on Arcs

    Explores advanced techniques for creating complex shapes using the CSS shape() function, specifically focusing on the arc command. Covers creating sector shapes for pie charts, arc shapes with variable thickness, and rounded edge variations. Demonstrates how to handle arc direction and size parameters, use conditional logic with CSS, and work around browser limitations. Includes practical examples with mathematical formulas for positioning points on circles and techniques for creating interactive, customizable shapes.

    13