<p>This article is a sponsored by <a href="https://www.smashingmagazine.com/undefined">Accessible UX Research</a></p> <p>Smashing Library expands again! We’re so happy to announce our newest book, <strong><em>Accessible UX Research</em></strong>, is now <strong>available for download</strong> in eBook formats. Michele A. Williams takes us for a deep dive into the real world of UX testing, and provides a road map for including users with different abilities and needs in every phase of testing.</p> <p>But the truth is, you don’t need to be conducting UX testing or even be a UX professional to get a lot out of this book. Michele gives in-depth descriptions of the <strong>assistive technology we should all be familiar with</strong>, in addition to disability etiquette, common pitfalls when creating accessible prototypes, and so much more. You’ll refer to this book again and again in your daily work.</p> <a href="https://files.smashing.media/articles/accessible-ux-research-pre-release/accessible-ux-research-coming-soon-light-opt.png"> <img src="https://files.smashing.media/articles/accessible-ux-research-pre-release/accessible-ux-research-coming-soon-light-varnish-opt.png"></a> <p>This is also your last chance to get your printed copy at our discounted presale price. We expect printed copies to start <strong>shipping in early 2026</strong>. We know you’ll love this book, but don’t just take our word for it — we asked a few industry experts to check out <em>Accessible UX Research</em> too:</p> <blockquote> <img src="https://files.smashing.media/articles/accessible-ux-research-pre-release/eric-bailey-opt.png">“<em>Accessible UX Research</em> stands as a vital and necessary resource. In addressing disability at the User Experience Research layer, it helps to set an equal and equitable tone for products and features that resonates through the rest of the creation process. The book provides a <strong>solid framework</strong> for all aspects of conducting research efforts, including not only process considerations, but also importantly the mindset required to approach the work.<br><br>This is <strong>the book I wish I had</strong> when I was first getting started with my accessibility journey. It is a gift, and I feel so fortunate that Michele has chosen to share it with us all.”<br><br>Eric Bailey, Accessibility Advocate</blockquote> <blockquote> <img src="https://files.smashing.media/articles/accessible-ux-research-pre-release/devon-pershing-opt.png">“User research in accessibility is non-negotiable for actually meeting users’ needs, and this book is a <strong>critical piece in the puzzle</strong> of actually doing and integrating that research into accessibility work day to day.”<br><br>Devon Pershing, Author of <em>The Accessibility Operations Guidebook</em> </blockquote> <blockquote> <img src="https://files.smashing.media/articles/accessible-ux-research-pre-release/manuel-matuzovic-opt.png">“Our decisions as developers and designers are often based on recommendations, assumptions, and biases. Usually, this doesn’t work, because checking off lists or working solely from our own perspective can never truly represent the <strong>depth of human experience</strong>. Michele’s book provides you with the strategies you need to conduct UX research with diverse groups of people, challenge your assumptions, and create truly great products.”<br><br>Manuel Matuzović, Author of the <em>Web Accessibility Cookbook</em> </blockquote> <blockquote> <img src="https://files.smashing.media/articles/accessible-ux-research-pre-release/anna-e-cook-opt.png">“This book is a vital resource on inclusive research. Michele Williams expertly breaks down key concepts, guiding readers through disability models, language, and etiquette. A <strong>strong focus on real-world application</strong> equips readers to conduct impactful, inclusive research sessions. By emphasizing diverse perspectives and proactive inclusion, the book makes a compelling case for accessibility as a core principle rather than an afterthought. It is a must-read for researchers, product-makers, and advocates!”<br><br>Anna E. Cook, Accessibility and Inclusive Design Specialist</blockquote> About The Book <p>The book isn’t a checklist for you to complete as a part of your accessibility work. It’s a <strong>practical guide to inclusive UX research</strong>, from start to finish. If you’ve ever felt unsure how to include disabled participants, or worried about “getting it wrong,” this book is for you. You’ll get clear, practical strategies to make your research more inclusive, effective, and reliable.</p> <p>Inside, you’ll learn how to:</p> <ul> <li> <strong>Plan research</strong> that includes disabled participants from the start,</li> <li> <strong>Recruit participants</strong> with disabilities,</li> <li> <strong>Facilitate sessions</strong> that work for a range of access needs,</li> <li> <strong>Ask better questions</strong> and avoid unintentionally biased research methods,</li> <li> <strong>Build trust and confidence</strong> in your team around accessibility and inclusion.</li> </ul> <p>The book also challenges common assumptions about disability and urges readers to <strong>rethink what inclusion really means</strong> in UX research and beyond. Let’s move beyond compliance and start doing research that reflects the full diversity of your users. Whether you’re in industry or academia, this book gives you the tools — and the mindset — to make it happen.</p> <p>High-quality hardcover, 320 pages. Written by Dr. Michele A. Williams. Cover art by Espen Brunborg. <strong>Print edition shipping early 2026.</strong> eBook now available for download. <a href="https://smashed.by/accessibleresearchsample">Download a free sample</a> (PDF, 2.3MB) and <a href="https://www.smashingmagazine.com/printed-books/accessible-ux-research/">reserve your print copy at the presale price.</a></p> <a href="https://files.smashing.media/articles/accessible-ux-research-ebook-release/accessible-ux-research-inside-the-book-1-opt.png"> <img src="https://files.smashing.media/articles/accessible-ux-research-ebook-release/accessible-ux-research-inside-the-book-1-opt.png"></a>“Accessible UX Research” shares successful strategies that’ll help you recruit the participants you need for the study you’re designing. (<a href="https://files.smashing.media/articles/accessible-ux-research-ebook-release/accessible-ux-research-inside-the-book-1-opt.png">Large preview</a>) Contents <ol> <li> <strong>Disability mindset</strong>: For inclusive research to succeed, we must first confront our mindset about disability, typically influenced by ableism.</li> <li> <strong>Diversity of disability</strong>: Accessibility is not solely about blind screen reader users; disability categories help us unpack and process the diversity of disabled users.</li> <li> <strong>Disability in the stages of UX research</strong>: Disabled participants can and should be part of every research phase — formative, prototype, and summative.</li> <li> <strong>Recruiting disabled participants</strong>: Recruiting disabled participants is not always easy, but that simply means we need to learn strategies on where to look.</li> <li> <strong>Designing your research</strong>: While our goal is to influence accessible products, our research execution must also be accessible.</li> <li> <strong>Facilitating an accessible study</strong>: Preparation and communication with your participants can ensure your study logistics run smoothly.</li> <li> <strong>Analyzing and reporting with accuracy and impact</strong>: How you communicate your findings is just as important as gathering them in the first place — so prepare to be a storyteller, educator, and advocate.</li> <li> <strong>Disability in the UX research field</strong>: Inclusion isn’t just for research <em>participants</em>, it’s important for our <em>colleagues</em> as well, as explained by blind UX Researcher Dr. Cynthia Bennett.</li> </ol> <a href="https://files.smashing.media/articles/accessible-ux-research-ebook-release/accessible-ux-research-inside-the-book-2-opt.png"> <img src="https://files.smashing.media/articles/accessible-ux-research-ebook-release/accessible-ux-research-inside-the-book-2-opt.png"></a>The book will challenge your disability mindset and what it means to be truly inclusive in your work. (<a href="https://files.smashing.media/articles/accessible-ux-research-ebook-release/accessible-ux-research-inside-the-book-2-opt.png">Large preview</a>) Who This Book Is For <p>Whether a UX professional who conducts research in industry or academia, or more broadly part of an engineering, product, or design function, you’ll want to read this book if…</p> <ol> <li>You have been tasked to <strong>improve accessibility of your product</strong>, but need to know where to start to facilitate this successfully.</li> <li>You want to establish a <strong>culture for accessibility</strong> in your company, but not sure how to make it work.</li> <li>You want to <strong>move from WCAG/EAA compliance</strong> to established accessibility practices and inclusion in research practices and beyond.</li> <li>You want to <strong>improve your overall accessibility knowledge</strong> and be viewed as an Accessibility Specialist for your organization.</li> </ol> <a href="https://files.smashing.media/articles/accessible-ux-research-pre-release/accessible-ux-research-kind-support-light-opt.png"> <img src="https://files.smashing.media/articles/accessible-ux-research-pre-release/accessible-ux-research-kind-support-light-varnish-opt.png"></a> About the Author <p><a href="https://mawconsultingllc.com/"><img src="https://files.smashing.media/articles/accessible-ux-research-pre-release/michele-williams-opt.png"></a>Dr. Michele A. Williams is owner of <a href="https://mawconsultingllc.com/">M.A.W. Consulting, LLC - Making Accessibility Work</a>. Her 20+ years of experience include influencing top tech companies as a Senior User Experience (UX) Researcher and Accessibility Specialist and obtaining a PhD in Human-Centered Computing focused on accessibility. An international speaker, <a href="https://scholar.google.com/citations?user=1IfsBJEAAAAJ&amp;hl=en">published academic author</a>, and <a href="https://patents.justia.com/patent/10854103">patented inventor</a>, she is passionate about educating and advising on technology that does not exclude disabled users.</p> Technical Details <ul> <li>ISBN: 978-3-910835-03-0 (print)</li> <li> <strong>Quality hardcover</strong>, stitched binding, ribbon page marker.</li> <li>Free worldwide airmail <strong>shipping from Germany early 2026</strong>. We are currently <strong>unable to ship printed books to the United States</strong> due to customs clearance issues. If you have any questions, please <a href="mailto:help@smashingmagazine.com">contact us any time</a>.</li> <li>eBook now available for download as <strong>PDF, ePUB, and Amazon Kindle</strong>.</li> <li><strong><a href="https://www.smashingmagazine.com/ebooks/accessible-ux-research-ebook/">Order the eBook for instant download now.</a></strong></li> <li><strong><a href="https://www.smashingmagazine.com/printed-books/accessible-ux-research/">Reserve your print copy at the presale price.</a></strong></li> </ul> Community Matters ❤️ <p>Producing a book takes quite a bit of time, and we couldn’t pull it off without the support of our wonderful <strong>community</strong>. A huge shout-out to Smashing Members for the kind, ongoing support. The eBook is and always will be <a href="https://www.smashingmagazine.com/membership">free for <em>Smashing Members</em></a>. Plus, Members get a friendly discount when purchasing their printed copy. Just sayin’! ;-)</p> More Smashing Books &amp; Goodies <p>Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been (and will be) at the <strong>core of everything we do</strong> at Smashing.</p> <p>In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as <a href="https://www.smashingmagazine.com/printed-books/">printed books that stand the test of time</a>. Trine, Heather, and Steven are three of these people. Have you checked out their books already?</p> <div> <div><a href="https://www.smashingmagazine.com/printed-books/ethical-design-handbook/"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1f1cc2de-e6ed-4262-a1cb-cc0b2d4e3243/ethical-design-cover-shop-opt.png"></a></div> <h4><a href="https://www.smashingmagazine.com/printed-books/ethical-design-handbook/">The Ethical Design Handbook</a></h4> <p>A practical guide on ethical design for digital products.</p> <p><a href="https://www.smashingmagazine.com/printed-books/ethical-design-handbook/">Add to cart $44</a></p> <div><a href="https://www.smashingmagazine.com/printed-books/understanding-privacy/"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d2da7a90-acdb-43c7-82b2-5225c33ca4d7/understanding-privacy-cover-new-opt.png"></a></div> <h4><a href="https://www.smashingmagazine.com/printed-books/understanding-privacy/">Understanding Privacy</a></h4> <p>Everything you need to know to put your users first and make a better web.</p> <p><a href="https://www.smashingmagazine.com/printed-books/understanding-privacy/">Add to cart $44</a></p> <div><a href="https://www.smashingmagazine.com/printed-books/touch-design-for-mobile-interfaces/"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b14658fc-bb2d-41a6-8d1a-70eaaf1b8ec8/touch-design-book-shop-opt.png"></a></div> <h4><a href="https://www.smashingmagazine.com/printed-books/touch-design-for-mobile-interfaces/">Touch Design for Mobile Interfaces</a></h4> <p>Learn how touchscreen devices really work — and how people really use them.</p> <p><a href="https://www.smashingmagazine.com/printed-books/touch-design-for-mobile-interfaces/">Add to cart $44</a></p> </div>

<p>If I were to divide CSS evolutions into categories, we have moved far beyond the days when we simply asked for <code>border-radius</code> to feel like we were living in the future. We are currently living in a moment where the platform is handing us tools that don’t just tweak the visual layer, but fundamentally redefine how we architect interfaces. I thought the number of features announced in 2024 couldn’t be topped. I’ve never been so happily wrong.</p> <p>The Chrome team’s “<a href="https://chrome.dev/css-wrapped-2025/"><strong>CSS Wrapped 2025</strong></a>” is not just a list of features; it is a manifesto for a dynamic, native web. As someone who has spent a couple of years documenting these evolutions — from <a href="https://www.smashingmagazine.com/2024/08/css5-era-evolution/">defining “CSS5” eras</a> to the intricacies of <a href="https://www.smashingmagazine.com/2024/05/modern-css-layouts-no-framework/">modern layout utilities</a> — I find myself looking at this year’s wrap-up with a huge sense of excitement. We are seeing a shift towards “Optimized Ergonomics” and “Next-gen interactions” that allow us to stop fighting the code and start sculpting interfaces in their natural state.</p> <p>In this article, you can find <strong>a comprehensive look at the standout features from Chrome’s report</strong>, viewed through the lens of my recent experiments and hopes for the future of the platform.</p> The Component Revolution: Finally, A Native Customizable Select <p>For years, we have relied on heavy JavaScript libraries to style dropdowns, a “decades-old problem” that the platform has finally solved. As I detailed in <a href="https://utilitybend.com/blog/the-customizable-select-part-one-history-trickery-and-styling-the-select-with-css">my deep dive into the history of the customizable select</a> (and related articles), this has been a long road involving <a href="https://open-ui.org/">Open UI</a>, bikeshedding names like <code>&lt;selectmenu&gt;</code> and <code>&lt;selectlist&gt;</code>, and finally landing on a solution that re-uses the existing <code>&lt;select&gt;</code> element.</p> <p>The introduction of <code>appearance: base-select</code> is a strong foundation. It allows us to fully customize the <code>&lt;select&gt;</code> element — including the button and the dropdown list (via <code>::picker(select)</code>) — using standard CSS. Crucially, this is built with progressive enhancement in mind. By wrapping our styles in a feature query, we ensure a seamless experience across all browsers.</p> <p>We can opt in to this new behavior without breaking older browsers:</p> <pre><code>select { /* Opt-in for the new customizable select */ @supports (appearance: base-select) { &amp;, &amp;::picker(select) { appearance: base-select; } } } </code></pre> <p>The fantastic addition to allow rich content inside options, such as images or flags, is a lot of fun. We can create all sorts of selects nowadays: </p> <ul> <li> <strong>Demo:</strong> I created a <a href="https://codepen.io/utilitybend/pen/ByawgNN">Poké-adventure demo</a> showing how the new <code>&lt;selectedcontent&gt;</code> element can clone rich content (like a Pokéball icon) from an option directly into the button.</li> </ul> <p>See the Pen <a href="https://codepen.io/smashingmag/pen/JoXwwoZ">A customizable select with images inside of the options and the selectedcontent [forked]</a> by <a href="https://codepen.io/utilitybend">utilitybend</a>.</p> <ul> <li> <strong>Demo:</strong> A comprehensive look at <a href="https://codepen.io/utilitybend/pen/GgRrLWb">styling the select with only pseudo-elements</a>.</li> </ul> <p>See the Pen <a href="https://codepen.io/smashingmag/pen/pvyqqJR">A customizable select with only pseudo-elements [forked]</a> by <a href="https://codepen.io/utilitybend">utilitybend</a>.</p> <ul> <li> <strong>Demo:</strong> Or you can kick it up a notch with this <a href="https://codepen.io/utilitybend/pen/ByoBMBm">Menu selection demo using optgroups</a>.</li> </ul> <p>See the Pen <a href="https://codepen.io/smashingmag/pen/myPaaJZ">An actual Select Menu with optgroups [forked]</a> by <a href="https://codepen.io/utilitybend">utilitybend</a>.</p> <p>This feature alone signals a massive shift in how we will build forms, reducing dependencies and technical debt.</p> Scroll Markers And The Death Of The JavaScript Carousel <p>Creating carousels has historically been a friction point between developers and clients. Clients love them, developers dread the JavaScript required to make them accessible and performant. The arrival of <code>::scroll-marker</code> and <code>::scroll-button()</code> pseudo-elements changes this dynamic entirely.</p> <p>These features allow us to create navigation dots and scroll buttons purely with CSS, linked natively to the scroll container. As I wrote on my blog, this was <a href="https://utilitybend.com/blog/love-at-first-slide-creating-a-carousel-purely-out-of-css">Love at first slide</a>. The ability to create a fully functional, accessible slider without a single line of JavaScript is not just convenient; it is a triumph for performance. There are some accessibility concerns around this feature, and even though these are valid, there might be a way for us developers to make it work. The good thing is, all these UI changes are making it a lot easier than custom DOM manipulation and dragging around aria tags, but I digress…</p> <p>We can now group markers automatically using <code>scroll-marker-group</code> and style the buttons using anchor positioning to place them exactly where we want.</p> <div> <pre><code>.carousel { overflow-x: auto; scroll-marker-group: after; /* Creates the container for dots */ /* Create the buttons */ &amp;::scroll-button(inline-end), &amp;::scroll-button(inline-start) { content: " "; position: absolute; /* Use anchor positioning to center them */ position-anchor: --carousel; top: anchor(center); } /* Create the markers on the children */ div { &amp;::scroll-marker { content: " "; width: 24px; border-radius: 50%; cursor: pointer; } /* Highlight the active marker */ &amp;::scroll-marker:target-current { background: white; } } } </code></pre> </div> <ul> <li> <strong>Demo:</strong> My experiment creating a <a href="https://codepen.io/utilitybend/pen/vEBQxNb">carousel purely out of HTML and CSS</a>, using anchor positioning to place the buttons.</li> </ul> <p>See the Pen <a href="https://codepen.io/smashingmag/pen/ogxJJjQ">Carousel Pure HTML and CSS [forked]</a> by <a href="https://codepen.io/utilitybend">utilitybend</a>.</p> <ul> <li> <strong>Demo:</strong> A <a href="https://codepen.io/utilitybend/pen/bNbXZWb">Webshop slick slider remake</a> using <code>attr()</code> to pull background images dynamically into the markers.</li> </ul> <p>See the Pen <a href="https://codepen.io/smashingmag/pen/gbrZZPY">Webshop slick slider remake in CSS [forked]</a> by <a href="https://codepen.io/utilitybend">utilitybend</a>.</p> State Queries: Sticky Thing Stuck? Snappy Thing Snapped? <p>For a long time, we have lacked the ability to know if a <a href="https://utilitybend.com/blog/is-the-sticky-thing-stuck-is-the-snappy-item-snapped-a-look-at-state-queries-in-css">“sticky thing is stuck” or if a “snappy item is snapped”</a> without relying on IntersectionObserver hacks. Chrome 133 introduced scroll-state queries, allowing us to query these states declaratively.</p> <p>By setting <code>container-type: scroll-state</code>, we can now style children based on whether they are stuck, snapped, or overflowing. This is a massive “quality of life” improvement that I have been eagerly waiting for since CSS Day 2023. It has even evolved a lot since we can also see the direction of the scroll, lovely!</p> <p>For a simple example: we can finally apply a shadow to a header <em>only</em> when it is actually sticking to the top of the viewport:</p> <pre><code>.header-container { container-type: scroll-state; position: sticky; top: 0; header { transition: box-shadow 0.5s ease-out; /* The query checks the state of the container */ @container scroll-state(stuck: top) { box-shadow: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px; } } } </code></pre> <ul> <li> <strong>Demo:</strong> A <a href="https://codepen.io/utilitybend/pen/XWLQPOe">sticky header</a> that only applies a shadow when it is actually stuck.</li> </ul> <p>See the Pen <a href="https://codepen.io/smashingmag/pen/raeooxY">Sticky headers with scroll-state query, checking if the sticky element is stuck [forked]</a> by <a href="https://codepen.io/utilitybend">utilitybend</a>.</p> <ul> <li> <strong>Demo:</strong> A <a href="https://codepen.io/utilitybend/pen/MWMZoqp">Pokémon-themed list</a> that uses scroll-state queries combined with anchor positioning to move a frame over the currently snapped character.</li> </ul> <p>See the Pen <a href="https://codepen.io/smashingmag/pen/vEGvvLM">Scroll-state query to check which item is snapped with CSS, Pokemon version [forked]</a> by <a href="https://codepen.io/utilitybend">utilitybend</a>.</p> Optimized Ergonomics: Logic In CSS <p>The “Optimized Ergonomics” section of CSS Wrapped highlights features that make our workflows more intuitive. Three features stand out as transformative for how we write logic:</p> <ol> <li> <strong><code>if()</code> Statements</strong><br>We are finally getting conditionals in CSS. The <code>if()</code> function acts like a ternary operator for stylesheets, allowing us to apply values based on media, support, or style queries inline. This reduces the need for verbose <code>@media</code> blocks for single property changes.</li> <li> <strong><code>@function</code> functions</strong><br>We can finally move some logic to a different place, resulting in some cleaner files, a real quality of life feature.</li> <li> <strong><code>sibling-index()</code> and <code>sibling-count()</code></strong><br>These tree-counting functions solve the issue of staggering animations or styling items based on list size. As I explored in <a href="https://utilitybend.com/blog/styling-siblings-with-css-has-never-been-easier-experimenting-with-sibling-count-and-sibling-index">Styling siblings with CSS has never been easier</a>, this eliminates the need to hard-code custom properties (like <code>--index: 1</code>) in our HTML.</li> </ol> <h3>Example: Calculating Layouts</h3> <p>We can now write concise mathematical formulas. For example, staggering an animation for cards entering the screen becomes trivial:</p> <pre><code>.card-container &gt; * { animation: reveal 0.6s ease-out forwards; /* No more manual --index variables! */ animation-delay: calc(sibling-index() * 0.1s); } </code></pre> <p>I even experimented with using these functions along with trigonometry to place items in a perfect circle without any JavaScript.</p> <ul> <li> <strong>Demo:</strong> <a href="https://codepen.io/utilitybend/pen/wBKQPLr">Staggering card animations dynamically</a>.</li> </ul> <p>See the Pen <a href="https://codepen.io/smashingmag/pen/RNaEERz">Stagger cards using sibling-index() [forked]</a> by <a href="https://codepen.io/utilitybend">utilitybend</a>.</p> <ul> <li> <strong>Demo:</strong> Placing items in a <a href="https://codepen.io/utilitybend/pen/VYvVXLN">perfect circle</a> using <code>sibling-index</code>, <code>sibling-count</code>, and the new CSS <code>@function</code> feature.</li> </ul> <p>See the Pen <a href="https://codepen.io/smashingmag/pen/XJdoojZ">The circle using sibling-index, sibling-count and functions [forked]</a> by <a href="https://codepen.io/utilitybend">utilitybend</a>.</p> My CSS To-Do List: Features I Can’t Wait To Try <p>While I have been busy sculpting selects and transitions, the “CSS Wrapped 2025” report is packed with other goodies that I haven’t had the chance to fire up in CodePen yet. These are high on my list for my next experiments:</p> <h3>Anchored Container Queries</h3> <p>I used CSS Anchor Positioning for the buttons in my carousel demo, but “CSS Wrapped” highlights an evolution of this: <strong>Anchored Container Queries</strong>. This solves a problem we’ve all had with tooltips: if the browser flips the tooltip from top to bottom because of space constraints, the “arrow” often stays pointing the wrong way. With anchored container queries (<code>@container anchored(fallback: flip-block)</code>), we can style the element based on which fallback position the browser actually chose.</p> <h3>Nested View Transition Groups</h3> <p>View Transitions have been a revolution, but they came with a specific trade-off: they flattened the element tree, which often broke 3D transforms or overflow: clip. I always had a feeling that it was missing something, and this might just be the answer. By using <code>view-transition-group: nearest</code>, we can finally nest transition groups within each other.</p> <p>This allows us to maintain clipping effects or 3D rotations during a transition — something that was previously impossible because the elements were hoisted up to the top level.</p> <pre><code>.card img { view-transition-name: photo; view-transition-group: nearest; /* Keep it nested! */ } </code></pre> <h3>Typography and Shapes</h3> <p>Finally, the ergonomist in me is itching to try <strong>Text Box Trim</strong>, which promises to remove that annoying extra whitespace above and below text content (the leading) to finally achieve perfect vertical alignment. And for the creative side, <code>corner-shape</code> and the <code>shape()</code> function are opening up non-rectangular layouts, allowing for “squaricles” and complex paths that respond to CSS variables. That being said, I can’t wait to have a design full of squircles!</p> A Hopeful Future <p>We are witnessing a world where <strong>CSS is becoming capable of handling logic, state, and complex interactions that previously belonged to JavaScript</strong>. Features like <code>moveBefore</code> (preserving DOM state for iframes/videos) and <code>attr()</code> (using types beyond strings for colors and grids) further cement this reality.</p> <p>While some of these features are currently experimental or specific to Chrome, the momentum is undeniable. We must hope for continued support across all browsers through initiatives like Interop to ensure these capabilities become the baseline. That being said, having browser engines is just as important as having all these awesome features in “Chrome first”. These new features need to be discussed, tinkered with, and tested before ever landing in browsers.</p> <p>It is a fantastic moment to get into CSS. We are no longer just styling documents; we are crafting dynamic, ergonomic, and robust applications with a native toolkit that is more powerful than ever.</p> <p>Let’s get going with this new era and spread the word.</p> <p>This is <a href="https://chrome.dev/css-wrapped-2025/">CSS Wrapped</a>!</p>

<p>Your senior management is excited about AI. They’ve read the articles, attended the webinars, and seen the demos. They’re convinced that AI will transform your organization, boost productivity, and give you a competitive edge.</p> <p>Meanwhile, you’re sitting in your UX role wondering what this means for your team, your workflow, and your users. You might even be worried about your job security.</p> <p>The problem is that the conversation about how AI gets implemented is happening right now, and if you’re not part of it, <strong>someone else will decide how it affects your work</strong>. That someone probably doesn’t understand user experience, research practices, or the subtle ways poor implementation can damage the very outcomes management hopes to achieve.</p> <p>You have a choice. You can wait for directives to come down from above, or you can take control of the conversation and lead the AI strategy for your practice.</p> Why UX Professionals Must Own the AI Conversation <p>Management sees AI as efficiency gains, cost savings, competitive advantage, and innovation all wrapped up in one buzzword-friendly package. They’re not wrong to be excited. The technology is genuinely impressive and can deliver real value.</p> <p><strong>But without UX input, AI implementations often fail users in predictable ways:</strong></p> <ul> <li>They automate tasks without understanding the judgment calls those tasks require.</li> <li>They optimize for speed while destroying the quality that made your work valuable.</li> </ul> <p>Your expertise positions you perfectly to guide implementation. You understand users, workflows, quality standards, and the gap between what looks impressive in a demo and what actually works in practice.</p> <h3>Use AI Momentum to Advance Your Priorities</h3> <p>Management’s enthusiasm for AI creates an opportunity to advance priorities you’ve been fighting for unsuccessfully. When management is willing to invest in AI, you can connect those long-standing needs to the AI initiative. Position user research as essential for training AI systems on real user needs. Frame usability testing as the validation method that ensures AI-generated solutions actually work. </p> <p>How AI gets implemented will shape your team’s roles, your users’ experiences, and your organization’s capability to deliver quality digital products.</p> Your Role Isn’t Disappearing (It’s Evolving) <p>Yes, AI will automate some of the tasks you currently do. But someone needs to decide which tasks get automated, how they get automated, what guardrails to put in place, and how automated processes fit around real humans doing complex work.</p> <p>That someone should be <em>you</em>.</p> <p>Think about what you already do. When you conduct user research, AI might help you transcribe interviews or identify themes. But you’re the one who knows which participant hesitated before answering, which feedback contradicts what you observed in their behavior, and which insights matter most for your specific product and users.</p> <p>When you design interfaces, AI might generate layout variations or suggest components from your design system. But you’re the one who understands the constraints of your technical platform, the political realities of getting designs approved, and the edge cases that will break a clever solution.</p> <p><strong>Your future value comes from the work you’re already doing:</strong></p> <ul> <li> <strong>Seeing the full picture.</strong><br>You understand how this feature connects to that workflow, how this user segment differs from that one, and why the technically correct solution won’t work in your organization’s reality.</li> <li> <strong>Making judgment calls.</strong><br>You decide when to follow the design system and when to break it, when user feedback reflects a real problem versus a feature request from one vocal user, and when to push back on stakeholders versus find a compromise.</li> <li> <strong>Connecting the dots.</strong><br>You translate between technical constraints and user needs, between business goals and design principles, between what stakeholders ask for and what will actually solve their problem.</li> </ul> <p>AI will keep getting better at individual tasks. But you’re the person who decides which solution actually works for your specific context. The people who will struggle are those doing simple, repeatable work without understanding why. Your value is in understanding context, making judgment calls, and connecting solutions to real problems.</p> Step 1: Understand Management’s AI Motivations <p>Before you can lead the conversation, you need to understand what’s driving it. Management is responding to real pressures: cost reduction, competitive pressure, productivity gains, and board expectations.</p> <p><strong>Speak their language.</strong><br>When you talk to management about AI, frame everything in terms of ROI, risk mitigation, and competitive advantage. <em>“This approach will protect our quality standards”</em> is less compelling than <em>“This approach reduces the risk of damaging our conversion rate while we test AI capabilities.”</em></p> <p><strong>Separate hype from reality.</strong><br>Take time to research what AI capabilities actually exist versus what’s hype. Read case studies, try tools yourself, and talk to peers about what’s actually working.</p> <p><strong>Identify real pain points.</strong><br>AI might legitimately address in your organization. Maybe your team spends hours formatting research findings, or accessibility testing creates bottlenecks. These are the problems worth solving.</p> Step 2: Audit Your Current State and Opportunities <p>Map your team’s work. Where does time actually go? Look at the past quarter and categorize how your team spent their hours.</p> <p><strong>Identify high-volume, repeatable tasks versus high-judgment work.</strong><br>Repeatable tasks are candidates for automation. High-judgment work is where you add irreplaceable value.</p> <p><strong>Also, identify what you’ve wanted to do but couldn’t get approved.</strong><br>This is your opportunity list. Maybe you’ve wanted quarterly usability tests, but only get budget annually. Write these down separately. You’ll connect them to your AI strategy in the next step.</p> <p>Spot opportunities where AI could genuinely help:</p> <ul> <li> <strong>Research synthesis:</strong><br>AI can help organize and categorize findings.</li> <li> <strong>Analyzing user behavior data:</strong><br>AI can process analytics and session recordings to surface patterns you might miss.</li> <li> <strong>Rapid prototyping:</strong><br>AI can quickly generate testable prototypes, speeding up your test cycles.</li> </ul> Step 3: Define AI Principles for Your UX Practice <p>Before you start forming your strategy, establish principles that will guide every decision.</p> <p><strong>Set non-negotiables.</strong><br>User privacy, accessibility, and human oversight of significant decisions. Write these down and get agreement from leadership before you pilot anything.</p> <p><strong>Define criteria for AI use.</strong><br>AI is good at pattern recognition, summarization, and generating variations. AI is poor at understanding context, making ethical judgments, and knowing when rules should be broken.</p> <p><strong>Define success metrics beyond efficiency.</strong><br>Yes, you want to save time. But you also need to measure quality, user satisfaction, and team capability. Build a balanced scorecard that captures what actually matters.</p> <p><strong>Create guardrails.</strong><br>Maybe every AI-generated interface needs human review before it ships. These guardrails prevent the obvious disasters and give you space to learn safely.</p> Step 4: Build Your AI-in-UX Strategy <p>Now you’re ready to build the actual strategy you’ll pitch to leadership. <strong>Start small</strong> with pilot projects that have a clear scope and evaluation criteria.</p> <p><strong>Connect to business outcomes management cares about.</strong><br>Don’t pitch <em>“using AI for research synthesis.”</em> Pitch <em>“reducing time from research to insights by 40%, enabling faster product decisions.”</em></p> <p><strong>Piggyback your existing priorities on AI momentum.</strong><br>Remember that opportunity list from Step 2? Now you connect those long-standing needs to your AI strategy. If you’ve wanted more frequent usability testing, explain that AI implementations need continuous validation to catch problems before they scale. AI implementations genuinely benefit from good research practices. You’re simply using management’s enthusiasm for AI as the vehicle to finally get resources for practices that should have been funded all along.</p> <p><strong>Define roles clearly.</strong><br>Where do humans lead? Where does AI assist? Where won’t you automate? Management needs to understand that some work requires human judgment and should never be fully automated.</p> <p><strong>Plan for capability building.</strong><br>Your team will need training and new skills. Budget time and resources for this.</p> <p><strong>Address risks honestly.</strong><br>AI could generate biased recommendations, miss important context, or produce work that looks good but doesn’t actually function. For each risk, explain how you’ll detect it and what you’ll do to mitigate it.</p> Step 5: Pitch the Strategy to Leadership <p>Frame your strategy as de-risking management’s AI ambitions, not blocking them. You’re showing them how to implement AI successfully while avoiding the obvious pitfalls.</p> <p><strong>Lead with outcomes and ROI they care about.</strong><br>Put the business case up front.</p> <p><strong>Bundle your wish list into the AI strategy.</strong><br>When you present your strategy, include those capabilities you’ve wanted but couldn’t get approved before. Don’t present them as separate requests. Integrate them as essential components. <em>“To validate AI-generated designs, we’ll need to increase our testing frequency from annual to quarterly”</em> sounds much more reasonable than <em>“Can we please do more testing?”</em> You’re explaining what’s required for their AI investment to succeed.</p> <p><strong>Show quick wins alongside a longer-term vision.</strong><br>Identify one or two pilots that can show value within 30-60 days. Then show them how those pilots build toward bigger changes over the next year.</p> <p><strong>Ask for what you need.</strong><br>Be specific. You need a budget for tools, time for pilots, access to data, and support for team training.</p> Step 6: Implement and Demonstrate Value <p>Run your pilots with clear before-and-after metrics. Measure everything: time saved, quality maintained, user satisfaction, team confidence.</p> <p><strong>Document wins and learning.</strong><br>Failures are useful too. If a pilot doesn’t work out, document why and what you learned.</p> <p><strong>Share progress in management’s language.</strong> Monthly updates should focus on business outcomes, not technical details. <em>“We’ve reduced research synthesis time by 35% while maintaining quality scores”</em> is the right level of detail.</p> <p><strong>Build internal advocates by solving real problems.</strong><br>When your AI pilots make someone’s job easier, you create advocates who will support broader adoption.</p> <p><strong>Iterate based on what works in your specific context.</strong> Not every AI application will fit your organization. Pay attention to what’s actually working and double down on that.</p> Taking Initiative Beats Waiting <p>AI adoption is happening. The question isn’t whether your organization will use AI, but whether you’ll shape how it gets implemented.</p> <p>Your UX expertise is exactly what’s needed to implement AI successfully. You understand users, quality, and the gap between impressive demos and useful reality.</p> <p><strong>Take one practical first step this week.</strong><br>Schedule 30 minutes to map one AI opportunity in your practice. Pick one area where AI might help, think through how you’d pilot it safely, and sketch out what success would look like.</p> <p>Then start the conversation with your manager. You might be surprised how receptive they are to someone stepping up to lead this.</p> <p>You know how to understand user needs, test solutions, measure outcomes, and iterate based on evidence. Those skills don’t change just because AI is involved. You’re applying your existing expertise to a new tool.</p> <p>Your role isn’t disappearing. It’s evolving into something more strategic, more valuable, and more secure. But only if you take the initiative to shape that evolution yourself.</p> <h3>Further Reading On SmashingMag</h3> <ul> <li>“<a href="https://www.smashingmagazine.com/2025/08/designing-with-ai-practical-techniques-product-design/">Designing With AI, Not Around It: Practical Advanced Techniques For Product Design Use Cases</a>”, Ilia Kanazin &amp; Marina Chernyshova</li> <li>“<a href="https://www.smashingmagazine.com/2025/08/beyond-hype-what-ai-can-do-product-design/">Beyond The Hype: What AI Can Really Do For Product Design</a>”, Nikita Samutin</li> <li>“<a href="https://www.smashingmagazine.com/2025/08/week-in-life-ai-augmented-designer/">A Week In The Life Of An AI-Augmented Designer</a>”, Lyndon Cerejo</li> <li>“<a href="https://www.smashingmagazine.com/2025/09/functional-personas-ai-lean-practical-workflow/">Functional Personas With AI: A Lean, Practical Workflow</a>”, Paul Boag</li> </ul>

<p>In my <a href="https://www.smashingmagazine.com/2025/09/psychology-trust-ai-guide-measuring-designing-user-confidence/">last piece</a>, we established a foundational truth: for users to adopt and rely on AI, they must <strong>trust</strong> it. We talked about trust being a multifaceted construct, built on perceptions of an AI’s <strong>Ability</strong>, <strong>Benevolence</strong>, <strong>Integrity</strong>, and <strong>Predictability</strong>. But what happens when an AI, in its silent, algorithmic wisdom, makes a decision that leaves a user confused, frustrated, or even hurt? A mortgage application is denied, a favorite song is suddenly absent from a playlist, and a qualified resume is rejected before a human ever sees it. In these moments, ability and predictability are shattered, and benevolence feels a world away.</p> <p>Our conversation now must evolve from the <em>why</em> of trust to the <em>how</em> of transparency. The field of <strong>Explainable AI (XAI)</strong>, which focuses on developing methods to make AI outputs understandable to humans, has emerged to address this, but it’s often framed as a purely technical challenge for data scientists. I argue it’s a critical design challenge for products relying on AI. It’s our job as UX professionals to bridge the gap between algorithmic decision-making and human understanding.</p> <p>This article provides practical, actionable guidance on how to research and design for explainability. We’ll move beyond the buzzwords and into the mockups, translating complex XAI concepts into concrete design patterns you can start using today.</p> De-mystifying XAI: Core Concepts For UX Practitioners <p>XAI is about answering the user’s question: “<strong>Why?</strong>” Why was I shown this ad? Why is this movie recommended to me? Why was my request denied? Think of it as the AI showing its work on a math problem. Without it, you just have an answer, and you’re forced to take it on faith. In showing the steps, you build comprehension and trust. You also allow for your work to be double-checked and verified by the very humans it impacts.</p> <h3>Feature Importance And Counterfactuals</h3> <p>There are a number of techniques we can use to clarify or explain what is happening with AI. While methods range from providing the entire logic of a decision tree to generating natural language summaries of an output, two of the most practical and impactful types of information UX practitioners can introduce into an experience are <strong>feature importance</strong> (Figure 1) and <strong>counterfactuals</strong>. These are often the most straightforward for users to understand and the most actionable for designers to implement.</p> <p><img src="https://files.smashing.media/articles/beyond-black-box-practical-xai-ux-practitioners/1-example-feature-importance.png"></p> <h4>Feature Importance</h4> <p>This explainability method answers, “<strong>What were the most important factors the AI considered?</strong>” It’s about identifying the top 2-3 variables that had the biggest impact on the outcome. It’s the headline, not the whole story.</p> <blockquote> <strong>Example</strong>: Imagine an AI that predicts whether a customer will churn (cancel their service). Feature importance might reveal that “number of support calls in the last month” and “recent price increases” were the two most important factors in determining if a customer was likely to churn.</blockquote> <h4>Counterfactuals</h4> <p>This powerful method answers, “<strong>What would I need to change to get a different outcome?</strong>” This is crucial because it gives users a sense of agency. It transforms a frustrating “no” into an actionable “not yet.”</p> <blockquote> <strong>Example</strong>: Imagine a loan application system that uses AI. A user is denied a loan. Instead of just seeing “Application Denied,” a counterfactual explanation would also share, “If your credit score were 50 points higher, or if your debt-to-income ratio were 10% lower, your loan would have been approved.” This gives Sarah clear, actionable steps she can take to potentially get a loan in the future.</blockquote> <h3>Using Model Data To Enhance The Explanation</h3> <p>Although technical specifics are often handled by data scientists, it's helpful for UX practitioners to know that tools like <a href="https://www.geeksforgeeks.org/artificial-intelligence/introduction-to-explainable-aixai-using-lime/">LIME</a> (Local Interpretable Model-agnostic Explanations) which explains individual predictions by approximating the model locally, and <a href="https://shap.readthedocs.io/en/latest/example_notebooks/overviews/An%20introduction%20to%20explainable%20AI%20with%20Shapley%20values.html">SHAP</a> (SHapley Additive exPlanations) which uses a game theory approach to explain the output of any machine learning model are commonly used to extract these “why” insights from complex models. These libraries essentially help break down an AI’s decision to show which inputs were most influential for a given outcome.</p> <p>When done properly, the data underlying an AI tool’s decision can be used to tell a powerful story. Let’s walk through feature importance and counterfactuals and show how the data science behind the decision can be utilized to enhance the user’s experience.</p> <p>Now let’s cover feature importance with the assistance of <strong>Local Explanations (e.g., LIME)</strong> data: This approach answers, “<strong>Why did the AI make <em>this specific</em> recommendation for me, right now?</strong>” Instead of a general explanation of how the model works, it provides a focused reason for a single, specific instance. It’s personal and contextual.</p> <blockquote> <strong>Example</strong>: Imagine an AI-powered music recommendation system like Spotify. A local explanation would answer, “Why did the system recommend <strong>this specific</strong> song by Adele to <strong>you</strong> right now?” The explanation might be: “Because you recently listened to several other emotional ballads and songs by female vocalists.”</blockquote> <p>Finally, let’s cover the inclusion of <strong>Value-based Explanations (e.g. Shapley Additive Explanations (SHAP)</strong> data to an explanation of a decision: This is a more nuanced version of feature importance that answers, “<strong>How did each factor push the decision one way or the other?</strong>” It helps visualize <em>what</em> mattered, and whether its influence was positive or negative.</p> <blockquote> <strong>Example</strong>: Imagine a bank uses an AI model to decide whether to approve a loan application.</blockquote> <p><strong>Feature Importance</strong>: The model output might show that the applicant’s credit score, income, and debt-to-income ratio were the most important factors in its decision. This answers <em>what</em> mattered.</p> <p><strong>Feature Importance with Value-Based Explanations (SHAP)</strong>: SHAP values would take feature importance further based on elements of the model.</p> <ul> <li>For an approved loan, SHAP might show that a high credit score significantly <em>pushed</em> the decision towards approval (positive influence), while a slightly higher-than-average debt-to-income ratio <em>pulled</em> it slightly away (negative influence), but not enough to deny the loan.</li> <li>For a denied loan, SHAP could reveal that a low income and a high number of recent credit inquiries <em>strongly pushed</em> the decision towards denial, even if the credit score was decent.</li> </ul> <p>This helps the loan officer explain to the applicant beyond <em>what</em> was considered, to <em>how each factor contributed</em> to the final “yes” or “no” decision.</p> <p>It’s crucial to recognize that the ability to provide good explanations often starts much earlier in the development cycle. Data scientists and engineers play a pivotal role by intentionally structuring models and data pipelines in ways that inherently support explainability, rather than trying to bolt it on as an afterthought.</p> <p>Research and design teams can foster this by initiating early conversations with data scientists and engineers about user needs for understanding, contributing to the development of explainability metrics, and collaboratively prototyping explanations to ensure they are both accurate and user-friendly.</p> XAI And Ethical AI: Unpacking Bias And Responsibility <p>Beyond building trust, XAI plays a critical role in addressing the profound <strong>ethical implications of AI*</strong>, particularly concerning algorithmic bias. Explainability techniques, such as analyzing SHAP values, can reveal if a model’s decisions are disproportionately influenced by sensitive attributes like race, gender, or socioeconomic status, even if these factors were not explicitly used as direct inputs.</p> <p>For instance, if a loan approval model consistently assigns negative SHAP values to applicants from a certain demographic, it signals a potential bias that needs investigation, empowering teams to surface and mitigate such unfair outcomes.</p> <p>The power of XAI also comes with the potential for “<strong>explainability washing</strong>.” Just as “greenwashing” misleads consumers about environmental practices, explainability washing can occur when explanations are designed to obscure, rather than illuminate, problematic algorithmic behavior or inherent biases. This could manifest as overly simplistic explanations that omit critical influencing factors, or explanations that strategically frame results to appear more neutral or fair than they truly are. It underscores the ethical responsibility of UX practitioners to design explanations that are genuinely transparent and verifiable.</p> <p>UX professionals, in collaboration with data scientists and ethicists, hold a crucial responsibility in communicating the <em>why</em> of a decision, and also the limitations and potential biases of the underlying AI model. This involves setting realistic user expectations about AI accuracy, identifying where the model might be less reliable, and providing clear channels for recourse or feedback when users perceive unfair or incorrect outcomes. Proactively addressing these ethical dimensions will allow us to build AI systems that are truly just and trustworthy.</p> From Methods To Mockups: Practical XAI Design Patterns <p>Knowing the concepts is one thing; designing them is another. Here’s how we can translate these XAI methods into intuitive design patterns.</p> <h3>Pattern 1: The "Because" Statement (for Feature Importance)</h3> <p>This is the simplest and often most effective pattern. It’s a direct, plain-language statement that surfaces the primary reason for an AI’s action.</p> <ul> <li> <strong>Heuristic</strong>: Be direct and concise. Lead with the single most impactful reason. Avoid jargon at all costs.</li> </ul> <blockquote> <strong>Example</strong>: Imagine a music streaming service. Instead of just presenting a “Discover Weekly” playlist, you add a small line of microcopy.<br><br><strong>Song Recommendation</strong>: “Velvet Morning”<br>Because you listen to “The Fuzz” and other psychedelic rock.</blockquote> <h3>Pattern 2: The "What-If" Interactive (for Counterfactuals)</h3> <p>Counterfactuals are inherently about empowerment. The best way to represent them is by giving users interactive tools to explore possibilities themselves. This is perfect for financial, health, or other goal-oriented applications.</p> <ul> <li> <strong>Heuristic</strong>: Make explanations interactive and empowering. Let users see the cause and effect of their choices.</li> </ul> <blockquote> <strong>Example</strong>: A loan application interface. After a denial, instead of a dead end, the user gets a tool to determine how various scenarios (what-ifs) might play out (See Figure 1).</blockquote> <p><img src="https://files.smashing.media/articles/beyond-black-box-practical-xai-ux-practitioners/2-example-counterfactuals.png"></p> <h3>Pattern 3: The Highlight Reel (For Local Explanations)</h3> <p>When an AI performs an action on a user’s content (like summarizing a document or identifying faces in photos), the explanation should be visually linked to the source.</p> <ul> <li> <strong>Heuristic</strong>: Use visual cues like highlighting, outlines, or annotations to connect the explanation directly to the interface element it’s explaining.</li> </ul> <blockquote> <strong>Example</strong>: An AI tool that summarizes long articles.<br><br><strong>AI-Generated Summary Point</strong>:<br>Initial research showed a market gap for sustainable products.<br><br><strong>Source in Document</strong>:<br>“...Our Q2 analysis of market trends conclusively demonstrated that <strong>no major competitor was effectively serving the eco-conscious consumer, revealing a significant market gap for sustainable products</strong>...”</blockquote> <h3>Pattern 4: The Push-and-Pull Visual (for Value-based Explanations)</h3> <p>For more complex decisions, users might need to understand the interplay of factors. Simple data visualizations can make this clear without being overwhelming.</p> <ul> <li> <strong>Heuristic</strong>: Use simple, color-coded data visualizations (like bar charts) to show the factors that positively and negatively influenced a decision.</li> </ul> <blockquote> <strong>Example</strong>: An AI screening a candidate’s profile for a job.<br><br>Why this candidate is a 75% match:<br><br><strong>Factors pushing the score up</strong>:<br><ul> <li>5+ Years UX Research Experience</li> <li>Proficient in Python</li> </ul> <br><strong>Factors pushing the score down</strong>:<br><ul><li>No experience with B2B SaaS</li></ul> </blockquote> <p>Learning and using these design patterns in the UX of your AI product will help increase the explainability. You can also use additional techniques that I’m not covering in-depth here. This includes the following:</p> <ul> <li> <strong>Natural language explanations</strong>: Translating an AI’s technical output into simple, conversational human language that non-experts can easily understand.</li> <li> <strong>Contextual explanations</strong>: Providing a rationale for an AI’s output at the specific moment and location, it is most relevant to the user’s task.</li> <li> <strong>Relevant visualizations</strong>: Using charts, graphs, or heatmaps to visually represent an AI’s decision-making process, making complex data intuitive and easier for users to grasp.</li> </ul> <p><strong>A Note For the Front End</strong>: <em>Translating these explainability outputs into seamless user experiences also presents its own set of technical considerations. Front-end developers often grapple with API design to efficiently retrieve explanation data, and performance implications (like the real-time generation of explanations for every user interaction) need careful planning to avoid latency.</em></p> Some Real-world Examples <p><strong>UPS Capital’s DeliveryDefense</strong></p> <p>UPS uses AI to assign a “delivery confidence score” to addresses to predict the likelihood of a package being stolen. Their <a href="https://about.ups.com/us/en/our-stories/innovation-driven/ups-s-deliverydefense-pits-ai-against-criminals.html">DeliveryDefense</a> software analyzes historical data on location, loss frequency, and other factors. If an address has a low score, the system can proactively reroute the package to a secure UPS Access Point, providing an explanation for the decision (e.g., “Package rerouted to a secure location due to a history of theft”). This system demonstrates how XAI can be used for risk mitigation and building customer trust through transparency.</p> <p><strong>Autonomous Vehicles</strong></p> <p>These vehicles of the future will need to effectively use <a href="https://online.hbs.edu/blog/post/ai-in-business">XAI to help their vehicles make safe, explainable decisions</a>. When a self-driving car brakes suddenly, the system can provide a real-time explanation for its action, for example, by identifying a pedestrian stepping into the road. This is not only crucial for passenger comfort and trust but is a regulatory requirement to prove the safety and accountability of the AI system.</p> <p><strong>IBM Watson Health (and its challenges)</strong></p> <p>While often cited as a general example of AI in healthcare, it’s also a valuable case study for the <em>importance</em> of XAI. The <a href="https://www.henricodolfing.com/2024/12/case-study-ibm-watson-for-oncology-failure.html">failure of its Watson for Oncology project</a> highlights what can go wrong when explanations are not clear, or when the underlying data is biased or not localized. The system’s recommendations were sometimes inconsistent with local clinical practices because they were based on U.S.-centric guidelines. This serves as a cautionary tale on the need for robust, context-aware explainability.</p> The UX Researcher’s Role: Pinpointing And Validating Explanations <p>Our design solutions are only effective if they address the right user questions at the right time. An explanation that answers a question the user doesn’t have is just noise. This is where UX research becomes the critical connective tissue in an XAI strategy, ensuring that we explain the what and how that actually matters to our users. The researcher’s role is twofold: first, to inform the strategy by identifying where explanations are needed, and second, to validate the designs that deliver those explanations.</p> <h3>Informing the XAI Strategy (What to Explain)</h3> <p>Before we can design a single explanation, we must understand the user’s mental model of the AI system. What do they believe it’s doing? Where are the gaps between their understanding and the system’s reality? This is the foundational work of a UX researcher.</p> <h4>Mental Model Interviews: Unpacking User Perceptions Of AI Systems</h4> <p>Through deep, semi-structured interviews, UX practitioners can gain invaluable insights into how users perceive and understand AI systems. These sessions are designed to encourage users to literally draw or describe their internal “mental model” of how they believe the AI works. This often involves asking open-ended questions that prompt users to explain the system’s logic, its inputs, and its outputs, as well as the relationships between these elements.</p> <p>These interviews are powerful because they frequently reveal profound misconceptions and assumptions that users hold about AI. For example, a user interacting with a recommendation engine might confidently assert that the system is based purely on their past viewing history. They might not realize that the algorithm also incorporates a multitude of other factors, such as the time of day they are browsing, the current trending items across the platform, or even the viewing habits of similar users.</p> <p>Uncovering this gap between a user’s mental model and the actual underlying AI logic is critically important. It tells us precisely what specific information we need to communicate to users to help them build a more accurate and robust mental model of the system. This, in turn, is a fundamental step in fostering trust. When users understand, even at a high level, how an AI arrives at its conclusions or recommendations, they are more likely to trust its outputs and rely on its functionality. </p> <h4>AI Journey Mapping: A Deep Dive Into User Trust And Explainability</h4> <p>By meticulously mapping the user’s journey with an AI-powered feature, we gain invaluable insights into the precise moments where confusion, frustration, or even profound distrust emerge. This uncovers critical junctures where the user’s mental model of how the AI operates clashes with its actual behavior.</p> <p>Consider a music streaming service: Does the user’s trust plummet when a playlist recommendation feels “random,” lacking any discernible connection to their past listening habits or stated preferences? This perceived randomness is a direct challenge to the user’s expectation of intelligent curation and a breach of the implicit promise that the AI understands their taste. Similarly, in a photo management application, do users experience significant frustration when an AI photo-tagging feature consistently misidentifies a cherished family member? This error is more than a technical glitch; it strikes at the heart of accuracy, personalization, and even emotional connection.</p> <p>These pain points are vivid signals indicating precisely where a well-placed, clear, and concise explanation is necessary. Such explanations serve as crucial repair mechanisms, mending a breach of trust that, if left unaddressed, can lead to user abandonment.</p> <p>The power of AI journey mapping lies in its ability to move us beyond simply explaining the final output of an AI system. While understanding <em>what</em> the AI produced is important, it’s often insufficient. Instead, this process compels us to focus on explaining the <em>process</em> at critical moments. This means addressing:</p> <ul> <li> <strong>Why a particular output was generated</strong>: Was it due to specific input data? A particular model architecture?</li> <li> <strong>What factors influenced the AI’s decision</strong>: Were certain features weighted more heavily?</li> <li> <strong>How the AI arrived at its conclusion</strong>: Can we offer a simplified, analogous explanation of its internal workings?</li> <li> <strong>What assumptions the AI made</strong>: Were there implicit understandings of the user’s intent or data that need to be surfaced?</li> <li> <strong>What the limitations of the AI are</strong>: Clearly communicating what the AI <em>cannot</em> do, or where its accuracy might waver, builds realistic expectations.</li> </ul> <p>AI journey mapping transforms the abstract concept of XAI into a practical, actionable framework for UX practitioners. It enables us to move beyond theoretical discussions of explainability and instead pinpoint the exact moments where user trust is at stake, providing the necessary insights to build AI experiences that are powerful, transparent, understandable, and trustworthy.</p> <p>Ultimately, research is how we uncover the unknowns. Your team might be debating how to explain why a loan was denied, but research might reveal that users are far more concerned with understanding how their data was used in the first place. Without research, we are simply guessing what our users are wondering.</p> Collaborating On The Design (How to Explain Your AI) <p>Once research has identified what to explain, the collaborative loop with design begins. Designers can prototype the patterns we discussed earlier—the “Because” statement, the interactive sliders—and researchers can put those designs in front of users to see if they hold up.</p> <p><strong>Targeted Usability &amp; Comprehension Testing</strong>: We can design research studies that specifically test the XAI components. We don’t just ask, “<em>Is this easy to use?</em>” We ask, “<em>After seeing this, can you tell me in your own words why the system recommended this product?</em>” or “<em>Show me what you would do to see if you could get a different result.</em>” The goal here is to measure comprehension and actionability, alongside usability.</p> <p><strong>Measuring Trust Itself</strong>: We can use simple surveys and rating scales before and after an explanation is shown. For instance, we can ask a user on a 5-point scale, “<em>How much do you trust this recommendation?</em>” before they see the “Because” statement, and then ask them again afterward. This provides quantitative data on whether our explanations are actually moving the needle on trust.</p> <p>This process creates a powerful, iterative loop. Research findings inform the initial design. That design is then tested, and the new findings are fed back to the design team for refinement. Maybe the “Because” statement was too jargony, or the “What-If” slider was more confusing than empowering. Through this collaborative validation, we ensure that the final explanations are technically accurate, genuinely understandable, useful, and trust-building for the people using the product.</p> The Goldilocks Zone Of Explanation <p>A critical word of caution: it is possible to <em>over-explain</em>. As in the fairy tale, where Goldilocks sought the porridge that was ‘just right’, the goal of a good explanation is to provide the right amount of detail—not too much and not too little. Bombarding a user with every variable in a model will lead to cognitive overload and can actually <em>decrease</em> trust. The goal is not to make the user a data scientist.</p> <p>One solution is <strong>progressive disclosure</strong>.</p> <ol> <li> <strong>Start with the simple.</strong> Lead with a concise “Because” statement. For most users, this will be enough.</li> <li> <strong>Offer a path to detail.</strong> Provide a clear, low-friction link like “Learn More” or “See how this was determined.”</li> <li> <strong>Reveal the complexity.</strong> Behind that link, you can offer the interactive sliders, the visualizations, or a more detailed list of contributing factors.</li> </ol> <p>This layered approach respects user attention and expertise, providing just the right amount of information for their needs. Let’s imagine you’re using a smart home device that recommends optimal heating based on various factors.</p> <p><strong>Start with the simple</strong>: “<em>Your home is currently heated to 72 degrees, which is the optimal temperature for energy savings and comfort.</em>”</p> <p><strong>Offer a path to detail</strong>: Below that, a small link or button: “<em>Why is 72 degrees optimal?</em>"</p> <p><strong>Reveal the complexity</strong>: Clicking that link could open a new screen showing:</p> <ul> <li>Interactive sliders for outside temperature, humidity, and your preferred comfort level, demonstrating how these adjust the recommended temperature.</li> <li>A visualization of energy consumption at different temperatures.</li> <li>A list of contributing factors like “Time of day,” “Current outside temperature,” “Historical energy usage,” and “Occupancy sensors.”</li> </ul> <p><img src="https://files.smashing.media/articles/beyond-black-box-practical-xai-ux-practitioners/3-example-progressive-disclosure.png"></p> <p>It’s effective to combine multiple XAI methods and this Goldilocks Zone of Explanation pattern, which advocates for progressive disclosure, implicitly encourages this. You might start with a simple “Because” statement (Pattern 1) for immediate comprehension, and then offer a “Learn More” link that reveals a “What-If” Interactive (Pattern 2) or a “Push-and-Pull Visual” (Pattern 4) for deeper exploration.</p> <p>For instance, a loan application system could initially state the primary reason for denial (feature importance), then allow the user to interact with a “What-If” tool to see how changes to their income or debt would alter the outcome (counterfactuals), and finally, provide a detailed “Push-and-Pull” chart (value-based explanation) to illustrate the positive and negative contributions of all factors. This layered approach allows users to access the level of detail they need, when they need it, preventing cognitive overload while still providing comprehensive transparency.</p> <p>Determining which XAI tools and methods to use is primarily a function of thorough UX research. Mental model interviews and AI journey mapping are crucial for pinpointing user needs and pain points related to AI understanding and trust. Mental model interviews help uncover user misconceptions about how the AI works, indicating areas where fundamental explanations (like feature importance or local explanations) are needed. AI journey mapping, on the other hand, identifies critical moments of confusion or distrust in the user’s interaction with the AI, signaling where more granular or interactive explanations (like counterfactuals or value-based explanations) would be most beneficial to rebuild trust and provide agency. </p> <p><img src="https://files.smashing.media/articles/beyond-black-box-practical-xai-ux-practitioners/4-ai-business-startup-assistant.png"></p> <p>Ultimately, the <em>best</em> way to choose a technique is to let user research guide your decisions, ensuring that the explanations you design directly address actual user questions and concerns, rather than simply offering technical details for their own sake.</p> XAI for Deep Reasoning Agents <p>Some of the newest AI systems, known as <a href="https://learn.microsoft.com/en-us/microsoft-copilot-studio/faqs-reasoning">deep reasoning agents</a>, produce an explicit “chain of thought” for every complex task. They do not merely cite sources; they show the logical, step-by-step path they took to arrive at a conclusion. While this transparency provides valuable context, a play-by-play that spans several paragraphs can feel overwhelming to a user simply trying to complete a task.</p> <p>The principles of XAI, especially the Goldilocks Zone of Explanation, apply directly here. We can curate the journey, using progressive disclosure to show only the final conclusion and the most salient step in the thought process first. Users can then opt in to see the full, detailed, multi-step reasoning when they need to double-check the logic or find a specific fact. This approach respects user attention while preserving the agent’s full transparency.</p> Next Steps: Empowering Your XAI Journey <p>Explainability is a fundamental pillar for building <strong>trustworthy and effective AI products</strong>. For the advanced practitioner looking to drive this change within their organization, the journey extends beyond design patterns into advocacy and continuous learning.</p> <p>To deepen your understanding and practical application, consider exploring resources like the <a href="https://research.ibm.com/blog/ai-explainability-360">AI Explainability 360 (AIX360) toolkit</a> from IBM Research or Google’s <a href="https://pair-code.github.io/what-if-tool/">What-If Tool</a>, which offer interactive ways to explore model behavior and explanations. Engaging with communities like the <a href="https://responsibleaiforum.com/">Responsible AI Forum</a> or specific research groups focused on human-centered AI can provide invaluable insights and collaboration opportunities.</p> <p>Finally, be an advocate for XAI within your own organization. Frame explainability as a strategic investment. Consider a brief pitch to your leadership or cross-functional teams:</p> <blockquote>“By investing in XAI, we’ll go beyond building trust; we’ll accelerate user adoption, reduce support costs by empowering users with understanding, and mitigate significant ethical and regulatory risks by exposing potential biases. This is good design and smart business.”</blockquote> <p>Your voice, grounded in practical understanding, is crucial in bringing AI out of the black box and into a collaborative partnership with users.</p>

<p>About 15 years ago, I was working at a company where we built apps for travel agents, airport workers, and airline companies. We also built our own in-house framework for UI components and single-page app capabilities.</p> <p>We had components for everything: fields, buttons, tabs, ranges, datatables, menus, datepickers, selects, and multiselects. We even had a div component. Our div component was great by the way, it allowed us to do rounded corners on all browsers, which, believe it or not, wasn't an easy thing to do at the time.</p> <p><img src="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/1-div-component-example.png"></p> <p>Our work took place at a point in our history when JS, Ajax, and dynamic HTML were seen as a revolution that brought us into the future. Suddenly, we could update a page dynamically, get data from a server, and avoid having to navigate to other pages, which was seen as slow and flashed a big white rectangle on the screen between the two pages.</p> <p>There was a phrase, made popular by Jeff Atwood (the founder of StackOverflow), which read: </p> <blockquote>“Any application that can be written in JavaScript will eventually be written in JavaScript.”<br><br>— <a href="https://blog.codinghorror.com/all-programming-is-web-programming/#:~:text=any%20application%20that%C2%A0can%C2%A0be%20written%20in%20JavaScript%2C%C2%A0will%C2%A0eventually%20be%20written%20in%20JavaScript">Jeff Atwood</a> </blockquote> <p>To us at the time, this felt like a dare to actually go and create those apps. It felt like a blanket approval to do everything with JS.</p> <p>So we did everything with JS, and we didn’t really take the time to research other ways of doing things. We didn’t really feel the incentive to properly learn what HTML and CSS could do. We didn’t really perceive the web as an evolving app platform in its entirety. We mostly saw it as something we needed to work around, especially when it came to browser support. We could just throw more JS at it to get things done.</p> <p>Would taking the time to learn more about how the web worked and what was available on the platform have helped me? Sure, I could probably have shaved a bunch of code that wasn’t truly needed. But, at the time, maybe not that much.</p> <p>You see, browser differences were pretty significant back then. This was a time when Internet Explorer was still the dominant browser, with Firefox being the close second, but starting to lose market share due to Chrome rapidly gaining popularity. Although Chrome and Firefox were quite good at agreeing on web standards, the environments in which our apps were running meant that we had to support IE6 for a long time. Even when we were allowed to support IE8, we still had to deal with a lot of differences between browsers. Not only that, but the web of the time just didn't have that many capabilities built right into the platform.</p> <p><img src="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/2-browser-market-share.png"></p> <p>Fast forward to today. Things have changed tremendously. Not only do we have more of these capabilities than ever before, but the rate at which they become available has increased as well.</p> <p>Let me ask the question again, then: Would taking the time to learn more about how the web works and what is available on the platform help you today? Absolutely yes. Learning to understand and use the web platform today puts you at a huge advantage over other developers.</p> <p>Whether you work on performance, accessibility, responsiveness, all of them together, or just shipping UI features, if you want to do it as a responsible engineer, knowing the tools that are available to you helps you reach your goals faster and better.</p> Some Things You Might Not Need A Library For Anymore <p>Knowing what browsers support today, the question, then, is: What can we ditch? Do we need a div component to do rounded corners in 2025? Of course, we don’t. The <code>border-radius</code> property has been supported by all currently used browsers for more than 15 years at this point. And <code>corner-shape</code> is also coming soon, for even fancier corners.</p> <p>Let’s take a look at relatively recent features that are now available in all major browsers, and which you can use to replace existing dependencies in your codebase.</p> <p>The point isn't to immediately ditch all your beloved libraries and rewrite your codebase. As for everything else, you’ll need to take browser support into account first and decide based on other factors specific to your project. The following features are implemented in the three main browser engines (Chromium, WebKit, and Gecko), but you might have different browser support requirements that prevent you from using them right away. Now is still a good time to learn about these features, though, and perhaps plan to use them at some point.</p> <h3>Popovers And Dialogs</h3> <p>The <a href="https://developer.mozilla.org/docs/Web/API/Popover_API">Popover API</a>, the <a href="https://developer.mozilla.org/docs/Web/HTML/Reference/Elements/dialog"><code>&lt;dialog&gt;</code> HTML element</a>, and the <a href="https://developer.mozilla.org/docs/Web/CSS/Reference/Selectors/::backdrop"><code>::backdrop</code> pseudo-element</a> can help you get rid of dependencies on popup, tooltip, and dialog libraries, such as <a href="https://floating-ui.com/">Floating UI</a>, <a href="https://atomiks.github.io/tippyjs/">Tippy.js</a>, <a href="https://tetherjs.dev/docs/welcome/">Tether</a>, or <a href="https://react-tooltip.com/">React Tooltip</a>.</p> <p>They handle accessibility and focus management for you, out of the box, are highly customizable by using CSS, and can easily be animated.</p> <h3>Accordions</h3> <p>The <a href="https://developer.mozilla.org/docs/Web/HTML/Reference/Elements/details"><code>&lt;details&gt;</code> element</a>, its <a href="https://developer.mozilla.org/docs/Web/HTML/Reference/Elements/details#name"><code>name</code> attribute</a> for mutually exclusive elements, and the <a href="https://developer.mozilla.org/docs/Web/CSS/Reference/Selectors/::details-content"><code>::details-content</code></a> pseudo-element remove the need for accordion components like the <a href="https://getbootstrap.com/docs/5.3/components/accordion/">Bootstrap Accordion</a> or the <a href="https://mui.com/material-ui/react-accordion/">React Accordion component</a>.</p> <p>Just using the platform here means it’s easier for folks who know HTML/CSS to understand your code without having to first learn to use a specific library. It also means you’re immune to breaking changes in the library or the discontinuation of that library. And, of course, it means less code to download and run. Mutually exclusive details elements don’t need JS to open, close, or animate.</p> <h3>CSS Syntax</h3> <p><a href="https://developer.mozilla.org/docs/Web/CSS/@layer">Cascade layers</a>, for a more organized CSS codebase, <a href="https://developer.mozilla.org/docs/Web/CSS/Reference/Selectors/Nesting_selector">CSS nesting</a>, for more compact CSS, new color functions, <a href="https://developer.mozilla.org/docs/Web/CSS/CSS_colors/Relative_colors">relative colors</a>, and <a href="https://developer.mozilla.org/docs/Web/CSS/color_value/color-mix"><code>color-mix</code></a>, new Maths functions like <a href="https://developer.mozilla.org/docs/Web/CSS/abs"><code>abs()</code></a>, <a href="https://developer.mozilla.org/docs/Web/CSS/sign"><code>sign()</code></a>, <a href="https://developer.mozilla.org/docs/Web/CSS/pow"><code>pow()</code></a> and others help reduce dependencies on <a href="https://css-tricks.com/is-it-time-to-un-sass/">CSS pre-processors</a>, utility libraries like Bootstrap and Tailwind, or even runtime CSS-in-JS libraries.</p> <p>The game changer <a href="https://developer.mozilla.org/docs/Web/CSS/Reference/Selectors/:has"><code>:has()</code></a>, one of the most requested features for a long time, removes the need for more complicated JS-based solutions.</p> <h3>JS Utilities</h3> <p>Modern Array methods like <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/findLast"><code>findLast()</code></a>, or <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/at"><code>at()</code></a>, as well as Set methods like <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Set/difference"><code>difference()</code></a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Set/intersection"><code>intersection()</code></a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Set/union"><code>union()</code></a> and others can reduce dependencies on libraries like <a href="https://lodash.com/">Lodash</a>.</p> <h3>Container Queries</h3> <p><a href="https://developer.mozilla.org/docs/Web/CSS/CSS_containment/Container_queries">Container queries</a> make UI components respond to things other than the viewport size, and therefore make them more reusable across different contexts.</p> <p>No need to use a JS-heavy UI library for this anymore, and no need to use a <a href="https://github.com/GoogleChromeLabs/container-query-polyfill">polyfill</a> either.</p> <h3>Layout</h3> <p><a href="https://developer.mozilla.org/docs/Web/CSS/CSS_grid_layout">Grid</a>, <a href="https://developer.mozilla.org/docs/Web/CSS/CSS_grid_layout/Subgrid">subgrid</a>, <a href="https://developer.mozilla.org/docs/Learn_web_development/Core/CSS_layout/Flexbox">flexbox</a>, or <a href="https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/columns">multi-column</a> have been around for a long time now, but looking at the <a href="https://2025.stateofcss.com/en-US">results of the State of CSS surveys</a>, it’s clear that developers tend to be very cautious with adopting new things, and wait for a very long time before they do.</p> <p>These features have been <a href="https://web-platform-dx.github.io/web-features/">Baseline</a> for a long time and you could use them to get rid of dependencies on things like the <a href="https://getbootstrap.com/docs/5.3/layout/grid/">Bootstrap’s grid system</a>, <a href="https://get.foundation/sites/docs/flexbox-utilities.html">Foundation Framework’s flexbox utilities</a>, <a href="https://bulma.io/documentation/grid/fixed-grid/">Bulma fixed grid</a>, <a href="https://materializecss.com/grid.html">Materialize grid</a>, or <a href="https://tailwindcss.com/docs/columns">Tailwind columns</a>.</p> <p>I’m not saying you should drop your framework. Your team adopted it for a reason, and removing it might be a big project. But looking at what the web platform can offer without a third-party wrapper on top comes with a lot of benefits.</p> Things You Might Not Need Anymore In The Near Future <p>Now, let’s take a quick look at some of the things you will not need a library for in the near future. That is to say, the things below are not quite ready for mass adoption, but being aware of them and planning for potential later use can be helpful.</p> <h3>Anchor Positioning</h3> <p><a href="https://developer.mozilla.org/docs/Web/CSS/CSS_anchor_positioning">CSS anchor positioning</a> handles the positioning of popovers and tooltips relative to other elements, and takes care of keeping them in view, even when moving, scrolling, or resizing the page.</p> <p>This is a great complement to the Popover API mentioned before, which will make it even easier to migrate away from more performance-intensive JS solutions.</p> <h3>Navigation API</h3> <p>The <a href="https://developer.mozilla.org/docs/Web/API/Navigation_API">Navigation API</a> can be used to handle navigation in single-page apps and might be a great complement, or even a replacement, to <a href="https://reactrouter.com/">React Router</a>, <a href="https://nextjs.org/docs/routing/introduction">Next.js routing</a>, or <a href="https://angular.io/guide/router">Angular routing tasks</a>.</p> <h3>View Transitions API</h3> <p>The <a href="https://developer.mozilla.org/docs/Web/API/View_Transition_API">View Transitions API</a> can animate between the different states of a page. On a single-page application, this makes smooth transitions between states very easy, and can help you get rid of animation libraries such as <a href="https://animejs.com/">Anime.js</a>, <a href="https://greensock.com/gsap/">GSAP</a>, or <a href="https://motion.dev/">Motion.dev</a>.</p> <p>Even better, the API can also be used with multiple-page applications.</p> <p>Remember earlier, when I said that the reason we built single-page apps at the company where I worked 15 years ago was to avoid the white flash of page reloads when navigating? Had that API been available at the time, we would have been able to achieve beautiful page transition effects without a single-page framework and without a huge initial download of the entire app.</p> <h3>Scroll-driven Animations</h3> <p><a href="https://developer.mozilla.org/docs/Web/CSS/CSS_scroll-driven_animations">Scroll-driven animations</a> run on the user’s scroll position, rather than over time, making them a great solution for storytelling and product tours.</p> <p>Some people <a href="https://gt-era.com/">have gone a bit over the top</a> with it, but when used well, this can be a very effective design tool, and can help get rid of libraries like: <a href="https://scrollrevealjs.org/">ScrollReveal</a>, <a href="https://gsap.com/scroll/">GSAP Scroll</a>, or <a href="https://wowjs.uk/">WOW.js</a>.</p> <h3>Customizable Selects</h3> <p>A <a href="https://developer.mozilla.org/docs/Learn_web_development/Extensions/Forms/Customizable_select">customizable select</a> is a normal <code>&lt;select&gt;</code> element that lets you fully customize its appearance and content, while ensuring accessibility and performance benefits.</p> <p>This has been a long time coming, and a highly requested feature, and it’s amazing to see it come to the web platform soon. With a built-in customizable select, you can finally ditch all this hard-to-maintain JS code for your custom select components.</p> <h3>CSS Masonry</h3> <p><a href="https://developer.chrome.com/blog/masonry-update">CSS Masonry</a> is another upcoming web platform feature that I want to spend more time on.</p> <p>With CSS Masonry, you can achieve layouts that are very hard, or even impossible, with flex, grid, or other built-in CSS layout primitives. Developers often resort to using third-party libraries to achieve Masonry layouts, such as the <a href="https://masonry.desandro.com/">Masonry JS library</a>.</p> <p>But, more on that later. Let’s wrap this point up before moving on to Masonry.</p> Why You Should Care <p>The job market is full of web developers with experience in JavaScript and the latest frameworks of the day. So, really, what’s the point in learning to use the web platform primitives more, if you can do the same things with the libraries, utilities, and frameworks you already know today?</p> <p>When an entire industry relies on these frameworks, and you can just pull in the right library, shouldn’t browser vendors just work with these libraries to make them load and run faster, rather than trying to convince developers to use the platform instead?</p> <p>First of all, we do work with library authors, and we do make frameworks better by learning about what they use and improving those areas.</p> <p>But secondly, “just using the platform” can bring pretty significant benefits.</p> <h3>Sending Less Code To Devices</h3> <p>The main benefit is that you end up sending far less code to your clients’ devices.</p> <p>According to the <a href="https://almanac.httparchive.org/en/2024/">2024 Web Almanac</a>, the average number of HTTP requests is around 70 per site, <a href="https://almanac.httparchive.org/en/2024/javascript#how-many-javascript-requests-per-page">most of which is due to JavaScript with 23 requests</a>. In 2024, JS overtook images as the dominant file type too. The median number of page requests for JS files is 23, up 8% since 2022.</p> <p>And page size continues to grow year over year. The median page weight is around 2MB now, which is 1.8MB more than it was 10 years ago.</p> <p><img src="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/3-median-page-weight.png"></p> <p>Sure, your internet connection speed has probably increased, too, but that’s not the case for everyone. And not everyone has the same device capabilities either.</p> <p>Pulling in third-party code for things you can do with the platform, instead, most probably means you ship more code, and therefore reach fewer customers than you normally would. On the web, bad loading performance leads to large abandonment rates and hurts brand reputation.</p> <h3>Running Less Code On Devices</h3> <p>Furthermore, the code you do ship on your customers’ devices likely runs faster if it uses fewer JavaScript abstractions on top of the platform. It’s also probably more responsive and more accessible by default. All of this leads to more and happier customers.</p> <p>Check my colleague Alex Russell’s <a href="https://infrequently.org/2024/01/performance-inequality-gap-2024/">yearly performance inequality gap blog</a>, which shows that premium devices are largely absent from markets with billions of users due to wealth inequality. And this gap is only growing over time.</p> <p><img src="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/4-device-performance.png"></p> Built-in Masonry Layout <p>One web platform feature that’s coming soon and which I’m very excited about is CSS Masonry.</p> <p><img src="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/5-css-masonry.png"></p> <p>Let me start by explaining what Masonry is.</p> <h3>What Is Masonry</h3> <blockquote>Masonry is a type of layout that was made popular by Pinterest years ago. It creates independent tracks of content within which items pack themselves up as close to the start of the track as they can.</blockquote> <p><img src="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/6-pinterest-portfolio.png"></p> <p>Many people see Masonry as a great option for portfolios and photo galleries, which it certainly can do. But Masonry is <strong>more flexible</strong> than what you see on Pinterest, and it’s <strong>not limited to just waterfall-like layouts</strong>.</p> <p>In a Masonry layout:</p> <ul> <li>Tracks can be columns or rows:</li> </ul> <p><img src="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/7-layout-columns-rows.png"></p> <ul> <li>Tracks of content don’t all have to be the same size:</li> </ul> <p><img src="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/8-layout-different-sizes.png"></p> <ul> <li>Items can span multiple tracks:</li> </ul> <p><img src="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/9-layout-multiple-tracks.png"></p> <ul> <li>Items can be placed on specific tracks; they don’t have to always follow the automatic placement algorithm:</li> </ul> <p><img src="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/10-layout-items-specific-tracks.png"></p> <h3>Demos</h3> <p>Here are a few simple demos I made by using the upcoming implementation of CSS Masonry in Chromium.</p> <p><a href="https://microsoftedge.github.io/Demos/css-masonry/new-york.html">A photo gallery demo</a>, showing how items (the title in this case) can span multiple tracks:</p> <p><img src="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/11-photo-gallery-different-sizes.png"></p> <p>Another <a href="https://microsoftedge.github.io/Demos/css-masonry/nature.html">photo gallery showing tracks of different sizes</a>:</p> <p><img src="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/12-photo-gallery-different-tracks.png"></p> <p>A <a href="https://microsoftedge.github.io/Demos/css-masonry/the-daily-oddity.html">news site layout</a> with some tracks wider than others, and some items spanning the entire width of the layout:</p> <p><img src="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/13-news-site-layout.png"></p> <p>A <a href="https://microsoftedge.github.io/Demos/css-masonry/kanban.html">kanban board</a> showing that items can be placed onto specific tracks:</p> <p><img src="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/14-kanban-board.png"></p> <p><strong>Note</strong>: <em>The previous demos were made with a version of Chromium that’s not yet available to most web users, because CSS Masonry is only just starting to be implemented in browsers.</em></p> <p>However, web developers have been happily using libraries to create Masonry layouts for years already.</p> <h3>Sites Using Masonry Today</h3> <p>Indeed, Masonry is pretty common on the web today. Here are a few examples I found besides Pinterest:</p> <p><img src="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/15-site-masonry.png"></p> <p><img src="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/16-masonry-site.png"></p> <p><img src="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/17-masonry-site.png"></p> <p>And a few more, less obvious, examples:</p> <p><img src="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/18-masonry-layout.png"></p> <p><img src="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/19-different-size-tracks.png"></p> <p><img src="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/20-masonry-layout.png"></p> <p>So, how were these layouts created?</p> Workarounds <p>One trick that I’ve seen used is using a Flexbox layout instead, changing its direction to column, and setting it to wrap.</p> <p>This way, you can place items of different heights in multiple, independent columns, giving the impression of a Masonry layout:</p> <p><img src="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/21-flexbox-layout.png"></p> <p>There are, however, two limitations with this workaround:</p> <ol> <li>The order of items is different from what it would be with a real Masonry layout. With Flexbox, items fill the first column first and, when it’s full, then go to the next column. With Masonry, items would stack in whichever track (or column in this case) has more space available.</li> <li>But also, and perhaps more importantly, this workaround requires that you set a fixed height to the Flexbox container; otherwise, no wrapping would occur.</li> </ol> Third-party Masonry Libraries <p>For more advanced cases, developers have been using libraries.</p> <p>The most well-known and popular library for this is simply called <a href="https://masonry.desandro.com/">Masonry</a>, and it gets downloaded about 200,000 times per week <a href="https://www.npmjs.com/package/masonry-layout">according to NPM</a>.</p> <p>Squarespace also provides a <a href="https://www.beyondspace.studio/blog/squarespace-masonry-gallery-layout-guide#method-2-using-gallery-section">layout component that renders a Masonry layout</a>, for a no-code alternative, and many sites use it.</p> <p>Both of these options use JavaScript code to place items in the layout.</p> Built-in Masonry <p>I’m really excited that Masonry is now starting to appear in browsers as a built-in CSS feature. Over time, you will be able to use Masonry just like you do Grid or Flexbox, that is, without needing any workarounds or third-party code.</p> <p>My team at Microsoft has been implementing built-in Masonry support in the Chromium open source project, which Edge, Chrome, and many other browsers are based on. Mozilla was actually the first browser vendor to <a href="https://github.com/w3c/csswg-drafts/issues/4650">propose an experimental implementation of Masonry</a> back in 2020. And <a href="https://webkit.org/blog/15269/help-us-invent-masonry-layouts-for-css-grid-level-3/">Apple has also been very interested</a> in making this new web layout primitive happen.</p> <p>The work to standardize the feature is also moving ahead, with agreement within the CSS working group about the general direction and even a new display type <a href="https://github.com/w3c/csswg-drafts/issues/12022#issuecomment-3525043825"><code>display: grid-lanes</code></a>.</p> <p>If you want to learn more about Masonry and track progress, check out my <a href="https://patrickbrosset.com/lab/css-masonry-resources/">CSS Masonry resources</a> page.</p> <p>In time, when Masonry becomes a Baseline feature, just like Grid or Flexbox, we’ll be able to simply use it and benefit from:</p> <ul> <li>Better performance,</li> <li>Better responsiveness,</li> <li>Ease of use and simpler code.</li> </ul> <p>Let’s take a closer look at these.</p> <h3>Better Performance</h3> <p>Making your own Masonry-like layout system, or using a third-party library instead, means you’ll have to run JavaScript code to place items on the screen. This also means that this code will be <em>render blocking</em>. Indeed, either nothing will appear, or things won’t be in the right places or of the right sizes, until that JavaScript code has run.</p> <p>Masonry layout is often used for the main part of a web page, which means the code would be making your main content appear later than it could otherwise have, degrading your <a href="https://web.dev/articles/lcp#what-is-lcp">LCP, or Largest Contentful Paint metric</a>, which plays a big role in perceived performance and search engine optimization.</p> <p>I tested the Masonry JS library with a simple layout and by simulating a slow 4G connection in DevTools. The library is not very big (24KB, 7.8KB gzipped), but it took 600ms to load under my test conditions.</p> <p>Here is a performance recording showing that long 600ms load time for the Masonry library, and that no other rendering activity happened while that was happening:</p> <p><img src="https://files.smashing.media/articles/masonry-things-you-wont-need-library-anymore/22-performance-recording.png"></p> <p>In addition, after the initial load time, the downloaded script then needed to be parsed, compiled, and then run. All of which, as mentioned before, was blocking the rendering of the page.</p> <p>With a built-in Masonry implementation in the browser, we won’t have a script to load and run. The browser engine will just do its thing during the initial page rendering step.</p> <h3>Better Responsiveness</h3> <p>Similar to when a page first loads, resizing the browser window leads to rendering the layout in that page again. At this point, though, if the page is using the Masonry JS library, there’s no need to load the script again, because it’s already here. However, the code that moves items in the right places needs to run.</p> <p>Now this particular library seems to be pretty fast at doing this when the page loads. However, it animates the items when they need to move to a different place on window resize, and this makes a big difference.</p> <p>Of course, users don’t spend time resizing their browser windows as much as we developers do. But this animated resizing experience can be pretty jarring and adds to the perceived time it takes for the page to adapt to its new size.</p> <h3>Ease Of Use And Simpler Code</h3> <p>How easy it is to use a web feature and how simple the code looks are important factors that can make a big difference for your team. They can’t ever be as important as the final user experience, of course, but developer experience impacts maintainability. Using a built-in web feature comes with important benefits on that front:</p> <ul> <li>Developers who already know HTML, CSS, and JS will most likely be able to use that feature easily because it’s been designed to integrate well and be consistent with the rest of the web platform.</li> <li>There’s no risk of breaking changes being introduced in how the feature is used.</li> <li>There’s almost zero risk of that feature becoming deprecated or unmaintained.</li> </ul> <p>In the case of built-in Masonry, because it’s a layout primitive, you use it from CSS, just like Grid or Flexbox, no JS involved. Also, other layout-related CSS properties, such as gap, work as you’d expect them to. There are no tricks or workarounds to know about, and the things you do learn are documented on MDN.</p> <p>For the Masonry JS lib, initialization is a bit complex: it requires a data attribute with a specific syntax, along with hidden HTML elements to set the column and gap sizes.</p> <p>Plus, if you want to span columns, you need to include the gap size yourself to avoid problems:</p> <div> <pre><code>&lt;script src="<a href="https://unpkg.com/masonry-layout@4.2.2/dist/masonry.pkgd.min.js%22%3E%3C/script">https://unpkg.com/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"&gt;&lt;/script</a>&gt; &lt;style&gt; .track-sizer, .item { width: 20%; } .gutter-sizer { width: 1rem; } .item { height: 100px; margin-block-end: 1rem; } .item:nth-child(odd) { height: 200px; } .item--width2 { width: calc(40% + 1rem); } &lt;/style&gt; &lt;div class="container" data-masonry='{ "itemSelector": ".item", "columnWidth": ".track-sizer", "percentPosition": true, "gutter": ".gutter-sizer" }'&gt; &lt;div class="track-sizer"&gt;&lt;/div&gt; &lt;div class="gutter-sizer"&gt;&lt;/div&gt; &lt;div class="item"&gt;&lt;/div&gt; &lt;div class="item item--width2"&gt;&lt;/div&gt; &lt;div class="item"&gt;&lt;/div&gt; ... &lt;/div&gt; </code></pre> </div> <p>Let’s compare this to what a built-in Masonry implementation would look like:</p> <pre><code>&lt;style&gt; .container { display: grid-lanes; grid-lanes: repeat(4, 20%); gap: 1rem; } .item { height: 100px; } .item:nth-child(odd) { height: 200px; } .item--width2 { grid-column: span 2; } &lt;/style&gt; &lt;div class="container"&gt; &lt;div class="item"&gt;&lt;/div&gt; &lt;div class="item item--width2"&gt;&lt;/div&gt; &lt;div class="item"&gt;&lt;/div&gt; ... &lt;/div&gt; </code></pre> <p>Simpler, more compact code that can just use things like <code>gap</code> and where spanning tracks is done with <code>span 2</code>, just like in grid, and doesn’t require you to calculate the right width that includes the gap size.</p> How To Know What’s Available And When It’s Available? <p>Overall, the question isn’t really if you should use built-in Masonry over a JS library, but rather <em>when</em>. The Masonry JS library is amazing and has been filling a gap in the web platform for many years, and for many happy developers and users. It has a few drawbacks if you compare it to a built-in Masonry implementation, of course, but those are not important if that implementation isn’t ready.</p> <p>It’s easy for me to list these cool new web platform features because I work at a browser vendor, and I therefore tend to know what’s coming. But developers often share, survey after survey, that keeping track of new things is hard. <strong>Staying informed is difficult</strong>, and companies don’t always prioritize learning anyway.</p> <p>To help with this, here are a few resources that provide updates in simple and compact ways so you can get the information you need quickly:</p> <ul> <li> <a href="https://web-platform-dx.github.io/web-features-explorer/">The Web platform features explorer site</a>:<ul> <li>You might be interested in its <a href="https://web-platform-dx.github.io/web-features-explorer/release-notes/october-2025/">release notes</a> page.</li> <li>And, if you like RSS, check out <a href="https://web-platform-dx.github.io/web-features-explorer/release-notes.xml">the release notes feed</a>, as well as the Baseline <a href="https://web-platform-dx.github.io/web-features-explorer/newly-available.xml">Newly Available</a> and <a href="https://web-platform-dx.github.io/web-features-explorer/widely-available.xml">Widely Available</a> feeds.</li> </ul> </li> <li> <a href="https://webstatus.dev/">The Web Platform Status dashboard</a>:<ul> <li>You might like its various <a href="https://webstatus.dev/?q=baseline_date%3A2025-01-01..2025-12-31">Baseline year</a> pages.</li> </ul> </li> <li> <a href="https://chromestatus.com/roadmap">Chrome Platform Status’ roadmap page</a>.</li> </ul> <p>If you have a bit more time, you might also be interested in browser vendors’ release notes:</p> <ul> <li><a href="https://developer.chrome.com/release-notes">Chrome</a></li> <li><a href="https://learn.microsoft.com/en-us/microsoft-edge/web-platform/release-notes/">Edge</a></li> <li><a href="https://www.firefox.com/en-US/releases/">Firefox</a></li> <li><a href="https://developer.apple.com/documentation/safari-release-notes">Safari</a></li> </ul> <p>For even more resources, check out my <a href="https://patrickbrosset.com/lab/navigating-the-web-platform/">Navigating the Web Platform Cheatsheet</a>.</p> My Thing Is Still Not Implemented <p>That’s the other side of the problem. Even if you do find the time, energy, and ways to keep track, there’s still frustration with getting your voice heard and your favorite features implemented.</p> <p>Maybe you’ve been waiting for years for a specific bug to be resolved, or a specific feature to ship in a browser where it’s still missing.</p> <p>What I’ll say is <strong>browser vendors do listen</strong>. I’m part of several cross-organization teams where we discuss developer signals and feedback all the time. We look at many different sources of feedback, both internal at each browser vendor and external/public on forums, open source projects, blogs, and surveys. And, we’re always trying to create better ways for developers to share their specific needs and use cases.</p> <p>So, if you can, please demand more from browser vendors and pressure us to implement the features you need. I get that it takes time, and can also be intimidating (not to mention a high barrier to entry), but it also works.</p> <p>Here are a few ways you can get your (or your company’s) voice heard: Take the annual <a href="https://stateofjs.com/">State of JS</a>, <a href="https://stateofcss.com/">State of CSS</a>, and <a href="https://stateofhtml.com/">State of HTML</a> surveys. They play a big role in how browser vendors prioritize their work.</p> <p>If you need a specific standard-based API to be implemented consistently across browsers, consider submitting a proposal at the next <a href="https://github.com/web-platform-tests/interop/">Interop project</a> iteration. It requires more time, but consider how <a href="https://docs.google.com/document/d/1ICqlNtdRXlhIlRuXFr1BRgy68R6Q5AwPv2b4hsIWUMY/edit">Shopify</a> and <a href="https://www.rumvision.com/blog/interop-2026-key-apis-for-sitespeed-and-rum/">RUMvision</a> shared their wish lists for Interop 2026. Detailed information like this can be very useful for browser vendors to prioritize.</p> <p>For more useful links to influence browser vendors, check out my <a href="https://patrickbrosset.com/lab/navigating-the-web-platform/">Navigating the Web Platform Cheatsheet</a>.</p> Conclusion <p>To close, I hope this article has left you with a few things to think about:</p> <ul> <li>Excitement for Masonry and other upcoming web features.</li> <li>A few web features you might want to start using.</li> <li>A few pieces of custom or 3rd-party code you might be able to remove in favor of built-in features.</li> <li>A few ways to keep track of what’s coming and influence browser vendors.</li> </ul> <p>More importantly, I hope I’ve convinced you of the benefits of using the web platform to its full potential.</p>

<p>As the year winds down, many of us are busy wrapping up projects, meeting deadlines, or getting ready for the holiday season. Why not take a moment amid the end-of-year hustle to set the mood for December with some <strong>wintery desktop wallpapers</strong>? They might just bring a sparkle of inspiration to your workspace in these busy weeks.</p> <p>To provide you with unique and inspiring wallpaper designs each month anew, we started our <a href="https://www.smashingmagazine.com/category/wallpapers">monthly wallpapers series</a> more than 14 years ago. It’s the perfect opportunity both to <a href="https://www.smashingmagazine.com/2015/12/desktop-wallpaper-calendars-join-in/">put your creative skills to the test</a> and to find just the right wallpaper to accompany you through the new month. This December is no exception, of course, so following our <strong>cozy little tradition</strong>, we have a new collection of wallpapers waiting for you below. Each design has been created with love by artists and designers from across the globe and comes in a variety of screen resolutions.</p> <p>A huge <strong>thank-you</strong> to everyone who tickled their creativity and shared their wallpapers with us this time around! This post wouldn’t exist without your kind support. ❤️ Happy December!</p> <ul> <li>You can <strong>click on every image to see a larger preview</strong>.</li> <li>We respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the <strong>full freedom to explore their creativity</strong> and express emotions and experience through their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us but rather designed from scratch by the artists themselves.</li> <li> <strong><a href="https://www.smashingmagazine.com/desktop-wallpaper-calendars-join-in/">Submit your wallpaper design!</a></strong> 🎨<br>We are always <strong>looking for creative talent</strong> and would love to feature <em>your</em> desktop wallpaper in one of our upcoming posts. <a href="https://www.smashingmagazine.com/desktop-wallpaper-calendars-join-in/">Join in ↬</a> </li> </ul> Zero-Gravity December <p>“Floating in space, decorating the Christmas tree, unbothered by the familiar weight of New Year’s resolutions waiting back on Earth every December.” — Designed by <a href="https://www.gingeritsolutions.com/">Ginger It Solutions</a> from Serbia.</p> <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/dec-25-zero-gravity-december-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-december-2025/dec-25-zero-gravity-december-preview-opt.png"></a> <ul> <li><a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/dec-25-zero-gravity-december-preview.png">preview</a></li> <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/cal/dec-25-zero-gravity-december-cal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/cal/dec-25-zero-gravity-december-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/cal/dec-25-zero-gravity-december-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/cal/dec-25-zero-gravity-december-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/cal/dec-25-zero-gravity-december-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/cal/dec-25-zero-gravity-december-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/cal/dec-25-zero-gravity-december-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/cal/dec-25-zero-gravity-december-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/cal/dec-25-zero-gravity-december-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/cal/dec-25-zero-gravity-december-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/cal/dec-25-zero-gravity-december-cal-1280x1020.png">1280x1020</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/cal/dec-25-zero-gravity-december-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/cal/dec-25-zero-gravity-december-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/cal/dec-25-zero-gravity-december-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/cal/dec-25-zero-gravity-december-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/cal/dec-25-zero-gravity-december-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/cal/dec-25-zero-gravity-december-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/cal/dec-25-zero-gravity-december-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/cal/dec-25-zero-gravity-december-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/cal/dec-25-zero-gravity-december-cal-2560x1440.png">2560x1440</a> </li> <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/nocal/dec-25-zero-gravity-december-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/nocal/dec-25-zero-gravity-december-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/nocal/dec-25-zero-gravity-december-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/nocal/dec-25-zero-gravity-december-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/nocal/dec-25-zero-gravity-december-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/nocal/dec-25-zero-gravity-december-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/nocal/dec-25-zero-gravity-december-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/nocal/dec-25-zero-gravity-december-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/nocal/dec-25-zero-gravity-december-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/nocal/dec-25-zero-gravity-december-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/nocal/dec-25-zero-gravity-december-nocal-1280x1020.png">1280x1020</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/nocal/dec-25-zero-gravity-december-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/nocal/dec-25-zero-gravity-december-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/nocal/dec-25-zero-gravity-december-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/nocal/dec-25-zero-gravity-december-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/nocal/dec-25-zero-gravity-december-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/nocal/dec-25-zero-gravity-december-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/nocal/dec-25-zero-gravity-december-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/nocal/dec-25-zero-gravity-december-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/zero-gravity-december/nocal/dec-25-zero-gravity-december-nocal-2560x1440.png">2560x1440</a> </li> </ul> A Quiet December Walk <p>“In the stillness of a snowy forest, a man and his loyal dog share a peaceful winter walk. The world is hushed beneath a blanket of white, with only soft flakes falling and the crunch of footsteps breaking the silence. It’s a simple, serene moment that captures the calm beauty of December and the quiet joy of companionship in nature’s winter glow.” — Designed by <a href="https://www.popwebdesign.net/">PopArt Studio</a> from Serbia.</p> <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/dec-25-a-quiet-december-walk-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-december-2025/dec-25-a-quiet-december-walk-preview-opt.png"></a> <ul> <li><a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/dec-25-a-quiet-december-walk-preview.png">preview</a></li> <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/cal/dec-25-a-quiet-december-walk-cal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/cal/dec-25-a-quiet-december-walk-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/cal/dec-25-a-quiet-december-walk-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/cal/dec-25-a-quiet-december-walk-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/cal/dec-25-a-quiet-december-walk-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/cal/dec-25-a-quiet-december-walk-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/cal/dec-25-a-quiet-december-walk-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/cal/dec-25-a-quiet-december-walk-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/cal/dec-25-a-quiet-december-walk-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/cal/dec-25-a-quiet-december-walk-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/cal/dec-25-a-quiet-december-walk-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/cal/dec-25-a-quiet-december-walk-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/cal/dec-25-a-quiet-december-walk-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/cal/dec-25-a-quiet-december-walk-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/cal/dec-25-a-quiet-december-walk-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/cal/dec-25-a-quiet-december-walk-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/cal/dec-25-a-quiet-december-walk-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/cal/dec-25-a-quiet-december-walk-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/cal/dec-25-a-quiet-december-walk-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/cal/dec-25-a-quiet-december-walk-cal-2560x1440.png">2560x1440</a> </li> <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/nocal/dec-25-a-quiet-december-walk-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/nocal/dec-25-a-quiet-december-walk-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/nocal/dec-25-a-quiet-december-walk-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/nocal/dec-25-a-quiet-december-walk-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/nocal/dec-25-a-quiet-december-walk-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/nocal/dec-25-a-quiet-december-walk-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/nocal/dec-25-a-quiet-december-walk-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/nocal/dec-25-a-quiet-december-walk-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/nocal/dec-25-a-quiet-december-walk-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/nocal/dec-25-a-quiet-december-walk-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/nocal/dec-25-a-quiet-december-walk-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/nocal/dec-25-a-quiet-december-walk-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/nocal/dec-25-a-quiet-december-walk-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/nocal/dec-25-a-quiet-december-walk-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/nocal/dec-25-a-quiet-december-walk-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/nocal/dec-25-a-quiet-december-walk-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/nocal/dec-25-a-quiet-december-walk-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/nocal/dec-25-a-quiet-december-walk-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/nocal/dec-25-a-quiet-december-walk-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/a-quiet-december-walk/nocal/dec-25-a-quiet-december-walk-nocal-2560x1440.png">2560x1440</a> </li> </ul> Quoted Rudolph <p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p> <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/dec-25-quoted-rudolph-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-december-2025/dec-25-quoted-rudolph-preview-opt.png"></a> <ul> <li><a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/dec-25-quoted-rudolph-preview.png">preview</a></li> <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/cal/dec-25-quoted-rudolph-cal-3840x2160.png">3840x2160</a> </li> <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/quoted-rudolph/nocal/dec-25-quoted-rudolph-nocal-3840x2160.png">3840x2160</a> </li> </ul> Learning Is An Art <p>“The year is coming to an end. A year full of adventures, projects, unforgettable moments, and others that will fade into oblivion. And it’s this month that we start preparing for next year, organizing it and hoping it will be at least as good as the last, and that it will give us 365 days to savor from the first to the last. This month we share Katherine Johnson and some wise words that we shouldn’t forget: ‘I like to learn. It’s an art and a science.’” — Designed by <a href="https://www.silocreativo.com/en/">Veronica Valenzuela Jimenez</a> from Spain.</p> <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/dec-25-learning-is-an-art-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-december-2025/dec-25-learning-is-an-art-preview-opt.png"></a> <ul> <li><a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/dec-25-learning-is-an-art-preview.png">preview</a></li> <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/cal/dec-25-learning-is-an-art-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/cal/dec-25-learning-is-an-art-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/cal/dec-25-learning-is-an-art-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/cal/dec-25-learning-is-an-art-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/cal/dec-25-learning-is-an-art-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/cal/dec-25-learning-is-an-art-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/cal/dec-25-learning-is-an-art-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/cal/dec-25-learning-is-an-art-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/cal/dec-25-learning-is-an-art-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/cal/dec-25-learning-is-an-art-cal-2560x1440.png">2560x1440</a> </li> <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/nocal/dec-25-learning-is-an-art-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/nocal/dec-25-learning-is-an-art-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/nocal/dec-25-learning-is-an-art-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/nocal/dec-25-learning-is-an-art-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/nocal/dec-25-learning-is-an-art-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/nocal/dec-25-learning-is-an-art-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/nocal/dec-25-learning-is-an-art-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/nocal/dec-25-learning-is-an-art-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/nocal/dec-25-learning-is-an-art-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/learning-is-an-art/nocal/dec-25-learning-is-an-art-nocal-2560x1440.png">2560x1440</a> </li> </ul> Chilly Dog, Warm Troubles <p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p> <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/dec-25-chilly-dog-warm-troubles-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-december-2025/dec-25-chilly-dog-warm-troubles-preview-opt.png"></a> <ul> <li><a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/dec-25-chilly-dog-warm-troubles-preview.png">preview</a></li> <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/cal/dec-25-chilly-dog-warm-troubles-cal-3840x2160.png">3840x2160</a> </li> <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/chilly-dog-warm-troubles/nocal/dec-25-chilly-dog-warm-troubles-nocal-3840x2160.png">3840x2160</a> </li> </ul> Modern Christmas Magic <p>“A fusion of modern Christmas aesthetics and a user-centric mobile app development company, crafting delightful holiday-inspired digital experiences.” — Designed by the <a href="https://www.zco.com/">Zco Corporation Design Team</a> from the United States.</p> <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/dec-25-modern-christmas-magic-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-december-2025/dec-25-modern-christmas-magic-preview-opt.png"></a> <ul> <li><a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/dec-25-modern-christmas-magic-preview.png">preview</a></li> <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/cal/dec-25-modern-christmas-magic-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/cal/dec-25-modern-christmas-magic-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/cal/dec-25-modern-christmas-magic-cal-1400x900.png">1400x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/cal/dec-25-modern-christmas-magic-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/cal/dec-25-modern-christmas-magic-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/cal/dec-25-modern-christmas-magic-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/cal/dec-25-modern-christmas-magic-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/cal/dec-25-modern-christmas-magic-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/cal/dec-25-modern-christmas-magic-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/cal/dec-25-modern-christmas-magic-cal-2560x1440.png">2560x1440</a> </li> <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/nocal/dec-25-modern-christmas-magic-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/nocal/dec-25-modern-christmas-magic-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/nocal/dec-25-modern-christmas-magic-nocal-1400x900.png">1400x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/nocal/dec-25-modern-christmas-magic-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/nocal/dec-25-modern-christmas-magic-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/nocal/dec-25-modern-christmas-magic-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/nocal/dec-25-modern-christmas-magic-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/nocal/dec-25-modern-christmas-magic-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/nocal/dec-25-modern-christmas-magic-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-25/modern-christmas-magic/nocal/dec-25-modern-christmas-magic-nocal-2560x1440.png">2560x1440</a> </li> </ul> Dear Moon, Merry Christmas <p>Designed by <a href="https://vlad.studio/">Vlad Gerasimov</a> from Georgia.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/69d1bfe5-28c1-489a-80e7-0e74ec404bad/dec-19-dear-moon-merry-christmas-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a6b9bd64-491c-4be4-bb3e-0295fea6f0c6/dec-19-dear-moon-merry-christmas-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a6b9bd64-491c-4be4-bb3e-0295fea6f0c6/dec-19-dear-moon-merry-christmas-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-1024x600.jpg">1024x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-1440x960.jpg">1440x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-1600x900.jpg">1600x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-2560x1440.jpg">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-2560x1600.jpg">2560x1600</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-2880x1800.jpg">2880x1800</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-3072x1920.jpg">3072x1920</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-3840x2160.jpg">3840x2160</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-19/dear-moon-merry-christmas/nocal/dec-19-dear-moon-merry-christmas-nocal-5120x2880.jpg">5120x2880</a> </li> </ul> It’s In The Little Things <p>Designed by Thaïs Lenglez from Belgium.</p> <a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-december-2024/dec-13-its-in-the-little-things-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-december-2024/dec-13-its-in-the-little-things-preview-opt.png"></a> <ul> <li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-december-2024/dec-13-its-in-the-little-things-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-13/its-in-the-little-things/nocal/dec-13-its-in-the-little-things-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/its-in-the-little-things/nocal/dec-13-its-in-the-little-things-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/its-in-the-little-things/nocal/dec-13-its-in-the-little-things-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/its-in-the-little-things/nocal/dec-13-its-in-the-little-things-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/its-in-the-little-things/nocal/dec-13-its-in-the-little-things-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/its-in-the-little-things/nocal/dec-13-its-in-the-little-things-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/its-in-the-little-things/nocal/dec-13-its-in-the-little-things-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/its-in-the-little-things/nocal/dec-13-its-in-the-little-things-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/its-in-the-little-things/nocal/dec-13-its-in-the-little-things-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/its-in-the-little-things/nocal/dec-13-its-in-the-little-things-nocal-2560x1440.png">2560x1440</a> </li> </ul> The House On The River Drina <p>“Since we often yearn for a peaceful and quiet place to work, we have found inspiration in the famous house on the River Drina in Bajina Bašta, Serbia. Wouldn’t it be great being in nature, away from civilization, swaying in the wind and listening to the waves of the river smashing your house, having no neighbors to bother you? Not sure about the Internet, though…” — Designed by <a href="https://www.popwebdesign.net/index_eng.html">PopArt Studio</a> from Serbia.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b63a58fb-92a5-4f9d-81b3-c90e2cfd9b5a/dec-16-the-house-on-the-river-drina-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4b8776b3-8fdf-469a-b5b2-591d535d02b6/dec-16-the-house-on-the-river-drina-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4b8776b3-8fdf-469a-b5b2-591d535d02b6/dec-16-the-house-on-the-river-drina-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-house-on-the-river-drina/nocal/dec-16-the-house-on-the-river-drina-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-house-on-the-river-drina/nocal/dec-16-the-house-on-the-river-drina-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-house-on-the-river-drina/nocal/dec-16-the-house-on-the-river-drina-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-house-on-the-river-drina/nocal/dec-16-the-house-on-the-river-drina-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-house-on-the-river-drina/nocal/dec-16-the-house-on-the-river-drina-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-house-on-the-river-drina/nocal/dec-16-the-house-on-the-river-drina-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-house-on-the-river-drina/nocal/dec-16-the-house-on-the-river-drina-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-house-on-the-river-drina/nocal/dec-16-the-house-on-the-river-drina-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-house-on-the-river-drina/nocal/dec-16-the-house-on-the-river-drina-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-house-on-the-river-drina/nocal/dec-16-the-house-on-the-river-drina-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-house-on-the-river-drina/nocal/dec-16-the-house-on-the-river-drina-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-house-on-the-river-drina/nocal/dec-16-the-house-on-the-river-drina-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-house-on-the-river-drina/nocal/dec-16-the-house-on-the-river-drina-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-house-on-the-river-drina/nocal/dec-16-the-house-on-the-river-drina-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-house-on-the-river-drina/nocal/dec-16-the-house-on-the-river-drina-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-house-on-the-river-drina/nocal/dec-16-the-house-on-the-river-drina-nocal-2560x1440.jpg">2560x1440</a> </li> </ul> Christmas Cookies <p>“Christmas is coming and a great way to share our love is by baking cookies.” — Designed by <a href="https://www.mariakellerac.com/">Maria Keller</a> from Mexico.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/57f8e478-f6a2-4eeb-bac0-45d8dd01d7cb/dec-17-christmas-cookies-full.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/251c117b-6e3a-42eb-b274-82af1abf00ed/dec-17-christmas-cookies-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/251c117b-6e3a-42eb-b274-82af1abf00ed/dec-17-christmas-cookies-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-640x1136.png">640x1136</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-750x1334.png">750x1334</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-1242x2208.png">1242x2208</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-2560x1440.png">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-cookies/nocal/dec-17-christmas-cookies-nocal-2880x1800.png">2880x1800</a> </li> </ul> Sweet Snowy Tenderness <p>“You know that warm feeling when you get to spend cold winter days in a snug, homey, relaxed atmosphere? Oh, yes, we love it, too! It is the sentiment we set our hearts on for the holiday season, and this sweet snowy tenderness is for all of us who adore watching the snowfall from our windows. Isn’t it romantic?” — Designed by <a href="https://www.popwebdesign.net/">PopArt Studio</a> from Serbia.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/29ad3ce1-0f4e-4c84-a7fd-222e00e8f544/dec-18-sweet-snowy-tenderness-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6179490e-9ece-4078-8a4b-d37c27f546b4/dec-18-sweet-snowy-tenderness-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6179490e-9ece-4078-8a4b-d37c27f546b4/dec-18-sweet-snowy-tenderness-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/sweet-snowy-tenderness/nocal/dec-18-sweet-snowy-tenderness-nocal-2560x1440.jpg">2560x1440</a> </li> </ul> Anonymoose <p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/83743101-3686-4fa1-8527-f43b5298c85f/dec-21-anonymoose-nocal-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/53276d0a-8060-42fc-adea-e59eed8f78e8/dec-21-anonymoose-nocal-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/53276d0a-8060-42fc-adea-e59eed8f78e8/dec-21-anonymoose-nocal-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-2560x1440.png">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/anonymoose/nocal/dec-21-anonymoose-nocal-3840x2160.png">3840x2160</a> </li> </ul> Cardinals In Snowfall <p>“During Christmas season, in the cold, colorless days of winter, Cardinal birds are seen as symbols of faith and warmth. In the part of America I live in, there is snowfall every December. While the snow is falling, I can see gorgeous Cardinals flying in and out of my patio. The intriguing color palette of the bright red of the Cardinals, the white of the flurries, and the brown/black of dry twigs and fallen leaves on the snow-laden ground fascinates me a lot, and inspired me to create this quaint and sweet, hand-illustrated surface pattern design as I wait for the snowfall in my town!” — Designed by <a href="https://pineconedream.com/">Gyaneshwari Dave</a> from the United States.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/27101977-9a61-41b9-9e80-445f3a8932af/dec-18-cardinals-in-snowfall-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0a28051e-b3bc-4eff-a30b-2456c249aed5/dec-18-cardinals-in-snowfall-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0a28051e-b3bc-4eff-a30b-2456c249aed5/dec-18-cardinals-in-snowfall-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-18/cardinals-in-snowfall/nocal/dec-18-cardinals-in-snowfall-nocal-640x960.jpg">640x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/cardinals-in-snowfall/nocal/dec-18-cardinals-in-snowfall-nocal-768x1024.jpg">768x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/cardinals-in-snowfall/nocal/dec-18-cardinals-in-snowfall-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/cardinals-in-snowfall/nocal/dec-18-cardinals-in-snowfall-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/cardinals-in-snowfall/nocal/dec-18-cardinals-in-snowfall-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/cardinals-in-snowfall/nocal/dec-18-cardinals-in-snowfall-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/cardinals-in-snowfall/nocal/dec-18-cardinals-in-snowfall-nocal-2560x1440.jpg">2560x1440</a> </li> </ul> Getting Hygge <p>“There’s no more special time for a fire than in the winter. Cozy blankets, warm beverages, and good company can make all the difference when the sun goes down. We’re all looking forward to generating some hygge this winter, so snuggle up and make some memories.” — Designed by <a href="https://www.thehannongroup.com/">The Hannon Group</a> from Washington D.C.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ad2c8c59-c9c4-4153-a57e-8602ff6e09d7/dec-17-getting-hygge-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1145e84f-229d-4f9e-82b6-370c707e695c/dec-17-getting-hygge-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1145e84f-229d-4f9e-82b6-370c707e695c/dec-17-getting-hygge-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-17/getting-hygge/nocal/dec-17-getting-hygge-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/getting-hygge/nocal/dec-17-getting-hygge-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/getting-hygge/nocal/dec-17-getting-hygge-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/getting-hygge/nocal/dec-17-getting-hygge-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/getting-hygge/nocal/dec-17-getting-hygge-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/getting-hygge/nocal/dec-17-getting-hygge-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/getting-hygge/nocal/dec-17-getting-hygge-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/getting-hygge/nocal/dec-17-getting-hygge-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/getting-hygge/nocal/dec-17-getting-hygge-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/getting-hygge/nocal/dec-17-getting-hygge-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/getting-hygge/nocal/dec-17-getting-hygge-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/getting-hygge/nocal/dec-17-getting-hygge-nocal-2560x1440.png">2560x1440</a> </li> </ul> Christmas Woodland <p>Designed by <a href="https://melarmstrongdesign.com/">Mel Armstrong</a> from Australia.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3ebce7f3-b902-49e1-8c71-59f7ebffe370/dec-17-christmas-woodland-full.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2ef5c205-d211-4776-ad9e-f69626f25b88/dec-17-christmas-woodland-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2ef5c205-d211-4776-ad9e-f69626f25b88/dec-17-christmas-woodland-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-woodland/nocal/dec-17-christmas-woodland-nocal-2560x1440.png">2560x1440</a> </li> </ul> Joy To The World <p>“Joy to the world, all the boys and girls now, joy to the fishes in the deep blue sea, joy to you and me.” — Designed by Morgan Newnham from Boulder, Colorado.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/542d1894-584a-4537-b3c1-142deda3ab5c/dec-17-joy-to-the-world-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68553142-95b5-47da-9007-e50407f8c5d9/dec-17-joy-to-the-world-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68553142-95b5-47da-9007-e50407f8c5d9/dec-17-joy-to-the-world-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-17/joy-to-the-world/nocal/dec-17-joy-to-the-world-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/joy-to-the-world/nocal/dec-17-joy-to-the-world-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/joy-to-the-world/nocal/dec-17-joy-to-the-world-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/joy-to-the-world/nocal/dec-17-joy-to-the-world-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/joy-to-the-world/nocal/dec-17-joy-to-the-world-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/joy-to-the-world/nocal/dec-17-joy-to-the-world-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/joy-to-the-world/nocal/dec-17-joy-to-the-world-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/joy-to-the-world/nocal/dec-17-joy-to-the-world-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/joy-to-the-world/nocal/dec-17-joy-to-the-world-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/joy-to-the-world/nocal/dec-17-joy-to-the-world-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/joy-to-the-world/nocal/dec-17-joy-to-the-world-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/joy-to-the-world/nocal/dec-17-joy-to-the-world-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/joy-to-the-world/nocal/dec-17-joy-to-the-world-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/joy-to-the-world/nocal/dec-17-joy-to-the-world-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/joy-to-the-world/nocal/dec-17-joy-to-the-world-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/joy-to-the-world/nocal/dec-17-joy-to-the-world-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/joy-to-the-world/nocal/dec-17-joy-to-the-world-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/joy-to-the-world/nocal/dec-17-joy-to-the-world-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/joy-to-the-world/nocal/dec-17-joy-to-the-world-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/joy-to-the-world/nocal/dec-17-joy-to-the-world-nocal-2560x1440.png">2560x1440</a> </li> </ul> Gifts Lover <p>Designed by <a href="https://www.doud.be/">Elise Vanoorbeek</a> from Belgium.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/25b69dac-5d0b-4e0a-bf39-b2554ec557db/dec-14-gifts-lover-full.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3c9e03e4-efa6-4fb8-8a0d-69f1edd9479a/dec-14-gifts-lover-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3c9e03e4-efa6-4fb8-8a0d-69f1edd9479a/dec-14-gifts-lover-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-14/gifts-lover/nocal/dec-14-gifts-lover-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-14/gifts-lover/nocal/dec-14-gifts-lover-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-14/gifts-lover/nocal/dec-14-gifts-lover-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-14/gifts-lover/nocal/dec-14-gifts-lover-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-14/gifts-lover/nocal/dec-14-gifts-lover-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-14/gifts-lover/nocal/dec-14-gifts-lover-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-14/gifts-lover/nocal/dec-14-gifts-lover-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-14/gifts-lover/nocal/dec-14-gifts-lover-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-14/gifts-lover/nocal/dec-14-gifts-lover-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-14/gifts-lover/nocal/dec-14-gifts-lover-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-14/gifts-lover/nocal/dec-14-gifts-lover-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-14/gifts-lover/nocal/dec-14-gifts-lover-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-14/gifts-lover/nocal/dec-14-gifts-lover-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-14/gifts-lover/nocal/dec-14-gifts-lover-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-14/gifts-lover/nocal/dec-14-gifts-lover-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-14/gifts-lover/nocal/dec-14-gifts-lover-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-14/gifts-lover/nocal/dec-14-gifts-lover-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-14/gifts-lover/nocal/dec-14-gifts-lover-nocal-2560x1440.jpg">2560x1440</a> </li> </ul> King Of Pop <p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/45cc8a5d-29ae-435d-a68d-2991d779c936/dec-21-king-of-pop-nocal-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cd870c1d-c7fb-44ab-9e70-5cac012691fb/dec-21-king-of-pop-nocal-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cd870c1d-c7fb-44ab-9e70-5cac012691fb/dec-21-king-of-pop-nocal-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-2560x1440.png">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/king-of-pop/nocal/dec-21-king-of-pop-nocal-3840x2160.png">3840x2160</a> </li> </ul> The Matterhorn <p>“Christmas is always such a magical time of year so we created this wallpaper to blend the majestry of the mountains with a little bit of magic.” — Designed by Dominic Leonard from the United Kingdom.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/94e4bf3b-1ef4-4679-80ab-00c831c2be80/dec-16-the-matterhorn-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/25937464-9e3c-4bf5-9fc3-611b54699aa6/dec-16-the-matterhorn-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/25937464-9e3c-4bf5-9fc3-611b54699aa6/dec-16-the-matterhorn-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-matterhorn/nocal/dec-16-the-matterhorn-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-matterhorn/nocal/dec-16-the-matterhorn-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-matterhorn/nocal/dec-16-the-matterhorn-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-matterhorn/nocal/dec-16-the-matterhorn-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-matterhorn/nocal/dec-16-the-matterhorn-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-matterhorn/nocal/dec-16-the-matterhorn-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-matterhorn/nocal/dec-16-the-matterhorn-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-matterhorn/nocal/dec-16-the-matterhorn-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-matterhorn/nocal/dec-16-the-matterhorn-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/the-matterhorn/nocal/dec-16-the-matterhorn-nocal-2560x1440.png">2560x1440</a> </li> </ul> Ninja Santa <p>Designed by Elise Vanoorbeek from Belgium.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/caf4e170-afb2-458a-af83-b67925f3ea7e/dec-13-ninja-santa-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/72db2dde-7f71-4aac-88c3-f17b540e8343/dec-13-ninja-santa-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/72db2dde-7f71-4aac-88c3-f17b540e8343/dec-13-ninja-santa-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-13/ninja-santa/nocal/dec-13-ninja-santa-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/ninja-santa/nocal/dec-13-ninja-santa-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/ninja-santa/nocal/dec-13-ninja-santa-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/ninja-santa/nocal/dec-13-ninja-santa-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/ninja-santa/nocal/dec-13-ninja-santa-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/ninja-santa/nocal/dec-13-ninja-santa-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/ninja-santa/nocal/dec-13-ninja-santa-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/ninja-santa/nocal/dec-13-ninja-santa-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/ninja-santa/nocal/dec-13-ninja-santa-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/ninja-santa/nocal/dec-13-ninja-santa-nocal-2560x1440.jpg">2560x1440</a> </li> </ul> Ice Flowers <p>“I took some photos during a very frosty and cold week before Christmas.” Designed by <a href="https://kyu-to.deviantart.com/">Anca Varsandan</a> from Romania.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f14d58a3-b787-483b-a2e4-a3400d50dfed/january-10-ice-flowers-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7b4a5499-4254-4d4f-a460-0f0964721a55/january-10-ice-flowers-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7b4a5499-4254-4d4f-a460-0f0964721a55/january-10-ice-flowers-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/101dfe78-547b-4f28-ad00-c3f08302cbe1/january-10-ice-flowers-nocal-1024x768.jpg">1024x768</a>, <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/33993672-e95d-4729-a836-7af5f941812c/january-10-ice-flowers-nocal-1280x800.jpg">1280x800</a>, <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/14522cd5-614d-4597-b488-44ffa3e6f3f2/january-10-ice-flowers-nocal-1440x900.jpg">1440x900</a>, <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0d43a061-dd0c-47f9-af83-a3d7413c719b/january-10-ice-flowers-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f3822fa3-5814-4b90-96bc-ef75191a9243/january-10-ice-flowers-nocal-1920x1200.jpg">1920x1200</a> </li> </ul> Christmas Selfie <p>Designed by <a href="https://www.elacarta.com/">Emanuela Carta</a> from Italy.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3eac541a-4c0e-45a9-ab06-7ec0fee72084/dec-16-christmas-selfie-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3df98b9f-310f-4a63-b885-6b97ba4edccf/dec-16-christmas-selfie-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3df98b9f-310f-4a63-b885-6b97ba4edccf/dec-16-christmas-selfie-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-16/christmas-selfie/nocal/dec-16-christmas-selfie-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/christmas-selfie/nocal/dec-16-christmas-selfie-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/christmas-selfie/nocal/dec-16-christmas-selfie-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/christmas-selfie/nocal/dec-16-christmas-selfie-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/christmas-selfie/nocal/dec-16-christmas-selfie-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/christmas-selfie/nocal/dec-16-christmas-selfie-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/christmas-selfie/nocal/dec-16-christmas-selfie-nocal-2560x1440.png">2560x1440</a> </li> </ul> Winter Wonderland <p>“‘Winter is the time for comfort, for good food and warmth, for the touch of a friendly hand and for a talk beside the fire: it is the time for home.’ (Edith Sitwell) — Designed by <a href="https://itobuz.com/">Dipanjan Karmakar</a> from India.</p> <a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-dec-2023/dec-16-winter-wonderland-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-dec-2023/dec-16-winter-wonderland-preview-opt.png"></a> <ul> <li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-dec-2023/dec-16-winter-wonderland-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-16/winter-wonderland/nocal/dec-16-winter-wonderland-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/winter-wonderland/nocal/dec-16-winter-wonderland-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/winter-wonderland/nocal/dec-16-winter-wonderland-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/winter-wonderland/nocal/dec-16-winter-wonderland-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/winter-wonderland/nocal/dec-16-winter-wonderland-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/winter-wonderland/nocal/dec-16-winter-wonderland-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/winter-wonderland/nocal/dec-16-winter-wonderland-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/winter-wonderland/nocal/dec-16-winter-wonderland-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/winter-wonderland/nocal/dec-16-winter-wonderland-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/winter-wonderland/nocal/dec-16-winter-wonderland-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/winter-wonderland/nocal/dec-16-winter-wonderland-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/winter-wonderland/nocal/dec-16-winter-wonderland-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/winter-wonderland/nocal/dec-16-winter-wonderland-nocal-2560x1440.jpg">2560x1440</a> </li> </ul> Winter Coziness At Home <p>“Winter coziness that we all feel when we come home after spending some time outside or when we come to our parental home to celebrate Christmas inspired our designers. Home is the place where we can feel safe and sound, so we couldn’t help ourselves but create this calendar.” — Designed by <a href="http://masterbundles.com/">MasterBundles</a> from Ukraine.</p> <a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-dec-2023/dec-22-winter-coziness-at-home-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-dec-2023/dec-22-winter-coziness-at-home-preview-opt.png"></a> <ul> <li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-dec-2023/dec-22-winter-coziness-at-home-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-320%D1%85480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-640%D1%85480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-800%D1%85480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-800%D1%85600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-1024%D1%85768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-1024%D1%851024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-1152%D1%85864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-1280%D1%85720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-1280%D1%85800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-1280%D1%85960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-1280%D1%851024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-1366%D1%85768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-1400%D1%851050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-1440%D1%85900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-1600%D1%851200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-1680%D1%851050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-1680%D1%851200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-1920%D1%851080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-1920%D1%851200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-1920%D1%851440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/dec-22/winter-coziness-at-home/nocal/dec-22-winter-coziness-at-home-nocal-2560%D1%851440.png">2560x1440</a> </li> </ul> Enchanted Blizzard <p>“A seemingly forgotten world under the shade of winter glaze hides a moment where architecture meets fashion and change encounters steadiness.” — Designed by <a href="https://www.creitive.com/">Ana Masnikosa</a> from Belgrade, Serbia.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/913ccea9-595b-4aff-9550-0afec57203cc/dec-17-enchanted-blizzard-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/21da6af5-5de8-44c2-9a02-d0e17a1425fa/dec-17-enchanted-blizzard-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/21da6af5-5de8-44c2-9a02-d0e17a1425fa/dec-17-enchanted-blizzard-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-17/enchanted-blizzard/nocal/dec-17-enchanted-blizzard-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/enchanted-blizzard/nocal/dec-17-enchanted-blizzard-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/enchanted-blizzard/nocal/dec-17-enchanted-blizzard-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/enchanted-blizzard/nocal/dec-17-enchanted-blizzard-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/enchanted-blizzard/nocal/dec-17-enchanted-blizzard-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/enchanted-blizzard/nocal/dec-17-enchanted-blizzard-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/enchanted-blizzard/nocal/dec-17-enchanted-blizzard-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/enchanted-blizzard/nocal/dec-17-enchanted-blizzard-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/enchanted-blizzard/nocal/dec-17-enchanted-blizzard-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/enchanted-blizzard/nocal/dec-17-enchanted-blizzard-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/enchanted-blizzard/nocal/dec-17-enchanted-blizzard-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/enchanted-blizzard/nocal/dec-17-enchanted-blizzard-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/enchanted-blizzard/nocal/dec-17-enchanted-blizzard-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/enchanted-blizzard/nocal/dec-17-enchanted-blizzard-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/enchanted-blizzard/nocal/dec-17-enchanted-blizzard-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/enchanted-blizzard/nocal/dec-17-enchanted-blizzard-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/enchanted-blizzard/nocal/dec-17-enchanted-blizzard-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/enchanted-blizzard/nocal/dec-17-enchanted-blizzard-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/enchanted-blizzard/nocal/dec-17-enchanted-blizzard-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/enchanted-blizzard/nocal/dec-17-enchanted-blizzard-nocal-2560x1440.png">2560x1440</a> </li> </ul> All That Belongs To The Past <p>“Sometimes new beginnings make us revisit our favorite places or people from the past. We don’t visit them often because they remind us of the past but enjoy the brief reunion. Cheers to new beginnings in the new year!” Designed by <a href="https://dorvandavoudi.com/">Dorvan Davoudi</a> from Canada.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/102edbd6-ebf2-4df9-9218-7d506a069725/jan-16-all-that-belongs-to-the-past-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e3260240-ab67-4cc8-b391-6e4a412e8b75/jan-16-all-that-belongs-to-the-past-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e3260240-ab67-4cc8-b391-6e4a412e8b75/jan-16-all-that-belongs-to-the-past-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/jan-16/all-that-belongs-to-the-past/nocal/jan-16-all-that-belongs-to-the-past-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/all-that-belongs-to-the-past/nocal/jan-16-all-that-belongs-to-the-past-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/all-that-belongs-to-the-past/nocal/jan-16-all-that-belongs-to-the-past-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/all-that-belongs-to-the-past/nocal/jan-16-all-that-belongs-to-the-past-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/all-that-belongs-to-the-past/nocal/jan-16-all-that-belongs-to-the-past-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/all-that-belongs-to-the-past/nocal/jan-16-all-that-belongs-to-the-past-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/all-that-belongs-to-the-past/nocal/jan-16-all-that-belongs-to-the-past-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/all-that-belongs-to-the-past/nocal/jan-16-all-that-belongs-to-the-past-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/all-that-belongs-to-the-past/nocal/jan-16-all-that-belongs-to-the-past-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/all-that-belongs-to-the-past/nocal/jan-16-all-that-belongs-to-the-past-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/all-that-belongs-to-the-past/nocal/jan-16-all-that-belongs-to-the-past-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/all-that-belongs-to-the-past/nocal/jan-16-all-that-belongs-to-the-past-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/all-that-belongs-to-the-past/nocal/jan-16-all-that-belongs-to-the-past-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/all-that-belongs-to-the-past/nocal/jan-16-all-that-belongs-to-the-past-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/all-that-belongs-to-the-past/nocal/jan-16-all-that-belongs-to-the-past-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/all-that-belongs-to-the-past/nocal/jan-16-all-that-belongs-to-the-past-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/all-that-belongs-to-the-past/nocal/jan-16-all-that-belongs-to-the-past-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/jan-16/all-that-belongs-to-the-past/nocal/jan-16-all-that-belongs-to-the-past-nocal-2560x1440.jpg">2560x1440</a> </li> </ul> December Through Different Eyes <p>“As a Belgian, December reminds me of snow, coziness, winter, lights, and so on. However, in the Southern hemisphere, it is summer at this time. With my illustration I wanted to show the different perspectives on December. I wish you all a Merry Christmas and Happy New Year!” — Designed by Jo Smets from Belgium.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9a6afdb7-0898-40ce-9a8c-8d9b0b72db1c/dec-16-december-through-different-eyes-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/052848c9-5532-465f-bbac-760188d9f416/dec-16-december-through-different-eyes-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/052848c9-5532-465f-bbac-760188d9f416/dec-16-december-through-different-eyes-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-16/december-through-different-eyes/nocal/dec-16-december-through-different-eyes-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/december-through-different-eyes/nocal/dec-16-december-through-different-eyes-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/december-through-different-eyes/nocal/dec-16-december-through-different-eyes-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/december-through-different-eyes/nocal/dec-16-december-through-different-eyes-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/december-through-different-eyes/nocal/dec-16-december-through-different-eyes-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-16/december-through-different-eyes/nocal/dec-16-december-through-different-eyes-nocal-2560x1440.png">2560x1440</a> </li> </ul> Silver Winter <p>Designed by <a href="https://www.violetadabija.com/">Violeta Dabija</a> from Moldova.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/37e2aa55-5962-44dd-86a7-9d677e3df446/january-11-silver-winter-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/00c28b2f-a996-41f4-a7f4-34c602e7bfd0/january-11-silver-winter-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/00c28b2f-a996-41f4-a7f4-34c602e7bfd0/january-11-silver-winter-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4cb3a715-654c-4023-9ec9-a6714a653e46/january-11-silver-winter-52-nocal-1024x768.jpg">1024x768</a>, <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/35c171e7-9192-492e-bbef-55eaae9b0942/january-11-silver-winter-52-nocal-1280x800.jpg">1280x800</a>, <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1b99a584-7703-408f-bbd5-5f4e1ba2b4f5/january-11-silver-winter-52-nocal-1440x900.jpg">1440x900</a>, <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5950575b-f30d-4a0d-83e7-0fc877c911a5/january-11-silver-winter-52-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a862a30e-ec77-410c-b9a4-7f471a63472f/january-11-silver-winter-52-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e627ba9b-47ea-41c4-abb5-3aa7c936750a/january-11-silver-winter-52-nocal-2560x1440.jpg">2560x1440</a> </li> </ul> Cozy <p>“December is all about coziness and warmth. Days are getting darker, shorter, and colder. So a nice cup of hot cocoa just warms me up.” — Designed by Hazuki Sato from Belgium.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/066c8801-c795-4511-a131-3bf9ac7fa84d/dec-18-cosy-nocal-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0d1eb07b-e179-42ba-9770-2ed95ca02a44/dec-18-cosy-nocal-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0d1eb07b-e179-42ba-9770-2ed95ca02a44/dec-18-cosy-nocal-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-18/cosy/nocal/dec-18-cosy-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/cosy/nocal/dec-18-cosy-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/cosy/nocal/dec-18-cosy-nocal-960x560.png">960x560</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/cosy/nocal/dec-18-cosy-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/cosy/nocal/dec-18-cosy-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/cosy/nocal/dec-18-cosy-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/cosy/nocal/dec-18-cosy-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/cosy/nocal/dec-18-cosy-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/cosy/nocal/dec-18-cosy-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-18/cosy/nocal/dec-18-cosy-nocal-2560x1440.png">2560x1440</a> </li> </ul> Tongue Stuck On Lamppost <p>Designed by <a href="https://www.joshcleland.com/">Josh Cleland</a> from the United States.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8eddae94-833f-43b7-9c6b-8c9c044ab034/december-11-tongue-stuck-on-lamppost-20-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6516be4f-fabe-4082-ac09-2fe769521ee8/december-11-tongue-stuck-on-lamppost-20-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6516be4f-fabe-4082-ac09-2fe769521ee8/december-11-tongue-stuck-on-lamppost-20-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/december-11/december-11-tongue_stuck_on_lamppost__20-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-11/december-11-tongue_stuck_on_lamppost__20-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-11/december-11-tongue_stuck_on_lamppost__20-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-11/december-11-tongue_stuck_on_lamppost__20-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-11/december-11-tongue_stuck_on_lamppost__20-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-11/december-11-tongue_stuck_on_lamppost__20-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-11/december-11-tongue_stuck_on_lamppost__20-nocal-2560x1440.jpg">2560x1440</a> </li> </ul> On To The Next One <p>“Endings intertwined with new beginnings, challenges we rose to and the ones we weren’t up to, dreams fulfilled and opportunities missed. The year we say goodbye to leaves a bitter-sweet taste, but we’re thankful for the lessons, friendships, and experiences it gave us. We look forward to seeing what the new year has in store, but, whatever comes, we will welcome it with a smile, vigor, and zeal.” — Designed by <a href="https://www.popwebdesign.net/web-development-serbia.html">PopArt Studio</a> from Serbia.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/07c22cc2-cd45-4f32-9c92-947a65625e26/dec-21-on-to-the-next-one-nocal-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/df993d7f-d090-4724-9436-01e6e3cd70e8/dec-21-on-to-the-next-one-nocal-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/df993d7f-d090-4724-9436-01e6e3cd70e8/dec-21-on-to-the-next-one-nocal-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-21/on-to-the-next-one/nocal/dec-21-on-to-the-next-one-nocal-2560x1440.jpg">2560x1440</a> </li> </ul> Christmas Owl <p>“Christmas waves a magic wand over this world, and behold, everything is softer and more beautiful.” — Designed by Suman Sil from India.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0f4c81c4-baa1-4ce1-9757-0d5d6e485eb2/dec-17-christmas-owl-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b68a038c-82d8-4c8d-acaa-1038bccaf8e0/dec-17-christmas-owl-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b68a038c-82d8-4c8d-acaa-1038bccaf8e0/dec-17-christmas-owl-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-owl/nocal/dec-17-christmas-owl-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-owl/nocal/dec-17-christmas-owl-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-owl/nocal/dec-17-christmas-owl-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-owl/nocal/dec-17-christmas-owl-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-owl/nocal/dec-17-christmas-owl-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-owl/nocal/dec-17-christmas-owl-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-owl/nocal/dec-17-christmas-owl-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-owl/nocal/dec-17-christmas-owl-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-owl/nocal/dec-17-christmas-owl-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-owl/nocal/dec-17-christmas-owl-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-owl/nocal/dec-17-christmas-owl-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-owl/nocal/dec-17-christmas-owl-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-17/christmas-owl/nocal/dec-17-christmas-owl-nocal-2560x1440.jpg">2560x1440</a> </li> </ul> Catch Your Perfect Snowflake <p>“This time of year, people tend to dream big and expect miracles. Let your dreams come true!” Designed by <a href="https://dribbble.com/izhik">Igor Izhik</a> from Canada.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b2f6a5c7-a3a2-4cb0-82c1-1fcfdb02e27d/dec-15-catch-your-perfect-snowflake-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/27fb2569-e973-4bcb-919a-f8d786e008b1/dec-15-catch-your-perfect-snowflake-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/27fb2569-e973-4bcb-919a-f8d786e008b1/dec-15-catch-your-perfect-snowflake-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-15/catch-your-perfect-snowflake/nocal/dec-15-catch-your-perfect-snowflake-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/catch-your-perfect-snowflake/nocal/dec-15-catch-your-perfect-snowflake-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/catch-your-perfect-snowflake/nocal/dec-15-catch-your-perfect-snowflake-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/catch-your-perfect-snowflake/nocal/dec-15-catch-your-perfect-snowflake-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/catch-your-perfect-snowflake/nocal/dec-15-catch-your-perfect-snowflake-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/catch-your-perfect-snowflake/nocal/dec-15-catch-your-perfect-snowflake-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/catch-your-perfect-snowflake/nocal/dec-15-catch-your-perfect-snowflake-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/catch-your-perfect-snowflake/nocal/dec-15-catch-your-perfect-snowflake-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/catch-your-perfect-snowflake/nocal/dec-15-catch-your-perfect-snowflake-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/catch-your-perfect-snowflake/nocal/dec-15-catch-your-perfect-snowflake-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/catch-your-perfect-snowflake/nocal/dec-15-catch-your-perfect-snowflake-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/catch-your-perfect-snowflake/nocal/dec-15-catch-your-perfect-snowflake-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/catch-your-perfect-snowflake/nocal/dec-15-catch-your-perfect-snowflake-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/catch-your-perfect-snowflake/nocal/dec-15-catch-your-perfect-snowflake-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/catch-your-perfect-snowflake/nocal/dec-15-catch-your-perfect-snowflake-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/catch-your-perfect-snowflake/nocal/dec-15-catch-your-perfect-snowflake-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/catch-your-perfect-snowflake/nocal/dec-15-catch-your-perfect-snowflake-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/catch-your-perfect-snowflake/nocal/dec-15-catch-your-perfect-snowflake-nocal-2560x1440.jpg">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/catch-your-perfect-snowflake/nocal/dec-15-catch-your-perfect-snowflake-nocal-2560x1600.jpg">2560x1600</a> </li> </ul> Winter Garphee <p>“Garphee’s flufiness glowing in the snow.” Designed by Razvan Garofeanu from Romania.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/acb0bd7c-2868-4176-9468-d1e06f31f96f/december-12-winter-garphee-81-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/158e76da-934e-4e62-bdb1-32616ccd9e84/december-12-winter-garphee-81-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/158e76da-934e-4e62-bdb1-32616ccd9e84/december-12-winter-garphee-81-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/december-12/december-12-winter_garphee__81-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-12/december-12-winter_garphee__81-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-12/december-12-winter_garphee__81-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-12/december-12-winter_garphee__81-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-12/december-12-winter_garphee__81-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-12/december-12-winter_garphee__81-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-12/december-12-winter_garphee__81-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-12/december-12-winter_garphee__81-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-12/december-12-winter_garphee__81-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-12/december-12-winter_garphee__81-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-12/december-12-winter_garphee__81-nocal-2560x1440.jpg">2560x1440</a> </li> </ul> Trailer Santa <p>“A mid-century modern Christmas scene outside the norm of snowflakes and winter landscapes.” Designed by Houndstooth from the United States.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/40a7c173-9928-4a55-bc4c-4d48f339b3da/december-12-trailer-santa-21-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1d3703c2-593a-4ff4-a08a-52cb237ddb64/december-12-trailer-santa-21-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1d3703c2-593a-4ff4-a08a-52cb237ddb64/december-12-trailer-santa-21-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/december-12/december-12-trailer_santa__21-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-12/december-12-trailer_santa__21-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-12/december-12-trailer_santa__21-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-12/december-12-trailer_santa__21-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-12/december-12-trailer_santa__21-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/december-12/december-12-trailer_santa__21-nocal-2560x1440.jpg">2560x1440</a> </li> </ul> Winter Solstice <p>“In December there’s a winter solstice; which means that the longest night of the year falls in December. I wanted to create the feeling of solitude of the long night into this wallpaper.” — Designed by Alex Hermans from Belgium.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/eaf114e2-475a-4945-9185-ce491e025194/dec-15-winter-solstice-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c31b7a20-902c-4956-a266-a88bd5a4b7cb/dec-15-winter-solstice-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c31b7a20-902c-4956-a266-a88bd5a4b7cb/dec-15-winter-solstice-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-15/winter-solstice/nocal/dec-15-winter-solstice-nocal-2560x1440.jpg">2560x1440</a> </li> </ul> Christmas Time <p>Designed by Sofie Keirsmaekers from Belgium.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a9988e43-6ee8-414c-8136-ac6939c5182e/dec-13-christmas-time-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cf1ce792-3363-4899-9714-fd569b53452b/dec-13-christmas-time-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cf1ce792-3363-4899-9714-fd569b53452b/dec-13-christmas-time-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-13/christmas-time-/nocal/dec-13-christmas-time--nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/christmas-time-/nocal/dec-13-christmas-time--nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/christmas-time-/nocal/dec-13-christmas-time--nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/christmas-time-/nocal/dec-13-christmas-time--nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/christmas-time-/nocal/dec-13-christmas-time--nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-13/christmas-time-/nocal/dec-13-christmas-time--nocal-2560x1440.png">2560x1440</a> </li> </ul> Happy Holidays <p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e16c6728-d3a1-4800-8a6e-e3c45d2512ac/dec-20-happy-holidays-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/56b7fbec-60c7-4776-96d0-028c06c5a552/dec-20-happy-holidays-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/56b7fbec-60c7-4776-96d0-028c06c5a552/dec-20-happy-holidays-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-2560x1440.png">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/dec-20/happy-holidays/nocal/dec-20-happy-holidays-nocal-3840x2160.png">3840x2160</a> </li> </ul> Get Featured Next Month <p>Feeling inspired? We’ll publish the <strong>January wallpapers</strong> on December 31, so if you’d like to be a part of the collection, please don’t hesitate to <a href="https://www.smashingmagazine.com/desktop-wallpaper-calendars-join-in/">submit your design</a>. We are already looking forward to it!</p>

<p>The Completely Automated Public Turing test to tell Computers and Humans Apart (CAPTCHA) has become ingrained in internet browsing since personal computers gained momentum in the consumer electronics market. For nearly as long as people have been going online, web developers have sought ways to block spam bots. </p> <p>The CAPTCHA service distinguishes between human and bot activity to keep bots out. Unfortunately, its methods are less than precise. In trying to protect humans, developers have made much of the web <strong>inaccessible</strong> to people with disabilities. </p> <p><img src="https://files.smashing.media/articles/accessibility-problem-authentication-methods-captcha/1-authentication-failed.jpg"></p> <p>Authentication methods, such as CAPTCHA, typically use image classification, puzzles, audio samples, or click-based tests to determine whether the user is human. While the types of challenges are well-documented, their <strong>logic is not public knowledge</strong>. People can only guess what it takes to “prove” they are human. </p> <p><img src="https://files.smashing.media/articles/accessibility-problem-authentication-methods-captcha/2-recaptcha.png"></p> What Is CAPTCHA? <p>A CAPTCHA <a href="https://medium.com/@leo.weiss33/a-reverse-turing-test-story-cf677b0ff282">is a reverse Turing test</a> that takes the form of a challenge-response test. For example, if it instructs users to “select all images with stairs,” they must pick the stairs out from railings, driveways, and crosswalks. Alternatively, they may be asked to enter the text they see, add the sum of dice faces, or complete a sliding puzzle. </p> <p>Image-based CAPTCHAs are responsible for the most frustrating shared experiences internet users have — deciding whether to select a square when only a small sliver of the object in question is in it.</p> <p><img src="https://files.smashing.media/articles/accessibility-problem-authentication-methods-captcha/3-captcha-picture.png"></p> <p>Regardless of the method, a computer or algorithm ultimately determines whether the test-taker is human or machine. This authentication service has spawned many offshoots, including reCAPTCHA and hCAPTCHA. It has even led to the creation of entire companies, such as GeeTest and Arkose Labs. The Google-owned automated system reCAPTCHA requires users to click a checkbox labeled “I’m not a robot” for authentication. It runs an adaptive analysis in the background to assign a risk score. hCAPTCHA is an image-classification-based alternative. </p> <p>Other authentication methods include multi-factor authentication (MFA), QR codes, temporary personal identification numbers (PINs), and biometrics. They do not follow the challenge-response formula, but serve fundamentally similar purposes. </p> <p>These offshoots are intended to be better than the original, but they often fail to meet modern accessibility standards. Take hCaptcha, for instance, which uses a cookie to let you bypass the challenge-response test entirely. It’s a great idea in theory, but it doesn’t work in practice. </p> <p>You’re supposed to receive a one-time code via email that you send to a specific number over SMS. Users <a href="https://fireborn.mataroa.blog/blog/hellcaptcha-accessibility-theater-at-its-worst/">report receiving endless error messages</a>, forcing them to complete the standard text CAPTCHA. This is only available if the site explicitly enabled it during configuration. If it is not set up, you must complete an image challenge that does not recognize screen readers.</p> <p>Even when the initial process works, subsequent authentication relies on a third-party cross-site cookie, which most browsers block automatically. Also, the code expires after a short period, so you have to redo the entire process if it takes you too long to move on to the next step.</p> Why Do Teams Use CAPTCHA And Similar Authentication Methods? <p>CAPTCHA is common because it is <strong>easy to set up</strong>. Developers can program it to appear, and it conducts the test automatically. This way, they can focus on more important matters while still preventing spam, fraud, and abuse. These tools are supposed to make it easier for humans to use the internet safely, but they often keep real people from logging in.</p> <p>These tests result in a <strong>poor user experience</strong> overall. One study found users <a href="https://arxiv.org/abs/2311.10911">wasted over 819 million hours</a> on over 512 billion reCAPTCHA v2 sessions as of 2023. Despite it all, bots prevail. Machine learning models can solve text-based CAPTCHA within fractions of a second with over 97% accuracy. </p> <p>A 2024 study on Google’s reCAPTCHA v2 — which is still widely used despite the rollout of reCAPTCHA v3 — found bots can solve image classification CAPTCHA <a href="https://arstechnica.com/ai/2024/09/ai-defeats-traffic-image-captcha-in-another-triumph-of-machine-over-man/">with up to 100% accuracy</a>, depending on the object they are tasked with identifying. The researchers used a free, open-source model, which means that bad actors could easily replicate their work. </p> Why Should Web Developers Stop Using CAPTCHA? <p>Authentication methods like CAPTCHA have an accessibility problem. Machine learning advances forced these services to grow increasingly complex. Even still, they are not foolproof. Bots get it right more than people do. Research shows they can <a href="https://arxiv.org/abs/2307.12108">complete reCAPTCHA within 17.5 seconds</a>, achieving 85% accuracy. Humans take longer and are less accurate.</p> <p>Many people fail CAPTCHA tests and have no idea what they did wrong. For example, a prompt instructing users to “select all squares with traffic lights” seems simple enough, but it gets complicated if a sliver of the pole is in another square. Should they select that box, or is that what an algorithm would do? </p> <p>Although bot capabilities have grown by magnitudes, humans have remained the same. As tests get progressively more difficult, they feel less inclined to attempt them. One survey shows <a href="https://www.regpacks.com/blog/user-onboarding-mistakes/">nearly 59% of people</a> will stop using a product after several bad experiences. If authentication is too cumbersome or complex, they might stop using the website entirely. </p> <p>People can fail these tests for various reasons, including technical ones. If they block third-party cookies, have a local proxy running, or have not updated their browser in a while, they may keep failing, regardless of how many times they try. </p> Authentication Issues With CAPTCHA <p>Due to the reasons mentioned above, most types of CAPTCHA are inherently inaccessible. This is especially true for people with disabilities, as these challenge-response tests were not designed with their needs in mind. Some of the common issues include the following:</p> <h3>Issues Related To Visuals And Screen Reader Use</h3> <p>Screen readers cannot read standard visual CAPTCHAs, such as the distorted text test, since the jumbled, contorted words are not machine-readable. The image classification and sliding puzzle methods are similarly inaccessible. </p> <p>In one WebAIM survey conducted from 2023 to 2024, screen reader users <a href="https://webaim.org/projects/screenreadersurvey10/#problematic">agreed CAPTCHA was the most problematic</a> item, ranking it above ambiguous links, unexpected screen changes, missing alt text, inaccessible search, and lack of keyboard accessibility. Its spot at the top has remained largely unchanged for over a decade, illustrating its history of inaccessibility. </p> <h3>Issues Related To Hearing and Audio Processing</h3> <p>Audio CAPTCHAs are relatively uncommon because web development best practices advise against autoplay audio and emphasize the importance of user controls. However, audio CAPTCHAs still exist. People who are hard of hearing or deaf may encounter a barrier when attempting these tests. Even with assistive technology, the intentional audio distortion and background noise make these samples challenging for individuals with auditory processing disorders to comprehend.</p> <h3>Issues Related To Motor And Dexterity</h3> <p>Tests requiring motor and dexterity skills can be challenging for those with motor impairments or physical disabilities. For example, someone with a hand tremor may find the sliding puzzles difficult. Also, the image classification tests that load more images until none that fit the criteria are left may pose a challenge.</p> <h3>Issues Related To Cognition And Language</h3> <p>As CAPTCHAs become increasingly complex, some developers are turning to tests that require a combination of creative and critical thinking. Those that require users to solve a math problem or complete a puzzle can be challenging for people with dyslexia, dyscalculia, visual processing disorders, or cognitive impairments. </p> Why Assistive Technology Won’t Bridge The Gap <p>CAPTCHAs are intentionally designed for humans to interpret and solve, so assistive technology like screen readers and hands-free controls may be of little help. ReCAPTCHA in particular poses an issue because it analyzes background activity. If it flags the accessibility devices as bots, it will serve a potentially inaccessible CAPTCHA. </p> <p>Even if this technology could bridge the gap, web developers shouldn’t expect it to. Industry standards dictate that they should follow universal design principles to make their websites as accessible and functional as possible.</p> <p>CAPTCHA’s accessibility issues could be forgiven if it were an effective security tool, but it is far from foolproof since bots get it right more than humans do. Why keep using a method that is ineffective and creates barriers for people with disabilities?</p> <p>There are better alternatives.</p> Principles For Accessible Authentication <p>The idea that humans should consistently outperform algorithms is outdated. Better authentication methods exist, such as <strong>multifactor authentication (MFA)</strong>. The two-factor authentication market will be <a href="https://designerly.com/hacked-wordpress-site/">worth an estimated $26.7 billion</a> by 2027, underscoring its popularity. This tool is more effective than a CAPTCHA because it <strong>prevents unauthorized access, even with legitimate credentials</strong>.</p> <p><img src="https://files.smashing.media/articles/accessibility-problem-authentication-methods-captcha/4-multifactor-authentication.jpg"></p> <p>Ensure your MFA technique is accessible. Instead of having website visitors transcribe complex codes, you should send push notifications or SMS messages. Rely on the verification code autofill to automatically capture and enter the code. Alternatively, you can introduce a “remember this device” feature to skip authentication on trusted devices. </p> <p>Apple’s two-factor authentication approach is designed this way. A trusted device automatically displays a six-digit verification code, so they do not have to search for it. When prompted, iPhone users can tap the suggestion that appears above their mobile keyboard for autofill.</p> <p><img src="https://files.smashing.media/articles/accessibility-problem-authentication-methods-captcha/5-apple-two-factor-authentication.png"></p> <p><strong>Single sign-on</strong> is another option. This session and user authentication service allows people to log in to multiple websites or applications with a single set of login credentials, minimizing the need for repeated identity verification. </p> <p><strong>One-time-use “magic links”</strong> are an excellent alternative to reCAPTCHA and temporary PINs. Rather than remembering a code or solving a puzzle, the user clicks on a button. Avoid imposing deadlines because, according to WCAG Success Criterion 2.2.3, users <a href="https://www.w3.org/WAI/WCAG22/Understanding/no-timing.html">should not face time limits</a> since those with disabilities may need more time to complete specific actions.</p> <p>Alternatively, you could use Cloudflare Turnstile. It authenticates <a href="https://developers.cloudflare.com/turnstile/">without showing a CAPTCHA</a>, and most people never even have to check a box or hit a button. The software works by issuing a small JavaScript challenge behind the scenes to automatically differentiate between bots and humans. Cloudflare Turnstile can be embedded into any website, making it an excellent alternative to standard classification tasks. </p> Testing And Evaluation Of Accessible Authentication Designs <p>Testing and evaluating your accessible alternative authentication methods is essential. Many designs look good on paper but do not work in practice. If possible, gather feedback from actual users. An open beta may be an effective way to maximize visibility.</p> <blockquote>Remember, general accessibility considerations do not only apply to people with disabilities. They also include those who are neurodivergent, lack access to a mobile device, or use assistive technology. Ensure your alternative designs consider these individuals.</blockquote> <p>Realistically, you cannot create a perfect system since everyone is unique. Many people struggle to follow multistep processes, solve equations, process complex instructions, or remember passcodes. While universal web design principles can improve flexibility, no single solution can meet everyone’s needs.</p> <p>Regardless of the authentication technique you use, you should present users with multiple authentication options upfront. They know their capabilities best, so let them decide what to use instead of trying to over-engineer a solution that works for every edge case.</p> Address The Accessibility Problem With Design Changes <p>A person with hand tremors may be unable to complete a sliding puzzle, while someone with an audio processing disorder may have trouble with distorted audio samples. However, you cannot simply replace CAPTCHAs with alternatives because they are often equally inaccessible.</p> <p>QR codes, for example, may be difficult to scan for those with reduced fine motor control. People who are visually impaired may struggle to find it on the screen. Similarly, biometrics can pose an issue for people with facial deformities or a limited range of motion. Addressing the accessibility problem requires <strong>creative thinking</strong>.</p> <p>You can start by visiting the <a href="https://www.w3.org/WAI/tutorials/">Web Accessibility Initiative’s accessibility tutorials</a> for developers to better understand universal design. Although these tutorials focus more on content than authentication, you can still use them to your advantage. The W3C Group Draft Note <a href="https://www.w3.org/TR/turingtest/">on the Inaccessibility of CAPTCHA</a> provides more relevant guidance.</p> <p>Getting started is as easy as researching <strong>best practices</strong>. Understanding the basics is essential because there is no universal solution for accessible web design. If you want to optimize accessibility, consider sourcing feedback from the people who actually visit your website.</p> <h3>Further Reading</h3> <ul> <li>“<a href="https://link.springer.com/book/10.1007/978-3-030-29345-1">The CAPTCHA: Perspectives and Challenges</a>,” Darko Brodić and Alessia Amelio</li> <li>“<a href="https://www.smashingmagazine.com/2023/08/designing-accessible-text-over-images-part1/">Designing Accessible Text Over Images: Best Practices, Techniques, And Resources</a>,” Hannah Milan</li> <li>“<a href="https://www.smashingmagazine.com/2011/03/in-search-of-the-perfect-captcha/">In Search Of The Best CAPTCHA</a>,” David Bushell</li> <li>“<a href="https://www.smashingmagazine.com/2025/05/wcag-3-proposed-scoring-model-shift-accessibility-evaluation/">WCAG 3.0’s Proposed Scoring Model: A Shift in Accessibility Evaluation</a>,” Mikhail Prosmitskiy</li> </ul>

<p>This article is a sponsored by <a href="https://www.smashingmagazine.com/undefined">Maturing Design Systems</a></p> <p>Design systems have become an integral part of our everyday work, so much that the successful growth and maturation of a design system can make or break a product or project. <strong>Great tokens, components and organization aren’t enough</strong> — it is most often the culture and curation that creates a sustainable, widely-adopted system. It can be hard to determine where to invest our time and attention. How do we build and maintain design systems that support our teams, enhance our work, and grow along with us? </p> <p><img src="https://files.smashing.media/maturing-design-systems.png"></p> Excerpt: Design System Culture <p>Culture is a funny thing. We all have some intuition about how important it is—at least we know we want to work in a great culture and avoid the toxic ones. But culture is notoriously difficult to define, and changing it can feel more like magic than reality. One company culture can be inspiring for some and boring for others, a place of growth for some and stifling for others.</p> <p>Adding to the nuance, not only does your company have a culture as a whole, but it has many subcultures. That’s because culture is not created by any individual. Culture is something that happens when the same group of people gather together repeatedly over time. So, as a company grows, adding hierarchy and structure, the teams formed around specific goals, products, features, disciplines, and so on, <strong>all develop their own subcultures</strong>.</p> <p>You probably have a design subculture. You probably have a product ownership subculture. You probably even have a subculture forming around those folks who get on a Zoom call every Tuesday at lunch to knit and chat. There are hundreds or more subcultures at most good-sized organizations. It’s complicated, nuanced, and immensely important.</p> <p>When an individual is struggling with the way they are managed, one culture enables them to offer authentic feedback to their boss, while another leads them to look for a new job. When a company provides free lunch on Fridays, one culture creates a sense of gratitude for this benefit; another makes you feel like this free lunch comes with the expectation that you can’t ever leave work. One culture prioritizes financial results over respectful interactions. One culture encourages competition between teams, while another emphasizes collaboration with coworkers.</p> <h3>Why Culture?</h3> <p>At the beginning of 2021, my company was asked to help a large organization plan, design, and build a design system alongside the minimum viable product of a new product idea. This is the kind of work we truly love, so the team was excited to jump in.</p> <p>As an author of a book about design systems, I want nothing more than to tell you how amazingly this engagement went. Instead, it was a tremendous struggle. Despite this being the perfect kind of work for my team and I on paper, we had to make the hard decision to walk away from our client at the end of that year. Not because we couldn’t do the work. Not because of any technical challenges or budget concerns. The reason we gave was “cultural incompatibility.” In almost twenty years of running my own businesses, <strong>this had never happened to me</strong>. After all, our clients don’t come to us because they have everything figured out — they come because they know they need help. If we couldn’t guide them through a difficult season, why did we even exist!?</p> <p>Needless to say, it didn’t sit well with me. So, after following a few useless threads of fear that we just couldn’t cut it, I spent the next year diving down a rabbit hole of research on organizational culture. This next section is a summary of what I learned in that year and how I’ve been putting that to use since. To start, let’s find a common understanding of what culture is.</p> <h3>What Is Culture?</h3> <p>Over the last few decades, a lot has been said about workplace culture. From understanding why it matters and how it impacts the ways we lead, to offering methodologies for changing it. I’ve found tremendous value in the research and writings of Edgar Schein, a business theorist and psychologist. Schein offers a simple model to explain what culture is, breaking it down into three levels:</p> <p><img src="https://files.smashing.media/design-system-culture/schein-model-organization-culture.png"></p> <h3>Artifacts</h3> <p>Artifacts are the top level of Schein’s model. These are the things people think of when you say “culture” — the visible perks a company offers. I once worked at a place where we could expense bringing in donuts for the team. Another job I had provided a foosball table. One company encouraged us to cook lunch together each week. These kinds of things, along with the company swag, the channel in Slack where you get to brag about your peers, and the company retreat are all “artifacts” of your company culture.</p> <h3>Espoused Values And Beliefs</h3> <p>The next layer down is called “espoused values and beliefs.” This is what people inside the culture say they believe. It’s the list of values, the mission statement, the vision. It’s the content on the website and plastered on the walls. It’s the stuff you expect to get when you accept the job because it’s how people answered all your questions throughout the interview process.</p> <h3>Basic Underlying Assumptions</h3> <p>The deepest layer is called “basic underlying assumptions.” This is what people inside the organization actually believe. It’s the way the leadership and employees behave, most notably </p> <p>in the face of a difficult decision. This layer is the root of your culture. And no matter what you show (artifacts), no matter what you say (espoused beliefs), the things you believe (underlying assumptions) will come out eventually.</p> <h3>It Starts At The Bottom</h3> <p>As an employee, you will experience these things from the top down. On your first day, you observe what’s happening around you — you see the artifacts of the culture. Eventually, you get to know a few folks. As you have more and more conversations with them, you’ll begin to <strong>hear how they talk about the culture</strong> — their espoused beliefs. At some point, people inside your culture will be faced with some tough situations. This is where the rubber meets the road and when you’ll learn what those individuals’ basic underlying assumptions are.</p> <p>Unhealthy organizations don’t have a process for surfacing and valuing those underlying assumptions. Healthy organizations know that culture starts with the basic underlying assumptions of every individual at the company.</p> <p>Unhealthy organizations try to create culture with perks and mission statements. Healthy organizations allow the top two layers to emerge naturally from the bottom layer.</p> <p>When the basic underlying assumptions don’t line up with the espoused beliefs and artifacts, <strong>the disconnect is strong</strong>. It’s often hard to articulate the problem, but people will feel it. This is the company with a core value of “family first” that requires you to travel all the time with no recognition of the impact it has on your actual family. The espoused belief to prioritize family is not actively supported in the decisions being made.</p> <h3>Strength And Weakness</h3> <p>We all subconsciously know these things, and that is reflected in the language we use as we talk about the culture of an organization. We tend to use the words “strong” and “weak” to describe culture. You might say, “That company has a strong culture.” This statement is an indication that the layers are aligned, and that means the culture itself serves as a way of guiding decisions. If we all have shared values, we can trust one another’s ability to make decisions that will align with those values.</p> <p>Conversely, an organization with a weak culture is missing the alignment between the things they say and the decisions they make. These cultures often continually add <strong>policies and procedures</strong> in order to police the behavior of individuals. In this scenario, the culture is weak because it doesn’t offer the organic guidance a stronger culture does — the misalignment means the things we choose to do differ from the things we say.</p> <p>That is not to say policies and procedures are bad. As companies grow, there is a need to document the expectations for people. The proactive nature of a strong culture means these documents are often a formalization of what has emerged organically, whereas a weak culture reacts to negative situations in hopes to prevent the bad from happening again.</p> Editor’s Note <p>Do you like what you’ve read so far? This is just an excerpt of Ben’s upcoming book, <strong><em>Maturing Design Systems</em></strong>, in which he explores the anatomy of a design system, explains how culture shapes outcomes, and shares practical guidance for the challenges at each stage — from building v1 and growing healthy adoption to navigating “the teenage years” and ultimately running a stable, influential system.</p> <h3>Table of Contents</h3> <ul> <li> <strong>Context</strong><br>An introduction to the context of design systems, understanding where they live in your organization, what feeds them, and whether you should build one.</li> <li> <strong>Design System Culture</strong><br>A deep dive into what culture is, why it’s important for design system teams to understand, and how it unlocks the ability for you to deliver real value.</li> <li> <strong>The Anatomy of a Design System</strong><br>An exploration of the layers and parts that make up a design system based on the evaluation of hundreds of design systems over many years.</li> <li> <strong>Maturity</strong><br>An over view of the design system maturity model including the fours stages of maturity, origin stories, a framework for maturing in a healthy way, and a framework for creating design system stability.</li> <li> <strong>Stage 1, Building Version One</strong><br>A dive into what it means to be in stage 1 of the design system maturity and a few mental models to keep you focused on the right things in this early stage.</li> <li> <strong>Stage 2, Growing Adoption</strong><br>Unpacking stage 2 of the design system maturity model and a deep dive into adoption: broadening your perspective on adoption, the adoption curve, and how to create sustainable adoption.</li> <li> <strong>Stage 3, Surviving the Teenage Years</strong><br>Understanding the relevant concerns for stage 3 of the design system maturity model and how to address the more nuanced challenges that come with this level of maturity.</li> <li> <strong>Stage 4, Evolving a Healthy Program</strong><br>Exploring what it means to be in stage 4 of the design system maturity model, when you’ve become an influential leader in the eyes of the rest of your organization.</li> </ul> <h3>About The Author</h3> <div> <a href="https://bencallahan.com/"><img src="https://files.smashing.media/design-system-culture/ben-callahan.jpg"></a> <p><a href="https://bencallahan.com/">Ben Callahan</a> is an author, design system researcher, coach, and speaker. He founded <a href="https://bencallahan.com/redwoods">Redwoods</a>, a design system community, and <a href="https://bencallahan.com/the-question">The Question</a>, a weekly forum for collaborative learning. As a founding partner at <a href="https://sparkbox.com/">Sparkbox</a>, he helps organizations embed human-centered culture into their design systems. His work bridges people and systems, emphasizing sustainable growth, team alignment, and meaningful impact in technology. He believes every interaction is an opportunity to learn.</p> </div> <h3>Reviewers’ Testimonials</h3> <blockquote> <img src="https://files.smashing.media/design-system-culture/lenora-porter.jpg">“This book is a clear and insightful blueprint for maturing design systems at scale. For well-supported teams, it offers strategy and clarity grounded in real examples. For smaller teams like mine, it serves as a North Star that helps you advocate for the work and find solutions that fit your team's maturity. I highly recommend it to anyone building a design system.”<br><br>— <em>Lenora Porter, Product Designer</em> </blockquote> <blockquote> <img src="https://files.smashing.media/design-system-culture/tarunya-varma.jpg">“Ben draws connections between process, collaboration, and identity in ways that feel both intuitive and revelatory. Many design system books live comfortably in the tactical and technical, but this one moves beyond the how and into the why — inviting readers to reflect on their roles not just as product owners, designers or engineers, but as stewards of shared understanding within complex organisations. This book doesn’t prescribe rigid solutions. Instead, it encourages self-inquiry and alignment, asking readers to consider how they can bring intentionality, empathy, and resilience into the systems they touch.”<br><br>— <em>Tarunya Varma, Product Design Manager, Tide</em> </blockquote> <blockquote> <img src="https://files.smashing.media/design-system-culture/ness-grixti.jpg">“Ben Callahan’s “Maturing Design Systems” puts language to the struggles many of us feel but can’t quite explain. It unpacks the hidden influence of culture, setup, and leadership, providing you with the clarity, tools, and frameworks to course-correct and move your system work forward, whether you’re navigating a growing startup or a scaling enterprise.”<br><br>— <em>Ness Grixti, Design Lead, Wise, and Author of “A Practical Guide to Design System Components”</em> </blockquote> Don’t Miss Out! <p>Through years of interviews, coaching, and consulting, Ben has discovered a model for how design systems mature. Understanding how systems tend to mature allows you to <strong>create a sustainable program around your design system</strong> — one that acknowledges the human and change-management side of this work, not just the technical and creative.</p> <p>This book will be a valuable resource for anyone working with design systems!</p> Spread The Word <p><a href="https://www.smashingmagazine.com/the-smashing-newsletter/">Sign up to our Smashing newsletter</a> and be one of the first to know when <strong><em>Maturing Design Systems</em></strong> is available for preorder. We can’t wait to share this book with you!</p>

<p>No design exists in isolation. As designers, we often imagine specific situations in which people will use our product. It might be indeed quite common — but there will also be other — <strong>urgent, frustrating, stressful situations</strong>. And they are the ones that we rarely account for.</p> <p>So how do we account for such situations? How can we help people <strong>use our products while coping with stress</strong> — without adding to their cognitive load? Let’s take a closer look.</p> Study Where Your Product Fits Into People’s Lives <p>When designing digital products, sometimes we get a bit too attached to our <strong>shiny new features and flows</strong> — often forgetting the messy reality in which these features and flows have to neatly fit. And often it means 10s of other products, 100s of other tabs, and 1000s of other emails.</p> <p><img src="https://files.smashing.media/articles/designing-for-stress-and-emergency/1-designing-for-stress-and-emergency.jpg"></p> <p>If your customers have to use a <strong>slightly older machine</strong>, with a <em>smallish</em> 22" screen and a lot of background noise, they might use your product differently than you might have imagined, e.g., splitting the screen into halves to see both views at the same time (as displayed above).</p> <p>Chances are high that our customers will use our product <strong>while doing something else</strong>, often with very little motivation, very little patience, plenty of urgent (and way more important) problems, and an unhealthy dose of stress. And that’s where our product must do its job well.</p> What Is Stress? <p>What exactly do we mean when we talk about “stress”? As H Locke noted, stress is the <strong>body’s response to a situation it cannot handle</strong>. There is a mismatch between what people can control, their own skills, and the challenge in front of them.</p> <p>If the situation seems unmanageable and the goal they want to achieve moves further away, it creates an enormous sense of <strong>failing</strong>. It can be extremely frustrating and demotivating.</p> <p><img src="https://files.smashing.media/articles/designing-for-stress-and-emergency/2-designing-for-stress-and-emergency.jpg"></p> <p>Some failures have a local scope, but many have a <strong>far-reaching impact</strong>. Many people can’t choose the products they have to use for work, so when a tool fails repeatedly, causes frustration, or is unreliable, it affects the worker, the work, the colleagues, and processes within the organization. <strong>Fragility has a high cost</strong> — and so does frustration.</p> How Stress Influences User Interactions <p>It’s not a big surprise: stress disrupts attention, memory, cognition, and decision-making. It makes it difficult to prioritize and draw logical conclusions. In times of stress, we <strong>rely on fast, intuitive judgments</strong>, not reasoning. Typically, it leads to instinctive responses based on established habits.</p> <p><img src="https://files.smashing.media/articles/designing-for-stress-and-emergency/3-designing-for-stress-and-emergency.png"></p> <p>When users are in an emergency, they experience <em>cognitive tunneling</em> — it's a state when their peripheral vision narrows, reading comprehension drops, fine motor skills deteriorate, and patience drops sharply. Under pressure, people often make decisions hastily, while others get entirely paralyzed. Either way is a likely <strong>path to mistakes</strong> — often irreversible ones and often without time for extensive deliberations.</p> <p>Ideally, these decisions would be made way ahead of time — and then suggested when needed. But in practice, it’s not always possible. As it turns out, a good way to help people deal with stress is by <strong>providing order</strong> around how they manage it.</p> Single-Tasking Instead Of Multi-Tasking <p><a href="https://consensus.app/search/how-effective-are-people-at-multi-tasking-for-work/9GEx-KC0S8-OhSEgXClnrA/">People can’t <em>really</em> multi-task</a>, especially in very stressful situations or emergencies. Especially with a big chunk of work in front of them, people need some order to make progress, reliably. That’s why simpler pages usually work better than one big complex page.</p> <p>Order means giving users a <strong>clear plan of action</strong> to complete a task. No distractions, no unnecessary navigation. We ask simple questions and <strong>prompt simple actions</strong>, one after another, one thing at a time.</p> <p><img src="https://files.smashing.media/articles/designing-for-stress-and-emergency/4-designing-for-stress-and-emergency.png"></p> <p>An example of the plan is the <a href="https://designnotes.blog.gov.uk/2017/04/04/weve-published-the-task-list-pattern/">Task List Pattern</a>, invented by fine folks at Gov.uk. We break a task into a <strong>sequence of sub-tasks</strong>, describe them with actionable labels, assign statuses, and track progress.</p> <p>To support accuracy, we revise <strong>default settings</strong>, values, presets, and actions. Also, the <strong>order of actions</strong> and buttons matters, so we put high-priority things first to make them easier to find. Then we add built-in safeguards (e.g., Undo feature) to prevent irreversible errors.</p> Supporting In Emergencies <p>The most effective help during emergencies is to help people deal with the situation in a well-defined and effective way. That means being prepared for and designing an <strong>emergency mode</strong>, e.g., to activate instant alerts on emergency contacts, distribute pre-assigned tasks, and establish a line of communication.</p> <p><img src="https://files.smashing.media/articles/designing-for-stress-and-emergency/5-designing-for-stress-and-emergency.jpg"></p> <p><a href="https://www.redcross.org.au/emergencies/prepare/get-prepared-app/">Rediplan App</a> by Australian Red Cross is an emergency plan companion that encourages citizens to <strong>prepare their documents and belongings</strong> with a few checklists and actions — including key contracts, meeting places, and medical information, all in one place.</p> Just Enough Friction <p>Not all stress is equally harmful, though. As <a href="https://www.kryshiggins.com/optimal-onboarding-zone/">Krystal Higgins points out</a>, if there is not enough friction when onboarding new users and the experience is <strong>too passive</strong> or users are hand-held even through the most basic tasks, you risk that they won’t realize the <strong>personal value</strong> they gain from the experience and, ultimately, lose interest.</p> <p><img src="https://files.smashing.media/articles/designing-for-stress-and-emergency/6-designing-for-stress-and-emergency.png"></p> Design And Test For Stress Cases <p><strong>Stress cases aren’t edge cases</strong>. We can’t predict the emotional state in which a user comes to our site or uses our product. A person looking for specific information on a hospital website or visiting a debt management website, for example, is most likely already stressed. Now, if the interface is overwhelming, it will only add to their cognitive load.</p> <p>Stress-testing your product is critical to prevent this from happening. It’s useful to set up an annual day to <strong>stress test your product</strong> and refine emergency responses. It could be as simple as running <a href="https://contentdesign.intuit.com/foundations/content-testing/">content testing</a>, or running tests in a real, noisy, busy environment where users actually work — at peak times.</p> <p>And in case of emergencies, we need to check if fallbacks work as expected and if the current UX of the product helps people manage failures and exceptional situations well enough.</p> Wrapping Up <p>Emergencies <em>will</em> happen eventually — it’s just a matter of time. With good design, we can help <strong>mitigate risk and control damage</strong>, and make it hard to make irreversible mistakes. At its heart, that’s what good UX is exceptionally good at.</p> Key Takeaways <p>People can’t multitask, especially in very stressful situations.</p> <ul> <li>Stress <strong>disrupts attention</strong>, memory, cognition, decision-making.</li> <li>Also, it’s <strong>difficult to prioritize</strong> and draw logical conclusions.</li> <li>Under stress, we rely on fast, intuitive judgments — not reasoning.</li> <li>It leads to instinctive responses based on <strong>established habits</strong>.</li> </ul> <p>Goal: Design flows that support focus and high accuracy.</p> <ul> <li>Start with better default settings, values, presets, and actions.</li> <li> <strong>High-priority first</strong>: order of actions and buttons matters.</li> <li>Break complex tasks down into a series of simple steps (10s–30s each).</li> <li>Add built-in <strong>safeguards</strong> to prevent irreversible errors (Undo).</li> </ul> <p>Shift users to single-tasking: ask for one thing at a time.</p> <ul> <li> <strong>Simpler pages</strong> might work better than one complex page.</li> <li>Suggest a <strong>step-by-step plan of action</strong> to follow along.</li> <li>Consider, design, and test flows for emergency responses ahead of time.</li> <li>Add emergency mode for <strong>instant alerts</strong> and task assignments.</li> </ul> Meet “How To Measure UX And Design Impact” <p>You can find more details on <strong>UX Strategy</strong> in 🪴 <a href="https://measure-ux.com/"><strong>Measure UX &amp; Design Impact</strong></a> (8h), a practical guide for designers and UX leads to measure and show your UX impact on business. Use the code 🎟 <code>IMPACT</code> to save 20% off today. <a href="https://measure-ux.com/">Jump to the details</a>.</p> <a href="https://measure-ux.com/"> <img src="https://files.smashing.media/articles/ux-metrics-video-course-release/measure-ux-and-design-impact-course.png"></a> <div><div> <ul> <li><a href="https://www.smashingmagazine.com/#"> Video + UX Training</a></li> <li><a href="https://www.smashingmagazine.com/#">Video only</a></li> </ul> <div> <h3>Video + UX Training</h3>$ 495.00 $ 799.00 <a href="https://smart-interface-design-patterns.thinkific.com/enroll/3081832?price_id=3951439"> Get Video + UX Training<div></div></a><p>25 video lessons (8h) + <a href="https://smashingconf.com/online-workshops/workshops/vitaly-friedman-impact-design/">Live UX Training</a>.<br>100 days money-back-guarantee.</p> </div> <div> <h3>Video only</h3> <div>$ 250.00$ 395.00</div> <a href="https://smart-interface-design-patterns.thinkific.com/enroll/3081832?price_id=3950630"> Get the video course<div></div></a><p>25 video lessons (8h). Updated yearly.<br>Also available as a <a href="https://smart-interface-design-patterns.thinkific.com/enroll/3082557?price_id=3951421">UX Bundle with 2 video courses.</a></p> </div> </div></div> Useful Resources <ul> <li>“<a href="https://medium.com/design-bootcamp/ux-case-study-standby-17000867133c">Designing The SOS Emergency System</a>”, by Ritik Jayy</li> <li>“<a href="https://medium.com/net-magazine/designing-for-crisis-9cab10b4c519">Designing For Crisis</a>”, by Eric Meyer</li> <li>“<a href="https://medium.com/designing-services/designing-for-stressed-out-users-part-1-4489793dbe41">Designing For Stressed Out Users</a>” (Series), by H Locke</li> <li> <a href="https://uxpodcast.com/293-life-death-design-katie-swindler/">Designing For Stress</a> (Podcast), by Katie Swindler</li> <li> <a href="https://www.linkedin.com/posts/vitalyfriedman_ux-design-activity-7167433494200066048-trWE">Designing For Edge Cases and Exceptions</a>, by yours truly</li> <li> <a href="https://dfrlbook.com/"><em>Design For Real Life</em></a>, by Sara Wachter-Boettcher, Eric Mayer</li> <li>“<a href="https://www.kryshiggins.com/optimal-onboarding-zone/">Optimal Stress Levels For Onboarding</a>, by Krystal Higgins</li> </ul> <h3>Further Reading</h3> <ul> <li>“<a href="https://www.smashingmagazine.com/2025/09/how-minimize-environmental-impact-website/">How To Minimize The Environmental Impact Of Your Website</a>”, James Chudley</li> <li>“<a href="https://www.smashingmagazine.com/2025/10/ai-ux-achieve-more-with-less/">AI In UX: Achieve More With Less</a>”, Paul Boag</li> <li>“<a href="https://www.smashingmagazine.com/2025/10/how-make-ux-research-hard-to-ignore/">How To Make Your UX Research Hard To Ignore</a>”, Vitaly Friedman</li> <li>“<a href="https://www.smashingmagazine.com/2025/09/from-prompt-to-partner-designing-custom-ai-assistant/">From Prompt To Partner: Designing Your Custom AI Assistant</a>,” Lyndon Cerejo</li> </ul>

<p>Picture this: you join a new project, dive into the codebase, and within the first few hours, you discover something frustratingly familiar. Scattered throughout the stylesheets, you find multiple <code>@keyframes</code> definitions for the same basic animations. Three different fade-in effects, two or three slide variations, a handful of zoom animations, and at least two different spin animations because, well, why not?</p> <pre><code>@keyframes pulse { from { scale: 1; } to { scale: 1.1; } } @keyframes bigger-pulse { 0%, 20%, 100% { scale: 1; } 10%, 40% { scale: 1.2; } } </code></pre> <p>If this scenario sounds familiar, you’re not alone. In my experience across various projects, one of the most consistent quick wins I can deliver is <strong>consolidating and standardizing keyframes</strong>. It’s become such a reliable pattern that I now look forward to this cleanup as one of my first tasks on any new codebase.</p> The Logic Behind The Chaos <p>This redundancy makes perfect sense when you think about it. We all use the same fundamental animations in our day-to-day work: fades, slides, zooms, spins, and other common effects. These animations are pretty straightforward, and it's easy to whip up a quick <code>@keyframes</code> definition to get the job done.</p> <p>Without a centralized animation system, developers naturally write these keyframes from scratch, unaware that similar animations already exist elsewhere in the codebase. This is especially common when working in component-based architectures (which most of us do these days), as teams often work in parallel across different parts of the application.</p> <p>The result? Animation chaos.</p> The Small Problem <p>The most obvious issues with keyframes duplication are wasted development time and unnecessary code bloat. Multiple keyframe definitions mean multiple places to update when requirements change. Need to adjust the timing of your fade animation? You’ll need to hunt down every instance across your codebase. Want to standardize easing functions? Good luck finding all the variations. This multiplication of maintenance points makes even simple animation updates a time-consuming task.</p> The Bigger Problem <p>This keyframes duplication creates a much more insidious problem lurking beneath the surface: <strong>the global scope trap.</strong> Even when working with component-based architectures, CSS keyframes are always defined in the global scope. This means all keyframes apply to all components. Always. Yes, your animation doesn't necessarily use the keyframes you defined in your component. It uses the last keyframes that match that exact same name that were loaded into the global scope.</p> <p>As long as all your keyframes are identical, this might seem like a minor issue. But the moment you want to customize an animation for a specific use case, you’re in trouble, or worse, you’ll be the one causing them.</p> <p>Either your animation won’t work because another component loaded after yours, overwriting your keyframes, or your component loads last and accidentally changes the animation behavior for every other component using that keyframe's name, and you may not even realize it.</p> <p>Here’s a simple example that demonstrates the problem:</p> <pre><code>.component-one { /* component styles */ animation: pulse 1s ease-in-out infinite alternate; } /* this @keyframes definition will not work */ @keyframes pulse { from { scale: 1; } to { scale: 1.1; } } /* later in the code... */ .component-two { /* component styles */ animation: pulse 1s ease-in-out infinite; } /* this keyframes will apply to both components */ @keyframes pulse { 0%, 20%, 100% { scale: 1; } 10%, 40% { scale: 1.2; } } </code></pre> <p>Both components use the same animation name, but the second <code>@keyframes</code> definition overwrites the first one. Now both <code>component-one</code> and <code>component-two</code> will use the second keyframes, regardless of which component defined which keyframes.</p> <p>See the Pen <a href="https://codepen.io/smashingmag/pen/JoXrOqz">Keyframes Tokens - Demo 1 [forked]</a> by <a href="https://codepen.io/amit_sheen">Amit Sheen</a>.</p> <p>The worst part? This often works perfectly in local development but breaks mysteriously in production when build processes change the loading order of your stylesheets. You end up with animations that behave differently depending on which components are loaded and in what sequence.</p> The Solution: Unified Keyframes <p>The answer to this chaos is surprisingly simple: <strong>predefined dynamic keyframes stored in a shared stylesheet</strong>. Instead of letting every component define its own animations, we create centralized keyframes that are well-documented, easy to use, maintainable, and tailored to the specific needs of your project.</p> <p>Think of it as <strong>keyframes tokens</strong>. Just as we <a href="https://www.smashingmagazine.com/2024/05/naming-best-practices/">use tokens for colors and spacing</a>, and many of us already use tokens for animation properties, like duration and easing functions, why not use tokens for keyframes as well?</p> <p>This approach can integrate naturally with any current design token workflow you’re using, while solving both the small problem (code duplication) and the bigger problem (global scope conflicts) in one go.</p> <p><strong>The idea is straightforward:</strong> create a single source of truth for all our common animations. This shared stylesheet contains carefully crafted keyframes that cover the animation patterns our project actually uses. No more guessing whether a fade animation already exists somewhere in our codebase. No more accidentally overwriting animations from other components.</p> <p>But here’s the key: these aren’t just static copy-paste animations. They’re designed to be dynamic and customizable through CSS custom properties, allowing us to maintain consistency while still having the flexibility to adapt animations to specific use cases, like if you need a slightly bigger “pulse” animation in one place.</p> Building The First Keyframes Token <p>One of the first low-hanging fruits we should tackle is the “fade-in” animation. In one of my recent projects, I found over a dozen separate fade-in definitions, and yes, they all simply animated the <code>opacity</code> from <code>0</code> to <code>1</code>.</p> <p>So, let’s create a new stylesheet, call it <code>kf-tokens.css</code>, import it into our project, and place our keyframes with proper comments inside of it.</p> <pre><code>/* keyframes-tokens.css */ /* * Fade In - fade entrance animation * Usage: animation: kf-fade-in 0.3s ease-out; */ @keyframes kf-fade-in { from { opacity: 0; } to { opacity: 1; } } </code></pre> <p>This single <code>@keyframes</code> declaration replaces all those scattered fade-in animations across our codebase. Clean, simple, and globally applicable. And now that we have this token defined, we can use it from any component throughout our project:</p> <pre><code>.modal { animation: kf-fade-in 0.3s ease-out; } .tooltip { animation: kf-fade-in 0.2s ease-in-out; } .notification { animation: kf-fade-in 0.5s ease-out; } </code></pre> <p>See the Pen <a href="https://codepen.io/smashingmag/pen/yyOzPdv">Keyframes Tokens - Demo 2 [forked]</a> by <a href="https://codepen.io/amit_sheen">Amit Sheen</a>.</p> <p><strong>Note:</strong> <em>We’re using a <code>kf-</code> prefix in all our <code>@keyframes</code> names. This prefix serves as a namespace that prevents naming conflicts with existing animations in the project and makes it immediately clear that these keyframes come from our keyframes tokens file.</em></p> Making A Dynamic Slide <p>The <code>kf-fade-in</code> keyframes work great because it's simple and there's little room to mess things up. In other animations, however, we need to be much more dynamic, and here we can leverage the enormous power of <a href="https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties/">CSS custom properties</a>. This is where keyframes tokens really shine compared to scattered static animations.</p> <p>Let’s take a common scenario: “slide-in” animations. But slide in from where? <code>100px</code> from the right? <code>50%</code> from the left? Should it enter from the top of the screen? Or maybe float in from the bottom? So many possibilities, but instead of creating separate keyframes for each direction and each variation, we can build one flexible token that adapts to all scenarios:</p> <pre><code>/* * Slide In - directional slide animation * Use --kf-slide-from to control direction * Default: slides in from left (-100%) * Usage: * animation: kf-slide-in 0.3s ease-out; * --kf-slide-from: -100px 0; // slide from left * --kf-slide-from: 100px 0; // slide from right * --kf-slide-from: 0 -50px; // slide from top */ @keyframes kf-slide-in { from { translate: var(--kf-slide-from, -100% 0); } to { translate: 0 0; } } </code></pre> <p>Now we can use this single <code>@keyframes</code> token for any slide direction simply by changing the <code>--kf-slide-from</code> custom property:</p> <pre><code>.sidebar { animation: kf-slide-in 0.3s ease-out; /* Uses default value: slides from left */ } .notification { animation: kf-slide-in 0.4s ease-out; --kf-slide-from: 0 -50px; /* slide from top */ } .modal { animation: kf-fade-in 0.5s, kf-slide-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-slide-from: 50px 50px; /* slide from bottom-right */ } </code></pre> <p>This approach gives us incredible flexibility while maintaining consistency. One keyframe declaration, infinite possibilities.</p> <p>See the Pen <a href="https://codepen.io/smashingmag/pen/raeGYXr">Keyframes Tokens - Demo 3 [forked]</a> by <a href="https://codepen.io/amit_sheen">Amit Sheen</a>.</p> <p>And if we want to make our animations even more flexible, allowing for “slide-out” effects as well, we can simply add a <code>--kf-slide-to</code> custom property, similar to what we’ll see in the next section.</p> Bidirectional Zoom Keyframes <p>Another common animation that gets duplicated across projects is “zoom” effects. Whether it’s a subtle scale-up for toast messages, a dramatic zoom-in for modals, or a gentle scale-down effect for headings, zoom animations are everywhere.</p> <p>Instead of creating separate keyframes for each scale value, let’s build one flexible set of <code>kf-zoom</code> keyframes:</p> <div> <pre><code>/* * Zoom - scale animation * Use --kf-zoom-from and --kf-zoom-to to control scale values * Default: zooms from 80% to 100% (0.8 to 1) * Usage: * animation: kf-zoom 0.2s ease-out; * --kf-zoom-from: 0.5; --kf-zoom-to: 1; // zoom from 50% to 100% * --kf-zoom-from: 1; --kf-zoom-to: 0; // zoom from 100% to 0% * --kf-zoom-from: 1; --kf-zoom-to: 1.1; // zoom from 100% to 110% */ @keyframes kf-zoom { from { scale: var(--kf-zoom-from, 0.8); } to { scale: var(--kf-zoom-to, 1); } } </code></pre> </div> <p>With one definition, we can achieve any zoom variation we need:</p> <pre><code>.toast { animation: kf-slide-in 0.2s, kf-zoom 0.4s ease-out; --kf-slide-from: 0 100%; /* slide from top */ /* Uses default zoom: scales from 80% to 100% */ } .modal { animation: kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-from: 0; /* dramatic zoom from 0% to 100% */ } .heading { animation: kf-fade-in 2s, kf-zoom 2s ease-in; --kf-zoom-from: 1.2; --kf-zoom-to: 0.8; /* gentle scale down */ } </code></pre> <p>The default of <code>0.8</code> (80%) works perfectly for most UI elements, like toast messages and cards, while still being easy to customize for special cases.</p> <p>See the Pen <a href="https://codepen.io/smashingmag/pen/WbwZdQZ">Keyframes Tokens - Demo 4 [forked]</a> by <a href="https://codepen.io/amit_sheen">Amit Sheen</a>.</p> <p>You might have noticed something interesting in the recent examples: we've been <strong>combining animations</strong>. One of the key advantages of working with <code>@keyframes</code> tokens is that they’re designed to integrate seamlessly with each other. This smooth composition is intentional, not accidental.</p> <p>We’ll discuss animation composition in more detail later, including where they can become problematic, but most combinations are straightforward and easy to implement.</p> <p><strong>Note:</strong> <em>While writing this article, and maybe because of writing it, I found myself rethinking the whole idea of entrance animations. With all the recent advances in CSS, do we still need them at all? Luckily, Adam Argyle explored the same questions and expressed them brilliantly <a href="https://nerdy.dev/using-starting-style-and-transition-behavior-for-enter-and-exit-stage-effects">in his blog</a>. This doesn’t contradict what’s written here, but it does present an approach worth considering, especially if your projects rely heavily on entrance animations.</em></p> Continuous Animations <p>While entrance animations, like “fade”, “slide”, and “zoom” happen once and then stop, continuous animations loop indefinitely to draw attention or indicate ongoing activity. The two most common continuous animations I encounter are “spin” (for loading indicators) and “pulse” (for highlighting important elements).</p> <p>These animations present unique challenges when it comes to creating keyframes tokens. Unlike entrance animations that typically go from one state to another, continuous animations need to be highly customizable in their behavior patterns.</p> <h3>The Spin Doctor</h3> <p>Every project seems to use multiple spin animations. Some spin clockwise, others counterclockwise. Some do a single 360-degree rotation, others do multiple turns for a faster effect. Instead of creating separate keyframes for each variation, let’s build one flexible spin that handles all scenarios:</p> <div> <pre><code>/* * Spin - rotation animation * Use --kf-spin-from and --kf-spin-to to control rotation range * Use --kf-spin-turns to control rotation amount * Default: rotates from 0deg to 360deg (1 full rotation) * Usage: * animation: kf-spin 1s linear infinite; * --kf-spin-turns: 2; // 2 full rotations * --kf-spin-from: 0deg; --kf-spin-to: 180deg; // half rotation * --kf-spin-from: 0deg; --kf-spin-to: -360deg; // counterclockwise */ @keyframes kf-spin { from { rotate: var(--kf-spin-from, 0deg); } to { rotate: calc(var(--kf-spin-from, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-turns, 1)); } } </code></pre> </div> <p>Now we can create any spin variation we like:</p> <div> <pre><code>.loading-spinner { animation: kf-spin 1s linear infinite; /* Uses default: rotates from 0deg to 360deg */ } .fast-loader { animation: kf-spin 1.2s ease-in-out infinite alternate; --kf-spin-turns: 3; /* 3 full rotations for each direction per cycle */ } .steped-reverse { animation: kf-spin 1.5s steps(8) infinite; --kf-spin-to: -360deg; /* counterclockwise */ } .subtle-wiggle { animation: kf-spin 2s ease-in-out infinite alternate; --kf-spin-from: -16deg; --kf-spin-to: 32deg; /* wiggle 36 deg: between -18deg and +18deg */ } </code></pre> </div> <p>See the Pen <a href="https://codepen.io/smashingmag/pen/MYyErbq">Keyframes Tokens - Demo 5 [forked]</a> by <a href="https://codepen.io/amit_sheen">Amit Sheen</a>.</p> <p>The beauty of this approach is that the same keyframes work for loading spinners, rotating icons, wiggle effects, and even complex multi-turn animations.</p> The Pulse Paradox <p>Pulse animations are trickier because they can “pulse” different properties. Some pulse the <code>scale</code>, others pulse the <code>opacity</code>, and some pulse <code>color</code> properties like brightness or saturation. Rather than creating separate keyframes for each property, we can create keyframes that work with any CSS property.</p> <p>Here's an example of a pulse keyframe with <code>scale</code> and <code>opacity</code> options:</p> <div> <pre><code>/* * Pulse - pulsing animation * Use --kf-pulse-scale-from and --kf-pulse-scale-to to control scale range * Use --kf-pulse-opacity-from and --kf-pulse-opacity-to to control opacity range * Default: no pulse (all values 1) * Usage: * animation: kf-pulse 2s ease-in-out infinite alternate; * --kf-pulse-scale-from: 0.95; --kf-pulse-scale-to: 1.05; // scale pulse * --kf-pulse-opacity-from: 0.7; --kf-pulse-opacity-to: 1; // opacity pulse */ @keyframes kf-pulse { from { scale: var(--kf-pulse-scale-from, 1); opacity: var(--kf-pulse-opacity-from, 1); } to { scale: var(--kf-pulse-scale-to, 1); opacity: var(--kf-pulse-opacity-to, 1); } } </code></pre> </div> <p>This creates a flexible pulse that can animate multiple properties:</p> <pre><code>.call-to-action { animation: kf-pulse 0.6s infinite alternate; --kf-pulse-opacity-from: 0.5; /* opacity pulse */ } .notification-dot { animation: kf-pulse 0.6s ease-in-out infinite alternate; --kf-pulse-scale-from: 0.9; --kf-pulse-scale-to: 1.1; /* scale pulse */ } .text-highlight { animation: kf-pulse 1.5s ease-out infinite; --kf-pulse-scale-from: 0.8; --kf-pulse-opacity-from: 0.2; /* scale and opacity pulse */ } </code></pre> <p>See the Pen <a href="https://codepen.io/smashingmag/pen/xbVXpRo">Keyframes Tokens - Demo 6 [forked]</a> by <a href="https://codepen.io/amit_sheen">Amit Sheen</a>.</p> <p>This single <code>kf-pulse</code> keyframe can handle everything from subtle attention grabs to dramatic highlights, all while being easy to customize.</p> Advanced Easing <p>One of the great things about using keyframes tokens is how easy it is to expand our animation library and provide effects that most developers would not bother to write from scratch, like <em>elastic</em> or <em>bounce</em>.</p> <p>Here is an example of a simple “bounce” keyframes token that uses a <code>--kf-bounce-from</code> custom property to control the jump height.</p> <pre><code>/* * Bounce - bouncing entrance animation * Use --kf-bounce-from to control jump height * Default: jumps from 100vh (off screen) * Usage: * animation: kf-bounce 3s ease-in; * --kf-bounce-from: 200px; // jump from 200px height */ @keyframes kf-bounce { 0% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -1); } 34% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0.4); } 55% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0.2); } 72% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0.1); } 85% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0.05); } 94% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0.025); } 99% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0.0125); } 22%, 45%, 64%, 79%, 90%, 97%, 100% { translate: 0 0; animation-timing-function: ease-out; } } </code></pre> <p>Animations like “elastic” are a bit trickier because of the calculations inside the keyframes. We need to define <code>--kf-elastic-from-X</code> and <code>--kf-elastic-from-Y</code> separately (both are optional), and together they let us create an elastic entrance from any point on the screen.</p> <div> <pre><code>/* * Elastic In - elastic entrance animation * Use --kf-elastic-from-X and --kf-elastic-from-Y to control start position * Default: enters from top center (0, -100vh) * Usage: * animation: kf-elastic-in 2s ease-in-out both; * --kf-elastic-from-X: -50px; * --kf-elastic-from-Y: -200px; // enter from (-50px, -200px) */ @keyframes kf-elastic-in { 0% { translate: calc(var(--kf-elastic-from-X, -50vw) * 1) calc(var(--kf-elastic-from-Y, 0px) * 1); } 16% { translate: calc(var(--kf-elastic-from-X, -50vw) * -0.3227) calc(var(--kf-elastic-from-Y, 0px) * -0.3227); } 28% { translate: calc(var(--kf-elastic-from-X, -50vw) * 0.1312) calc(var(--kf-elastic-from-Y, 0px) * 0.1312); } 44% { translate: calc(var(--kf-elastic-from-X, -50vw) * -0.0463) calc(var(--kf-elastic-from-Y, 0px) * -0.0463); } 59% { translate: calc(var(--kf-elastic-from-X, -50vw) * 0.0164) calc(var(--kf-elastic-from-Y, 0px) * 0.0164); } 73% { translate: calc(var(--kf-elastic-from-X, -50vw) * -0.0058) calc(var(--kf-elastic-from-Y, 0px) * -0.0058); } 88% { translate: calc(var(--kf-elastic-from-X, -50vw) * 0.0020) calc(var(--kf-elastic-from-Y, 0px) * 0.0020); } 100% { translate: 0 0; } } </code></pre> </div> <p>This approach makes it easy to reuse and customize advanced keyframes across our project, just by changing a single custom property.</p> <div> <pre><code>.bounce-and-zoom { animation: kf-bounce 3s ease-in, kf-zoom 3s linear; --kf-zoom-from: 0; } .bounce-and-slide { animation-composition: add; /* Both animations use <code>translate</code> */ animation: kf-bounce 3s ease-in, kf-slide-in 3s ease-out; --kf-slide-from: -200px; } .elastic-in { animation: kf-elastic-in 2s ease-in-out both; } </code></pre> </div> <p>See the Pen <a href="https://codepen.io/smashingmag/pen/QwNqadQ">Keyframes Tokens - Demo 7 [forked]</a> by <a href="https://codepen.io/amit_sheen">Amit Sheen</a>.</p> <p>Up to this point, we’ve seen how we can consolidate keyframes in a smart and efficient way. Of course, you might want to tweak things to better fit your project’s needs, but we’ve covered examples of several common animations and everyday use cases. And with these keyframes tokens in place, we now have powerful building blocks for creating consistent, maintainable animations across the entire project. No more duplicated keyframes, no more global scope conflicts. Just a clean, convenient way to handle all our animation needs.</p> <p>But the real question is: <strong>How do we compose these building blocks together?</strong></p> Putting It All Together <p>We’ve seen that combining basic keyframes tokens is simple. We don’t need anything special but to define the first animation, define the second one, set the variables as needed, and that’s it.</p> <pre><code>/* Fade in + slide in */ .toast { animation: kf-fade-in 0.4s, kf-slide-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-slide-from: 0 40px; } /* Zoom in + fade in */ .modal { animation: kf-fade-in 0.3s, kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-from: 0.7; --kf-zoom-to: 1; } /* Slide in + pulse */ .notification { animation: kf-slide-in 0.5s, kf-pulse 1.2s ease-in-out infinite alternate; --kf-slide-from: -100px 0; --kf-pulse-scale-from: 0.95; --kf-pulse-scale-to: 1.05; } </code></pre> <p>These combinations work beautifully because each animation targets a different property: <code>opacity</code>, <code>transform</code> (<code>translate</code>/<code>scale</code>), etc. But sometimes there are conflicts, and we need to know why and how to deal with them.</p> <p>When two animations try to animate the same property — for example, both animating <code>scale</code> or both animating <code>opacity</code> — the result will not be what you expect. By default, only one of the animations is actually applied to that property, which is the last one in the <code>animation</code> list. This is a limitation of how CSS handles multiple animations on the same property.</p> <p>For example, this will not work as intended because only the <code>kf-pulse</code> animation will apply.</p> <pre><code>.bad-combo { animation: kf-zoom 0.5s forwards, kf-pulse 1.2s infinite alternate; --kf-zoom-from: 0.5; --kf-zoom-to: 1.2; --kf-pulse-scale-from: 0.8; --kf-pulse-scale-to: 1.1; } </code></pre> Animation Addition <p>The simplest and most direct way to handle multiple animations that affect the same property is to use the <code>animation-composition</code> property. In the last example above, the <code>kf-pulse</code> animation replaces the <code>kf-zoom</code> animation, so we will not see the initial zoom and will not get the expected <code>scale</code> <code>to</code> of <code>1.2</code>.</p> <p>By setting the <code>animation-composition</code> to <code>add</code>, we tell the browser to <em>combine</em> both animations. This gives us the result we want.</p> <pre><code>.component-two { animation-composition: add; } </code></pre> <p>See the Pen <a href="https://codepen.io/smashingmag/pen/YPqrYZw">Keyframes Tokens - Demo 8 [forked]</a> by <a href="https://codepen.io/amit_sheen">Amit Sheen</a>.</p> <p>This approach works well for most cases where we want to combine effects on the same property. It is also useful when we need to combine animations with static property values.</p> <p>For example, if we have an element that uses the <code>translate</code> property to position it exactly where we want, and then we want to animate it in with the <code>kf-slide-in</code> keyframes, we get a nasty visible jump without <code>animation-composition</code>.</p> <p>See the Pen <a href="https://codepen.io/smashingmag/pen/myPBpWr">Keyframes Tokens - Demo 9 [forked]</a> by <a href="https://codepen.io/amit_sheen">Amit Sheen</a>.</p> <p>With <code>animation-composition</code> set to <code>add</code>, the animation is smoothly combined with the existing transform, so the element stays in place and animates as expected.</p> Animation Stagger <p>Another way of handling multiple animations is to “stagger” them — that is, start the second animation slightly after the first one finishes. It is not a solution that works for every case, but it is useful when we have an entrance animation followed by a continuous animation.</p> <pre><code>/* fade in + opacity pulse */ .notification { animation: kf-fade-in 2s ease-out, kf-pulse 0.5s 2s ease-in-out infinite alternate; --kf-pulse-opacity-to: 0.5; } </code></pre> <p>See the Pen <a href="https://codepen.io/smashingmag/pen/bNpoaqo">Keyframes Tokens - Demo 10 [forked]</a> by <a href="https://codepen.io/amit_sheen">Amit Sheen</a>.</p> Order Matters <p>A large part of the animations we work with use the <code>transform</code> property. In most cases, this is simply more convenient. It also has a performance advantage as transform animations can be GPU-accelerated. But if we use transforms, we need to accept that the order in which we perform our transformations matters. <em>A lot</em>.</p> <p>In our keyframes so far, we’ve used <em>individual transforms</em>. According to the specs, these are always applied in a fixed order: first, the element gets <code>translate</code>, then <code>rotate</code>, then <code>scale</code>. This makes sense and is what most of us expect.</p> <p>However, if we use the <code>transform</code> property, the order in which the functions are written is the order in which they are applied. In this case, if we move something 100 pixels on the X-axis and then rotate it by 45 degrees, it is <em>not</em> the same as first rotating it by 45 degrees and then moving it 100 pixels.</p> <pre><code>/* Pink square: First translate, then rotate */ .example-one { transform: translateX(100px) rotate(45deg); } /* Green square: First rotate, then translate */ .example-two { transform: rotate(45deg) translateX(100px); } </code></pre> <p>See the Pen <a href="https://codepen.io/smashingmag/pen/zxqEpZb">Keyframes Tokens - Demo 11 [forked]</a> by <a href="https://codepen.io/amit_sheen">Amit Sheen</a>.</p> <p>But according to the <code>transform</code> order, all individual transforms — everything we’ve used for the keyframes tokens — happens before the transform functions. That means anything you set in the <code>transform</code> property will happen <em>after</em> the animations. But if you set, for example, <code>translate</code> together with the <code>kf-spin</code> keyframes, the <code>translate</code> will happen <em>before</em> the animation. Confused yet?!</p> <p>This leads to situations where static values can cause different results for the same animation, like in the following case:</p> <div> <pre><code>/* Common animation for both spinners */ .spinner { animation: kf-spin 1s linear infinite; } /* Pink spinner: translate before rotate (individual transform) */ .spinner-pink { translate: 100% 50%; } /* Green spinner: rotate then translate (function order) */ .spinner-green { transform: translate(100%, 50%); } </code></pre> </div> <p>See the Pen <a href="https://codepen.io/smashingmag/pen/NPNaXjw">Keyframes Tokens - Demo 12 [forked]</a> by <a href="https://codepen.io/amit_sheen">Amit Sheen</a>.</p> <p>You can see that the first spinner (pink) gets a <code>translate</code> that happens before the <code>rotate</code> of <code>kf-spin</code>, so it first moves to its place and then spins. The second spinner (green) gets a <code>translate()</code> function that happens after the individual transform, so the element first spins, then moves relative to its current angle, and we get that wide orbit effect.</p> <p><strong>No, this is not a bug</strong>. It is just one of those things we need to know about CSS and keep in mind when working with multiple animations or multiple transforms. If needed, you can also create an additional set of <code>kf-spin-alt</code> keyframes that rotate elements using the <code>rotate()</code> function.</p> Reduced Motion <p>And while we’re talking about alternative keyframes, we cannot ignore the “no animation” option. One of the biggest advantages of using keyframes tokens is that <strong>accessibility</strong> can be baked in, and it is actually quite easy to do. By designing our keyframes with accessibility in mind, we can ensure that <a href="https://www.smashingmagazine.com/2021/10/respecting-users-motion-preferences/">users who prefer reduced motion get a smoother, less distracting experience</a>, without extra work or code duplication.</p> <p>The exact meaning of “Reduced Motion” can change a bit from one animation to another, and from project to project, but here are a few important points to keep in mind:</p> <h3>Muting Keyframes</h3> <p>While some animations can be softened or slowed down, there are others that should disappear completely when reduced motion is requested. Pulse animations are a good example. To make sure these animations do not run in reduced motion mode, we can simply wrap them in the appropriate media query.</p> <pre><code> @media (prefers-reduced-motion: no-preference) { @keyfrmaes kf-pulse { from { scale: var(--kf-pulse-scale-from, 1); opacity: var(--kf-pulse-opacity-from, 1); } to { scale: var(--kf-pulse-scale-to, 1); opacity: var(--kf-pulse-opacity-to, 1); } } } </code></pre> <p>This ensures that users who have set <code>prefers-reduced-motion</code> to <code>reduce</code> will not see the animation and will get an experience that matches their preference.</p> <h3>Instant In</h3> <p>There are some keyframes we cannot simply remove, such as entrance animations. The value must change, must animate; otherwise, the element won't have the correct values. But in reduced motion, this transition from the initial value should be instant.</p> <p>To achieve this, we’ll define an extra set of keyframes where the value jumps immediately to the end state. These become our default keyframes. Then, we’ll add the regular keyframes inside a media query for <code>prefers-reduced-motion</code> set to <code>no-preference</code>, just like in the previous example.</p> <pre><code>/* pop in instantly for reduced motion */ @keyframes kf-zoom { from, to { scale: var(--kf-zoom-to, 1); } } @media (prefers-reduced-motion: no-preference) { /* Original zoom keyframes */ @keyframes kf-zoom { from { scale: var(--kf-zoom-from, 0.8); } to { scale: var(--kf-zoom-to, 1); } } } </code></pre> <p>This way, users who prefer reduced motion will see the element appear instantly in its final state, while everyone else gets the animated transition.</p> <h3>The Soft Approach</h3> <p>There are cases where we do want to keep some movement, but much softer and calmer than the original animation. For example, we can replace a bounce entrance with a gentle fade-in.</p> <pre><code> @keyframes kf-bounce { /* Soft fade-in for reduced motion */ } @media (prefers-reduced-motion: no-preference) { @keyframes kf-bounce { /* Original bounce keyframes */ } } </code></pre> <p>Now, users with reduced motion enabled still get a sense of appearance, but without the intense movement of a bounce or elastic animation.</p> <p>With the building blocks in place, the next question is how to make them part of the actual workflow. Writing flexible keyframes is one thing, but making them reliable across a large project requires a few strategies that I had to learn the hard way.</p> Implementation Strategies &amp; Best Practices <p>Once we have a solid library of keyframes tokens, the real challenge is how to bring them into everyday work.</p> <ul> <li>The temptation is to drop all keyframes in at once and declare the problem solved, but in practice I have found that <strong>the best results come from gradual adoption</strong>. Start with the most common animations, such as fade or slide. These are easy wins that show immediate value without requiring big rewrites.</li> <li> <strong>Naming is another point that deserves attention.</strong> A consistent prefix or namespace makes it obvious which animations are tokens and which are local one-offs. It also prevents accidental collisions and helps new team members recognize the shared system at a glance.</li> <li> <strong>Documentation is just as important as the code itself.</strong> Even a short comment above each keyframes token can save hours of guessing later. A developer should be able to open the tokens file, scan for the effect they need, and copy the usage pattern straight into their component.</li> <li> <strong>Flexibility is what makes this approach worth the effort.</strong> By exposing sensible custom properties, we give teams room to adapt the animation without breaking the system. At the same time, try not to overcomplicate. Provide the knobs that matter and keep the rest opinionated.</li> <li>Finally, <strong>remember accessibility</strong>. Not every animation needs a reduced motion alternative, but many do. Baking in these adjustments early means we never have to retrofit them later, and it shows a level of care that our users will notice even if they never mention it.</li> </ul> <p>In my experience, treating keyframes tokens as part of our design tokens workflow is what makes them stick. Once they are in place, they stop feeling like special effects and become part of the design language, a natural extension of how the product moves and responds.</p> Wrapping Up <p>Animations can be one of the most joyful parts of building interfaces, but without structure, they can also become one of the biggest sources of frustration. By treating keyframes as tokens, you take something that is usually messy and hard to manage and turn it into a clear, predictable system.</p> <p>The real value is not just in saving a few lines of code. It is in the <strong>confidence</strong> that when you use a fade, slide, zoom, or spin, you know exactly how it will behave across the project. It is in the <strong>flexibility</strong> that comes from custom properties without the chaos of endless variations. And it is in the <strong>accessibility</strong> built into the foundation rather than added as an afterthought.</p> <p>I have seen these ideas work in different teams and different codebases, and the pattern is always the same.</p> <p>Once the tokens are in place, keyframes stop being a scattered collection of tricks and become part of the design language. They make the product feel more intentional, more consistent, and more alive.</p> <p>If you take one thing from this article, let it be this: <strong>animations deserve the same care and structure we already give to colors, typography, and spacing</strong>. A small investment in keyframes tokens pays off every time your interface moves.</p>