<p>Everyone has a creative spark in them. Some bring their ideas to life with digital tools, others <strong>capture the perfect moment</strong> with a camera or love to grab pen and paper to create little doodles or pieces of lettering. And even if you don’t think of yourself as particularly creative, who knows? There might be a hidden talent waiting to be discovered!</p> <p>That’s exactly what our <a href="https://www.smashingmagazine.com/2015/12/desktop-wallpaper-calendars-join-in/">monthly wallpapers series</a> has been all about for over 15 years now. It’s a chance to <strong>step away from the everyday</strong> and dive into a fun, creative project. And this month is no different!</p> <p>Talented artists and designers from all over the world have once again put their skills to work, creating unique and inspiring desktop wallpapers to <strong>brighten up your screens</strong> this June. You’ll find their designs below, along with some favorites from our archives that were just too good to leave out. A huge thank you to everyone who shared their creations with us this month — you’re <em>smashing</em>!</p> <p>If <em>you</em> too would like to <strong>get featured</strong> in one of our upcoming wallpapers posts, please don’t hesitate to <a href="https://www.smashingmagazine.com/desktop-wallpaper-calendars-join-in/"><strong>join in</strong></a>. We can’t wait to see what you’ll come up with! Happy June!</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> </ul> Drifting Into June <p>“June marks the beginning of summer and the end of the semester for many colleges. When I think of summer, I think of walks along the park with my family watching ducks swimming in the lake, and swimming in our pool with my siblings. Naturally from there I put them together to create an amusing scene of a duck slowly paddling around in an inner tube.” — Designed by <a href="https://mu-art.org/emmakim/">Emma Kim</a> from the United States.</p> <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/jun-26-drifting-into-june-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2026/jun-26-drifting-into-june-preview-opt.png"></a> <ul> <li><a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/jun-26-drifting-into-june-preview.png">preview</a></li> <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/cal/jun-26-drifting-into-june-cal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/cal/jun-26-drifting-into-june-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/cal/jun-26-drifting-into-june-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/cal/jun-26-drifting-into-june-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/cal/jun-26-drifting-into-june-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/cal/jun-26-drifting-into-june-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/cal/jun-26-drifting-into-june-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/cal/jun-26-drifting-into-june-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/cal/jun-26-drifting-into-june-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/cal/jun-26-drifting-into-june-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/cal/jun-26-drifting-into-june-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/cal/jun-26-drifting-into-june-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/cal/jun-26-drifting-into-june-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/cal/jun-26-drifting-into-june-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/cal/jun-26-drifting-into-june-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/cal/jun-26-drifting-into-june-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/cal/jun-26-drifting-into-june-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/cal/jun-26-drifting-into-june-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/cal/jun-26-drifting-into-june-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/cal/jun-26-drifting-into-june-cal-2560x1440.png">2560x1440</a> </li> <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/nocal/jun-26-drifting-into-june-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/nocal/jun-26-drifting-into-june-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/nocal/jun-26-drifting-into-june-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/nocal/jun-26-drifting-into-june-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/nocal/jun-26-drifting-into-june-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/nocal/jun-26-drifting-into-june-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/nocal/jun-26-drifting-into-june-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/nocal/jun-26-drifting-into-june-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/nocal/jun-26-drifting-into-june-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/nocal/jun-26-drifting-into-june-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/nocal/jun-26-drifting-into-june-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/nocal/jun-26-drifting-into-june-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/nocal/jun-26-drifting-into-june-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/nocal/jun-26-drifting-into-june-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/nocal/jun-26-drifting-into-june-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/nocal/jun-26-drifting-into-june-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/nocal/jun-26-drifting-into-june-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/nocal/jun-26-drifting-into-june-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/nocal/jun-26-drifting-into-june-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/drifting-into-june/nocal/jun-26-drifting-into-june-nocal-2560x1440.png">2560x1440</a> </li> </ul> Let The Ocean Influence You <p>“The ocean covers more than 70% of the surface of the Earth, yet we know barely anything about it. Maybe June can be the month you discover something new about yourself.” — Designed by <a href="https://www.gingeritsolutions.com/">Ginger IT Solutions</a> from Serbia.</p> <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/jun-26-let-the-ocean-influence-you-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2026/jun-26-let-the-ocean-influence-you-preview-opt.png"></a> <ul> <li><a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/jun-26-let-the-ocean-influence-you-preview.png">preview</a></li> <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/cal/jun-26-let-the-ocean-influence-you-cal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/cal/jun-26-let-the-ocean-influence-you-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/cal/jun-26-let-the-ocean-influence-you-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/cal/jun-26-let-the-ocean-influence-you-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/cal/jun-26-let-the-ocean-influence-you-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/cal/jun-26-let-the-ocean-influence-you-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/cal/jun-26-let-the-ocean-influence-you-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/cal/jun-26-let-the-ocean-influence-you-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/cal/jun-26-let-the-ocean-influence-you-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/cal/jun-26-let-the-ocean-influence-you-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/cal/jun-26-let-the-ocean-influence-you-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/cal/jun-26-let-the-ocean-influence-you-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/cal/jun-26-let-the-ocean-influence-you-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/cal/jun-26-let-the-ocean-influence-you-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/cal/jun-26-let-the-ocean-influence-you-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/cal/jun-26-let-the-ocean-influence-you-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/cal/jun-26-let-the-ocean-influence-you-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/cal/jun-26-let-the-ocean-influence-you-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/cal/jun-26-let-the-ocean-influence-you-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/cal/jun-26-let-the-ocean-influence-you-cal-2560x1440.png">2560x1440</a> </li> <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/nocal/jun-26-let-the-ocean-influence-you-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/nocal/jun-26-let-the-ocean-influence-you-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/nocal/jun-26-let-the-ocean-influence-you-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/nocal/jun-26-let-the-ocean-influence-you-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/nocal/jun-26-let-the-ocean-influence-you-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/nocal/jun-26-let-the-ocean-influence-you-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/nocal/jun-26-let-the-ocean-influence-you-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/nocal/jun-26-let-the-ocean-influence-you-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/nocal/jun-26-let-the-ocean-influence-you-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/nocal/jun-26-let-the-ocean-influence-you-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/nocal/jun-26-let-the-ocean-influence-you-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/nocal/jun-26-let-the-ocean-influence-you-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/nocal/jun-26-let-the-ocean-influence-you-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/nocal/jun-26-let-the-ocean-influence-you-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/nocal/jun-26-let-the-ocean-influence-you-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/nocal/jun-26-let-the-ocean-influence-you-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/nocal/jun-26-let-the-ocean-influence-you-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/nocal/jun-26-let-the-ocean-influence-you-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/nocal/jun-26-let-the-ocean-influence-you-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-the-ocean-influence-you/nocal/jun-26-let-the-ocean-influence-you-nocal-2560x1440.png">2560x1440</a> </li> </ul> Dancing In The Kitchen <p>“June is such an iconic summer month, filled with sunshine, hope, and possibilities. When we raise both hands above our heads in celebratory dance, we symbolically release our cares for the day. When we do this dance in the kitchen, we not only release but also celebrate our bodies, our souls, and nourishment we’re about to give ourselves. This digital collage represents the freedom of movement, of dance, of joyful expression, of nourishment, creativity, and hope. May we all dance in the kitchen.” — Designed by <a href="https://luckychair.com/">Sue Jenkins</a> from the United States.</p> <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/jun-26-dancing-in-the-kitchen-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2026/jun-26-dancing-in-the-kitchen-preview-opt.png"></a> <ul> <li><a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/jun-26-dancing-in-the-kitchen-preview.png">preview</a></li> <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/cal/jun-26-dancing-in-the-kitchen-cal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/cal/jun-26-dancing-in-the-kitchen-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/cal/jun-26-dancing-in-the-kitchen-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/cal/jun-26-dancing-in-the-kitchen-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/cal/jun-26-dancing-in-the-kitchen-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/cal/jun-26-dancing-in-the-kitchen-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/cal/jun-26-dancing-in-the-kitchen-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/cal/jun-26-dancing-in-the-kitchen-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/cal/jun-26-dancing-in-the-kitchen-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/cal/jun-26-dancing-in-the-kitchen-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/cal/jun-26-dancing-in-the-kitchen-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/cal/jun-26-dancing-in-the-kitchen-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/cal/jun-26-dancing-in-the-kitchen-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/cal/jun-26-dancing-in-the-kitchen-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/cal/jun-26-dancing-in-the-kitchen-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/cal/jun-26-dancing-in-the-kitchen-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/cal/jun-26-dancing-in-the-kitchen-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/cal/jun-26-dancing-in-the-kitchen-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/cal/jun-26-dancing-in-the-kitchen-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/cal/jun-26-dancing-in-the-kitchen-cal-2560x1440.png">2560x1440</a> </li> <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/nocal/jun-26-dancing-in-the-kitchen-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/nocal/jun-26-dancing-in-the-kitchen-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/nocal/jun-26-dancing-in-the-kitchen-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/nocal/jun-26-dancing-in-the-kitchen-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/nocal/jun-26-dancing-in-the-kitchen-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/nocal/jun-26-dancing-in-the-kitchen-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/nocal/jun-26-dancing-in-the-kitchen-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/nocal/jun-26-dancing-in-the-kitchen-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/nocal/jun-26-dancing-in-the-kitchen-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/nocal/jun-26-dancing-in-the-kitchen-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/nocal/jun-26-dancing-in-the-kitchen-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/nocal/jun-26-dancing-in-the-kitchen-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/nocal/jun-26-dancing-in-the-kitchen-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/nocal/jun-26-dancing-in-the-kitchen-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/nocal/jun-26-dancing-in-the-kitchen-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/nocal/jun-26-dancing-in-the-kitchen-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/nocal/jun-26-dancing-in-the-kitchen-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/nocal/jun-26-dancing-in-the-kitchen-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/nocal/jun-26-dancing-in-the-kitchen-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/dancing-in-the-kitchen/nocal/jun-26-dancing-in-the-kitchen-nocal-2560x1440.png">2560x1440</a> </li> </ul> Fruit &amp; Gingham <p>“June reminds me of fresh fruit and bright colors, so I decided to watercolor some fruits, and it complimented well on a blue gingham picnic table background!” — Designed by <a href="https://mu-art.org/ellapeplowski/">Ella Peplowski</a> from Ringwood, NJ.</p> <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/jun-26-fruit-and-gingham-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2026/jun-26-fruit-and-gingham-preview-opt.png"></a> <ul> <li><a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/jun-26-fruit-and-gingham-preview.png">preview</a></li> <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/cal/jun-26-fruit-and-gingham-cal-320x480.jpg">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/cal/jun-26-fruit-and-gingham-cal-640x480.jpg">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/cal/jun-26-fruit-and-gingham-cal-800x480.jpg">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/cal/jun-26-fruit-and-gingham-cal-800x600.jpg">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/cal/jun-26-fruit-and-gingham-cal-1024x768.jpg">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/cal/jun-26-fruit-and-gingham-cal-1024x1024.jpg">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/cal/jun-26-fruit-and-gingham-cal-1152x864.jpg">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/cal/jun-26-fruit-and-gingham-cal-1280x720.jpg">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/cal/jun-26-fruit-and-gingham-cal-1280x800.jpg">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/cal/jun-26-fruit-and-gingham-cal-1280x960.jpg">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/cal/jun-26-fruit-and-gingham-cal-1280x1024.jpg">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/cal/jun-26-fruit-and-gingham-cal-1400x1050.jpg">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/cal/jun-26-fruit-and-gingham-cal-1440x900.jpg">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/cal/jun-26-fruit-and-gingham-cal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/cal/jun-26-fruit-and-gingham-cal-1680x1050.jpg">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/cal/jun-26-fruit-and-gingham-cal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/cal/jun-26-fruit-and-gingham-cal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/cal/jun-26-fruit-and-gingham-cal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/cal/jun-26-fruit-and-gingham-cal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/cal/jun-26-fruit-and-gingham-cal-2560x1440.jpg">2560x1440</a> </li> <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/nocal/jun-26-fruit-and-gingham-nocal-320x480.jpg">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/nocal/jun-26-fruit-and-gingham-nocal-640x480.jpg">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/nocal/jun-26-fruit-and-gingham-nocal-800x480.jpg">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/nocal/jun-26-fruit-and-gingham-nocal-800x600.jpg">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/nocal/jun-26-fruit-and-gingham-nocal-1024x768.jpg">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/nocal/jun-26-fruit-and-gingham-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/nocal/jun-26-fruit-and-gingham-nocal-1152x864.jpg">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/nocal/jun-26-fruit-and-gingham-nocal-1280x720.jpg">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/nocal/jun-26-fruit-and-gingham-nocal-1280x800.jpg">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/nocal/jun-26-fruit-and-gingham-nocal-1280x960.jpg">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/nocal/jun-26-fruit-and-gingham-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/nocal/jun-26-fruit-and-gingham-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/nocal/jun-26-fruit-and-gingham-nocal-1440x900.jpg">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/nocal/jun-26-fruit-and-gingham-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/nocal/jun-26-fruit-and-gingham-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/nocal/jun-26-fruit-and-gingham-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/nocal/jun-26-fruit-and-gingham-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/nocal/jun-26-fruit-and-gingham-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/nocal/jun-26-fruit-and-gingham-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/fruit-and-gingham/nocal/jun-26-fruit-and-gingham-nocal-2560x1440.jpg">2560x1440</a> </li> </ul> Not In The Mood Forecast <p>Designed by <a href="https://www.ricklopez.eu/">Ricardo Gimenes</a> from Spain.</p> <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/jun-26-not-in-the-mood-forecast-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2026/jun-26-not-in-the-mood-forecast-preview-opt.png"></a> <ul> <li><a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/jun-26-not-in-the-mood-forecast-preview.png">preview</a></li> <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/cal/jun-26-not-in-the-mood-forecast-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/cal/jun-26-not-in-the-mood-forecast-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/cal/jun-26-not-in-the-mood-forecast-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/cal/jun-26-not-in-the-mood-forecast-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/cal/jun-26-not-in-the-mood-forecast-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/cal/jun-26-not-in-the-mood-forecast-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/cal/jun-26-not-in-the-mood-forecast-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/cal/jun-26-not-in-the-mood-forecast-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/cal/jun-26-not-in-the-mood-forecast-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/cal/jun-26-not-in-the-mood-forecast-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/cal/jun-26-not-in-the-mood-forecast-cal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/cal/jun-26-not-in-the-mood-forecast-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/cal/jun-26-not-in-the-mood-forecast-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/cal/jun-26-not-in-the-mood-forecast-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/cal/jun-26-not-in-the-mood-forecast-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/cal/jun-26-not-in-the-mood-forecast-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/cal/jun-26-not-in-the-mood-forecast-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/cal/jun-26-not-in-the-mood-forecast-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/cal/jun-26-not-in-the-mood-forecast-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/cal/jun-26-not-in-the-mood-forecast-cal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/cal/jun-26-not-in-the-mood-forecast-cal-3840x2160.png">3840x2160</a> </li> <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/nocal/jun-26-not-in-the-mood-forecast-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/nocal/jun-26-not-in-the-mood-forecast-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/nocal/jun-26-not-in-the-mood-forecast-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/nocal/jun-26-not-in-the-mood-forecast-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/nocal/jun-26-not-in-the-mood-forecast-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/nocal/jun-26-not-in-the-mood-forecast-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/nocal/jun-26-not-in-the-mood-forecast-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/nocal/jun-26-not-in-the-mood-forecast-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/nocal/jun-26-not-in-the-mood-forecast-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/nocal/jun-26-not-in-the-mood-forecast-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/nocal/jun-26-not-in-the-mood-forecast-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/nocal/jun-26-not-in-the-mood-forecast-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/nocal/jun-26-not-in-the-mood-forecast-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/nocal/jun-26-not-in-the-mood-forecast-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/nocal/jun-26-not-in-the-mood-forecast-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/nocal/jun-26-not-in-the-mood-forecast-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/nocal/jun-26-not-in-the-mood-forecast-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/nocal/jun-26-not-in-the-mood-forecast-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/nocal/jun-26-not-in-the-mood-forecast-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/nocal/jun-26-not-in-the-mood-forecast-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/not-in-the-mood-forecast/nocal/jun-26-not-in-the-mood-forecast-nocal-3840x2160.png">3840x2160</a> </li> </ul> Ballpark Patches <p>“June brings in warmer weather, so I designed a baseball-patch-inspired piece to celebrate the start of the season and the nice weather.” — Designed by <a href="https://madisonaevans.myportfolio.com/">Madison Evans</a> from Scranton, PA.</p> <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/ballpark-patches/jun-26-ballpark-patches-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2026/jun-26-ballpark-patches-preview-opt.png"></a> <ul> <li><a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/ballpark-patches/jun-26-ballpark-patches-preview.png">preview</a></li> <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/ballpark-patches/cal/jun-26-ballpark-patches-cal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/ballpark-patches/cal/jun-26-ballpark-patches-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/ballpark-patches/cal/jun-26-ballpark-patches-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/ballpark-patches/cal/jun-26-ballpark-patches-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/ballpark-patches/cal/jun-26-ballpark-patches-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/ballpark-patches/cal/jun-26-ballpark-patches-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/ballpark-patches/cal/jun-26-ballpark-patches-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/ballpark-patches/cal/jun-26-ballpark-patches-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/ballpark-patches/cal/jun-26-ballpark-patches-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/ballpark-patches/cal/jun-26-ballpark-patches-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/ballpark-patches/cal/jun-26-ballpark-patches-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/ballpark-patches/cal/jun-26-ballpark-patches-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/ballpark-patches/cal/jun-26-ballpark-patches-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/ballpark-patches/cal/jun-26-ballpark-patches-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/ballpark-patches/cal/jun-26-ballpark-patches-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/ballpark-patches/cal/jun-26-ballpark-patches-cal-2560x1440.png">2560x1440</a> </li> <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/ballpark-patches/nocal/jun-26-ballpark-patches-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/ballpark-patches/nocal/jun-26-ballpark-patches-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/ballpark-patches/nocal/jun-26-ballpark-patches-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/ballpark-patches/nocal/jun-26-ballpark-patches-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/ballpark-patches/nocal/jun-26-ballpark-patches-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/ballpark-patches/nocal/jun-26-ballpark-patches-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/ballpark-patches/nocal/jun-26-ballpark-patches-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/ballpark-patches/nocal/jun-26-ballpark-patches-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/ballpark-patches/nocal/jun-26-ballpark-patches-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/ballpark-patches/nocal/jun-26-ballpark-patches-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/ballpark-patches/nocal/jun-26-ballpark-patches-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/ballpark-patches/nocal/jun-26-ballpark-patches-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/ballpark-patches/nocal/jun-26-ballpark-patches-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/ballpark-patches/nocal/jun-26-ballpark-patches-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/ballpark-patches/nocal/jun-26-ballpark-patches-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/ballpark-patches/nocal/jun-26-ballpark-patches-nocal-2560x1440.png">2560x1440</a> </li> </ul> A Very Special Amusement Park <p>“June brings summer, and it’s a great time to travel and experience new adventures! An amusement park is always a good idea, although some are best enjoyed from the comfort of your own home.” — Designed by <a href="https://www.silocreativo.com/en/">Veronica Valenzuela</a> from Spain.</p> <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/a-very-special-amusement-park/jun-26-a-very-special-amusement-park-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2026/jun-26-a-very-special-amusement-park-preview-opt.png"></a> <ul> <li><a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/a-very-special-amusement-park/jun-26-a-very-special-amusement-park-preview.png">preview</a></li> <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/a-very-special-amusement-park/cal/jun-26-a-very-special-amusement-park-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/a-very-special-amusement-park/cal/jun-26-a-very-special-amusement-park-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/a-very-special-amusement-park/cal/jun-26-a-very-special-amusement-park-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/a-very-special-amusement-park/cal/jun-26-a-very-special-amusement-park-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/a-very-special-amusement-park/cal/jun-26-a-very-special-amusement-park-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/a-very-special-amusement-park/cal/jun-26-a-very-special-amusement-park-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/a-very-special-amusement-park/cal/jun-26-a-very-special-amusement-park-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/a-very-special-amusement-park/cal/jun-26-a-very-special-amusement-park-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/a-very-special-amusement-park/cal/jun-26-a-very-special-amusement-park-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/a-very-special-amusement-park/cal/jun-26-a-very-special-amusement-park-cal-2560x1440.png">2560x1440</a> </li> <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/a-very-special-amusement-park/nocal/jun-26-a-very-special-amusement-park-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/a-very-special-amusement-park/nocal/jun-26-a-very-special-amusement-park-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/a-very-special-amusement-park/nocal/jun-26-a-very-special-amusement-park-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/a-very-special-amusement-park/nocal/jun-26-a-very-special-amusement-park-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/a-very-special-amusement-park/nocal/jun-26-a-very-special-amusement-park-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/a-very-special-amusement-park/nocal/jun-26-a-very-special-amusement-park-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/a-very-special-amusement-park/nocal/jun-26-a-very-special-amusement-park-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/a-very-special-amusement-park/nocal/jun-26-a-very-special-amusement-park-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/a-very-special-amusement-park/nocal/jun-26-a-very-special-amusement-park-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/a-very-special-amusement-park/nocal/jun-26-a-very-special-amusement-park-nocal-2560x1440.png">2560x1440</a> </li> </ul> Wavy Jellyfish <p>Designed by <a href="https://mu-art.org/jaydenevans/portfolio/">Jayden Evans</a> from Scranton, Pennsylvania.</p> <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/wavy-jellyfish/jun-26-wavy-jellyfish-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2026/jun-26-wavy-jellyfish-preview-opt.png"></a> <ul> <li><a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/wavy-jellyfish/jun-26-wavy-jellyfish-preview.png">preview</a></li> <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/wavy-jellyfish/cal/jun-26-wavy-jellyfish-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/wavy-jellyfish/cal/jun-26-wavy-jellyfish-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/wavy-jellyfish/cal/jun-26-wavy-jellyfish-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/wavy-jellyfish/cal/jun-26-wavy-jellyfish-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/wavy-jellyfish/cal/jun-26-wavy-jellyfish-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/wavy-jellyfish/cal/jun-26-wavy-jellyfish-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/wavy-jellyfish/cal/jun-26-wavy-jellyfish-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/wavy-jellyfish/cal/jun-26-wavy-jellyfish-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/wavy-jellyfish/cal/jun-26-wavy-jellyfish-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/wavy-jellyfish/cal/jun-26-wavy-jellyfish-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/wavy-jellyfish/cal/jun-26-wavy-jellyfish-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/wavy-jellyfish/cal/jun-26-wavy-jellyfish-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/wavy-jellyfish/cal/jun-26-wavy-jellyfish-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/wavy-jellyfish/cal/jun-26-wavy-jellyfish-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/wavy-jellyfish/cal/jun-26-wavy-jellyfish-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/wavy-jellyfish/cal/jun-26-wavy-jellyfish-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/wavy-jellyfish/cal/jun-26-wavy-jellyfish-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/wavy-jellyfish/cal/jun-26-wavy-jellyfish-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/wavy-jellyfish/cal/jun-26-wavy-jellyfish-cal-2560x1440.png">2560x1440</a> </li> <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/wavy-jellyfish/nocal/jun-26-wavy-jellyfish-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/wavy-jellyfish/nocal/jun-26-wavy-jellyfish-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/wavy-jellyfish/nocal/jun-26-wavy-jellyfish-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/wavy-jellyfish/nocal/jun-26-wavy-jellyfish-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/wavy-jellyfish/nocal/jun-26-wavy-jellyfish-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/wavy-jellyfish/nocal/jun-26-wavy-jellyfish-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/wavy-jellyfish/nocal/jun-26-wavy-jellyfish-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/wavy-jellyfish/nocal/jun-26-wavy-jellyfish-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/wavy-jellyfish/nocal/jun-26-wavy-jellyfish-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/wavy-jellyfish/nocal/jun-26-wavy-jellyfish-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/wavy-jellyfish/nocal/jun-26-wavy-jellyfish-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/wavy-jellyfish/nocal/jun-26-wavy-jellyfish-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/wavy-jellyfish/nocal/jun-26-wavy-jellyfish-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/wavy-jellyfish/nocal/jun-26-wavy-jellyfish-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/wavy-jellyfish/nocal/jun-26-wavy-jellyfish-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/wavy-jellyfish/nocal/jun-26-wavy-jellyfish-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/wavy-jellyfish/nocal/jun-26-wavy-jellyfish-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/wavy-jellyfish/nocal/jun-26-wavy-jellyfish-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/wavy-jellyfish/nocal/jun-26-wavy-jellyfish-nocal-2560x1440.png">2560x1440</a> </li> </ul> Buzzing Through June <p>“I first found this color palette and thought it was very springy, and when I think of spring I think of flowers and bees. So I wanted to create a design that incorporated both in a cute way.” — Designed by <a href="https://mu-art.org/carolineflynn/">Caroline Flynn</a> from the United States.</p> <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/buzzing-through-june/jun-26-buzzing-through-june-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2026/jun-26-buzzing-through-june-preview-opt.png"></a> <ul> <li><a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/buzzing-through-june/jun-26-buzzing-through-june-preview.png">preview</a></li> <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/buzzing-through-june/cal/jun-26-buzzing-through-june-cal-320x480.jpg">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/buzzing-through-june/cal/jun-26-buzzing-through-june-cal-640x480.jpg">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/buzzing-through-june/cal/jun-26-buzzing-through-june-cal-800x480.jpg">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/buzzing-through-june/cal/jun-26-buzzing-through-june-cal-800x600.jpg">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/buzzing-through-june/cal/jun-26-buzzing-through-june-cal-1024x768.jpg">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/buzzing-through-june/cal/jun-26-buzzing-through-june-cal-1024x1024.jpg">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/buzzing-through-june/cal/jun-26-buzzing-through-june-cal-1152x864.jpg">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/buzzing-through-june/cal/jun-26-buzzing-through-june-cal-1280x720.jpg">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/buzzing-through-june/cal/jun-26-buzzing-through-june-cal-1280x800.jpg">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/buzzing-through-june/cal/jun-26-buzzing-through-june-cal-1280x960.jpg">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/buzzing-through-june/cal/jun-26-buzzing-through-june-cal-1280x1024.jpg">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/buzzing-through-june/cal/jun-26-buzzing-through-june-cal-1400x1050.jpg">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/buzzing-through-june/cal/jun-26-buzzing-through-june-cal-1440x900.jpg">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/buzzing-through-june/cal/jun-26-buzzing-through-june-cal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/buzzing-through-june/cal/jun-26-buzzing-through-june-cal-1680x1050.jpg">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/buzzing-through-june/cal/jun-26-buzzing-through-june-cal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/buzzing-through-june/cal/jun-26-buzzing-through-june-cal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/buzzing-through-june/cal/jun-26-buzzing-through-june-cal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/buzzing-through-june/cal/jun-26-buzzing-through-june-cal-2560x1440.jpg">2560x1440</a> </li> <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/buzzing-through-june/nocal/jun-26-buzzing-through-june-nocal-320x480.jpg">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/buzzing-through-june/nocal/jun-26-buzzing-through-june-nocal-640x480.jpg">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/buzzing-through-june/nocal/jun-26-buzzing-through-june-nocal-800x480.jpg">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/buzzing-through-june/nocal/jun-26-buzzing-through-june-nocal-800x600.jpg">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/buzzing-through-june/nocal/jun-26-buzzing-through-june-nocal-1024x768.jpg">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/buzzing-through-june/nocal/jun-26-buzzing-through-june-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/buzzing-through-june/nocal/jun-26-buzzing-through-june-nocal-1152x864.jpg">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/buzzing-through-june/nocal/jun-26-buzzing-through-june-nocal-1280x720.jpg">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/buzzing-through-june/nocal/jun-26-buzzing-through-june-nocal-1280x800.jpg">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/buzzing-through-june/nocal/jun-26-buzzing-through-june-nocal-1280x960.jpg">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/buzzing-through-june/nocal/jun-26-buzzing-through-june-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/buzzing-through-june/nocal/jun-26-buzzing-through-june-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/buzzing-through-june/nocal/jun-26-buzzing-through-june-nocal-1440x900.jpg">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/buzzing-through-june/nocal/jun-26-buzzing-through-june-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/buzzing-through-june/nocal/jun-26-buzzing-through-june-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/buzzing-through-june/nocal/jun-26-buzzing-through-june-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/buzzing-through-june/nocal/jun-26-buzzing-through-june-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/buzzing-through-june/nocal/jun-26-buzzing-through-june-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/buzzing-through-june/nocal/jun-26-buzzing-through-june-nocal-2560x1440.jpg">2560x1440</a> </li> </ul> Tiny Paradise Under the Sun <p>“Summer is hidden in the simple moments — the shimmer of crystal water, the warmth of the sun on your skin, and the calm sound of a peaceful afternoon. The warm wooden deck and soft shade of the parasol create a peaceful corner made for daydreaming. Flowers bloom, lemonade stays cold, and the sunlight dances across the pool like a golden melody. It’s the season of relaxation, happiness, and small moments that feel unforgettable.” — Designed by <a href="https://www.popwebdesign.net/index_eng.html">PopArt Studio</a> from Novi Sad, Serbia.</p> <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/jun-26-tiny-paradise-under-the-sun-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2026/jun-26-tiny-paradise-under-the-sun-preview-opt.png"></a> <ul> <li><a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/jun-26-tiny-paradise-under-the-sun-preview.png">preview</a></li> <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/cal/jun-26-tiny-paradise-under-the-sun-cal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/cal/jun-26-tiny-paradise-under-the-sun-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/cal/jun-26-tiny-paradise-under-the-sun-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/cal/jun-26-tiny-paradise-under-the-sun-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/cal/jun-26-tiny-paradise-under-the-sun-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/cal/jun-26-tiny-paradise-under-the-sun-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/cal/jun-26-tiny-paradise-under-the-sun-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/cal/jun-26-tiny-paradise-under-the-sun-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/cal/jun-26-tiny-paradise-under-the-sun-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/cal/jun-26-tiny-paradise-under-the-sun-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/cal/jun-26-tiny-paradise-under-the-sun-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/cal/jun-26-tiny-paradise-under-the-sun-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/cal/jun-26-tiny-paradise-under-the-sun-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/cal/jun-26-tiny-paradise-under-the-sun-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/cal/jun-26-tiny-paradise-under-the-sun-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/cal/jun-26-tiny-paradise-under-the-sun-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/cal/jun-26-tiny-paradise-under-the-sun-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/cal/jun-26-tiny-paradise-under-the-sun-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/cal/jun-26-tiny-paradise-under-the-sun-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/cal/jun-26-tiny-paradise-under-the-sun-cal-2560x1440.png">2560x1440</a> </li> <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/nocal/jun-26-tiny-paradise-under-the-sun-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/nocal/jun-26-tiny-paradise-under-the-sun-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/nocal/jun-26-tiny-paradise-under-the-sun-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/nocal/jun-26-tiny-paradise-under-the-sun-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/nocal/jun-26-tiny-paradise-under-the-sun-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/nocal/jun-26-tiny-paradise-under-the-sun-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/nocal/jun-26-tiny-paradise-under-the-sun-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/nocal/jun-26-tiny-paradise-under-the-sun-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/nocal/jun-26-tiny-paradise-under-the-sun-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/nocal/jun-26-tiny-paradise-under-the-sun-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/nocal/jun-26-tiny-paradise-under-the-sun-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/nocal/jun-26-tiny-paradise-under-the-sun-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/nocal/jun-26-tiny-paradise-under-the-sun-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/nocal/jun-26-tiny-paradise-under-the-sun-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/nocal/jun-26-tiny-paradise-under-the-sun-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/nocal/jun-26-tiny-paradise-under-the-sun-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/nocal/jun-26-tiny-paradise-under-the-sun-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/nocal/jun-26-tiny-paradise-under-the-sun-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/nocal/jun-26-tiny-paradise-under-the-sun-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/tiny-paradise-under-the-sun/nocal/jun-26-tiny-paradise-under-the-sun-nocal-2560x1440.png">2560x1440</a> </li> </ul> Patches Of Flowers <p>“I wanted to make something in Blender, and once I made these flowers I felt like it needed something more, so I added more texture and more colors to make these flowers more peaceful.” — Designed by <a href="https://mu-art.org/carolineflynn/">Caroline Flynn</a> from the United States.</p> <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/patches-of-flowers/jun-26-patches-of-flowers-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2026/jun-26-patches-of-flowers-preview-opt.png"></a> <ul> <li><a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/patches-of-flowers/jun-26-patches-of-flowers-preview.png">preview</a></li> <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/patches-of-flowers/cal/jun-26-patches-of-flowers-cal-320x480.jpg">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/patches-of-flowers/cal/jun-26-patches-of-flowers-cal-800x480.jpg">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/patches-of-flowers/cal/jun-26-patches-of-flowers-cal-800x600.jpg">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/patches-of-flowers/cal/jun-26-patches-of-flowers-cal-1024x768.jpg">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/patches-of-flowers/cal/jun-26-patches-of-flowers-cal-1024x1024.jpg">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/patches-of-flowers/cal/jun-26-patches-of-flowers-cal-1152x864.jpg">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/patches-of-flowers/cal/jun-26-patches-of-flowers-cal-1280x720.jpg">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/patches-of-flowers/cal/jun-26-patches-of-flowers-cal-1280x800.jpg">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/patches-of-flowers/cal/jun-26-patches-of-flowers-cal-1280x960.jpg">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/patches-of-flowers/cal/jun-26-patches-of-flowers-cal-1280x1024.jpg">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/patches-of-flowers/cal/jun-26-patches-of-flowers-cal-1400x1050.jpg">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/patches-of-flowers/cal/jun-26-patches-of-flowers-cal-1440x900.jpg">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/patches-of-flowers/cal/jun-26-patches-of-flowers-cal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/patches-of-flowers/cal/jun-26-patches-of-flowers-cal-1680x1050.jpg">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/patches-of-flowers/cal/jun-26-patches-of-flowers-cal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/patches-of-flowers/cal/jun-26-patches-of-flowers-cal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/patches-of-flowers/cal/jun-26-patches-of-flowers-cal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/patches-of-flowers/cal/jun-26-patches-of-flowers-cal-1920x1440.jpg">1920x1440</a> </li> <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/patches-of-flowers/nocal/jun-26-patches-of-flowers-nocal-320x480.jpg">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/patches-of-flowers/nocal/jun-26-patches-of-flowers-nocal-800x480.jpg">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/patches-of-flowers/nocal/jun-26-patches-of-flowers-nocal-800x600.jpg">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/patches-of-flowers/nocal/jun-26-patches-of-flowers-nocal-1024x768.jpg">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/patches-of-flowers/nocal/jun-26-patches-of-flowers-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/patches-of-flowers/nocal/jun-26-patches-of-flowers-nocal-1152x864.jpg">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/patches-of-flowers/nocal/jun-26-patches-of-flowers-nocal-1280x720.jpg">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/patches-of-flowers/nocal/jun-26-patches-of-flowers-nocal-1280x800.jpg">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/patches-of-flowers/nocal/jun-26-patches-of-flowers-nocal-1280x960.jpg">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/patches-of-flowers/nocal/jun-26-patches-of-flowers-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/patches-of-flowers/nocal/jun-26-patches-of-flowers-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/patches-of-flowers/nocal/jun-26-patches-of-flowers-nocal-1440x900.jpg">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/patches-of-flowers/nocal/jun-26-patches-of-flowers-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/patches-of-flowers/nocal/jun-26-patches-of-flowers-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/patches-of-flowers/nocal/jun-26-patches-of-flowers-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/patches-of-flowers/nocal/jun-26-patches-of-flowers-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/patches-of-flowers/nocal/jun-26-patches-of-flowers-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/patches-of-flowers/nocal/jun-26-patches-of-flowers-nocal-1920x1440.jpg">1920x1440</a> </li> </ul> Amsterdam <p>“Inspired by the upcoming 2027 edition of <a href="https://smashingconf.com/amsterdam-2027">SmashingConf Amsterdam</a>.” — Designed by <a href="https://www.ricklopez.eu/">Ricardo Gimenes</a> from Spain.</p> <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/jun-26-amsterdam-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2026/jun-26-amsterdam-preview-opt.png"></a> <ul> <li><a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/jun-26-amsterdam-preview.png">preview</a></li> <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/cal/jun-26-amsterdam-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/cal/jun-26-amsterdam-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/cal/jun-26-amsterdam-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/cal/jun-26-amsterdam-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/cal/jun-26-amsterdam-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/cal/jun-26-amsterdam-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/cal/jun-26-amsterdam-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/cal/jun-26-amsterdam-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/cal/jun-26-amsterdam-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/cal/jun-26-amsterdam-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/cal/jun-26-amsterdam-cal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/cal/jun-26-amsterdam-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/cal/jun-26-amsterdam-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/cal/jun-26-amsterdam-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/cal/jun-26-amsterdam-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/cal/jun-26-amsterdam-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/cal/jun-26-amsterdam-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/cal/jun-26-amsterdam-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/cal/jun-26-amsterdam-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/cal/jun-26-amsterdam-cal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/cal/jun-26-amsterdam-cal-3840x2160.png">3840x2160</a> </li> <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/nocal/jun-26-amsterdam-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/nocal/jun-26-amsterdam-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/nocal/jun-26-amsterdam-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/nocal/jun-26-amsterdam-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/nocal/jun-26-amsterdam-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/nocal/jun-26-amsterdam-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/nocal/jun-26-amsterdam-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/nocal/jun-26-amsterdam-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/nocal/jun-26-amsterdam-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/nocal/jun-26-amsterdam-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/nocal/jun-26-amsterdam-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/nocal/jun-26-amsterdam-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/nocal/jun-26-amsterdam-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/nocal/jun-26-amsterdam-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/nocal/jun-26-amsterdam-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/nocal/jun-26-amsterdam-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/nocal/jun-26-amsterdam-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/nocal/jun-26-amsterdam-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/nocal/jun-26-amsterdam-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/nocal/jun-26-amsterdam-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/amsterdam/nocal/jun-26-amsterdam-nocal-3840x2160.png">3840x2160</a> </li> </ul> Let Me Grow With You <p>Designed by <a href="https://mu-art.org/jameslucia">James Lucia</a> from Covington Township, Pennsylvania.</p> <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/jun-26-let-me-grow-with-you-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2026/jun-26-let-me-grow-with-you-preview-opt.png"></a> <ul> <li><a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/jun-26-let-me-grow-with-you-preview.png">preview</a></li> <li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/cal/jun-26-let-me-grow-with-you-cal-320x480.jpg">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/cal/jun-26-let-me-grow-with-you-cal-640x480.jpg">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/cal/jun-26-let-me-grow-with-you-cal-800x480.jpg">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/cal/jun-26-let-me-grow-with-you-cal-800x600.jpg">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/cal/jun-26-let-me-grow-with-you-cal-1024x768.jpg">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/cal/jun-26-let-me-grow-with-you-cal-1024x1024.jpg">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/cal/jun-26-let-me-grow-with-you-cal-1152x864.jpg">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/cal/jun-26-let-me-grow-with-you-cal-1280x720.jpg">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/cal/jun-26-let-me-grow-with-you-cal-1280x800.jpg">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/cal/jun-26-let-me-grow-with-you-cal-1280x960.jpg">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/cal/jun-26-let-me-grow-with-you-cal-1280x1024.jpg">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/cal/jun-26-let-me-grow-with-you-cal-1400x1050.jpg">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/cal/jun-26-let-me-grow-with-you-cal-1440x900.jpg">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/cal/jun-26-let-me-grow-with-you-cal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/cal/jun-26-let-me-grow-with-you-cal-1680x1050.jpg">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/cal/jun-26-let-me-grow-with-you-cal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/cal/jun-26-let-me-grow-with-you-cal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/cal/jun-26-let-me-grow-with-you-cal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/cal/jun-26-let-me-grow-with-you-cal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/cal/jun-26-let-me-grow-with-you-cal-2560x1440.jpg">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/cal/jun-26-let-me-grow-with-you-cal-3840x2160.jpg">3840x2160</a> </li> <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/nocal/jun-26-let-me-grow-with-you-nocal-320x480.jpg">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/nocal/jun-26-let-me-grow-with-you-nocal-640x480.jpg">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/nocal/jun-26-let-me-grow-with-you-nocal-800x480.jpg">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/nocal/jun-26-let-me-grow-with-you-nocal-800x600.jpg">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/nocal/jun-26-let-me-grow-with-you-nocal-1024x768.jpg">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/nocal/jun-26-let-me-grow-with-you-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/nocal/jun-26-let-me-grow-with-you-nocal-1152x864.jpg">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/nocal/jun-26-let-me-grow-with-you-nocal-1280x720.jpg">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/nocal/jun-26-let-me-grow-with-you-nocal-1280x800.jpg">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/nocal/jun-26-let-me-grow-with-you-nocal-1280x960.jpg">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/nocal/jun-26-let-me-grow-with-you-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/nocal/jun-26-let-me-grow-with-you-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/nocal/jun-26-let-me-grow-with-you-nocal-1440x900.jpg">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/nocal/jun-26-let-me-grow-with-you-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/nocal/jun-26-let-me-grow-with-you-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/nocal/jun-26-let-me-grow-with-you-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/nocal/jun-26-let-me-grow-with-you-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/nocal/jun-26-let-me-grow-with-you-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/nocal/jun-26-let-me-grow-with-you-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/nocal/jun-26-let-me-grow-with-you-nocal-2560x1440.jpg">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/jun-26/let-me-grow-with-you/nocal/jun-26-let-me-grow-with-you-nocal-3840x2160.jpg">3840x2160</a> </li> </ul> Travel Time <p>“June is our favorite time of the year because the keenly anticipated sunny weather inspires us to travel. Stuck at the airport, waiting for our flight but still excited about wayfaring, we often start dreaming about the new places we are going to visit. Where will you travel to this summer? Wherever you go, we wish you a pleasant journey!” — 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/1fa14b29-e470-4b7d-b73d-1dd94d32bdf8/june-18-travel-time-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d57d2cfe-3f0d-48ac-9c26-df7e43cbd76b/june-18-travel-time-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d57d2cfe-3f0d-48ac-9c26-df7e43cbd76b/june-18-travel-time-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-2560x1440.jpg">2560x1440</a> </li> </ul> June Is For Nature <p>“In this illustration, Earth is planting a little tree — taking care, smiling, doing its part. It’s a reminder that even small acts make a difference. Since World Environment Day falls in June, there’s no better time to give back to the planet.” — Designed by <a href="https://www.gingeritsolutions.com/">Ginger IT Solutions</a> from Serbia.</p> <a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2026/june-25-june-is-for-nature-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2026/june-25-june-is-for-nature-preview-opt.png"></a> <ul> <li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2026/june-25-june-is-for-nature-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1280x1020.png">1280x1020</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-2560x1440.png">2560x1440</a> </li> </ul> Tastes Of June <p>“A vibrant June wallpaper featuring strawberries and fresh oranges, capturing the essence of early summer with bright colors and seasonal charm.” — Designed by <a href="https://www.librafire.com/">Libra Fire</a> from Serbia.</p> <a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2026/june-25-tastes-of-june-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2026/june-25-tastes-of-june-preview-opt.png"></a> <ul> <li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2026/june-25-tastes-of-june-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-2560x1440.png">2560x1440</a> </li> </ul> A Bibliophile’s Shelf <p>“Some of my favorite things to do are reading and listening to music. I know that there are a lot of people that also enjoy these hobbies, so I thought it would be a perfect thing to represent in my wallpaper.” — Designed by Cecelia Otis from the United States.</p> <a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2026/june-25-a-bibliophiles-shelf-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2026/june-25-a-bibliophiles-shelf-preview-opt.png"></a> <ul> <li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2026/june-25-a-bibliophiles-shelf-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-2560x1440.png">2560x1440</a> </li> </ul> Here Comes The Sun <p>Designed by <a href="https://www.ricklopez.eu/">Ricardo Gimenes</a> from Spain.</p> <a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2026/june-25-here-comes-the-sun-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2026/june-25-here-comes-the-sun-preview-opt.png"></a> <ul> <li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2026/june-25-here-comes-the-sun-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-3840x2160.png">3840x2160</a> </li> </ul> Create Your Own Path <p>“Nice weather has arrived! Clean the dust off your bike and explore your hometown from a different angle! Invite a friend or loved one and share the joy of cycling. Whether you decide to go for a city ride or a ride in nature, the time spent on a bicycle will make you feel free and happy. So don’t wait, take your bike and call your loved one because happiness is greater only when it is shared. Happy World Bike Day!” — Designed by <a href="https://www.popwebdesign.net/ux-design.html">PopArt Studio</a> from Serbia.</p> <a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2023/june-22-create-your-own-path-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2023/june-22-create-your-own-path-preview-opt.png"></a> <ul> <li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2023/june-22-create-your-own-path-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-320x480.jpg">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-640x480.jpg">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-800x480.jpg">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-800x600.jpg">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1024x768.jpg">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1152x864.jpg">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1280x720.jpg">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1280x800.jpg">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1280x960.jpg">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1366x768.jpg">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1440x900.jpg">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-2560x1440.jpg">2560x1440</a> </li> </ul> Deep Dive <p>“Summer rains, sunny days, and a whole month to enjoy. Dive deep inside your passions and let them guide you.” — 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/fc6e8288-e0fc-4db9-8193-a75d34cf964b/june-17-deep-dive-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/565f3237-80f3-46a3-b86a-2c62b5be1213/june-17-deep-dive-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/565f3237-80f3-46a3-b86a-2c62b5be1213/june-17-deep-dive-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-2560x1440.png">2560x1440</a> </li> </ul> Oh, The Places You Will Go! <p>“In celebration of high school and college graduates ready to make their way in the world!” — Designed by <a href="https://bloeschcreative.etsy.com/">Bri Loesch</a> from the United States.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/46f6cae6-a2aa-468c-ba2f-ecf40e375055/june-14-oh-the-places-you-will-go-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5f1235cf-2e90-4379-9126-fb1afcc0338c/june-14-oh-the-places-you-will-go-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5f1235cf-2e90-4379-9126-fb1afcc0338c/june-14-oh-the-places-you-will-go-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-14/oh-the-places-you-will-go/nocal/june-14-oh-the-places-you-will-go-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/oh-the-places-you-will-go/nocal/june-14-oh-the-places-you-will-go-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/oh-the-places-you-will-go/nocal/june-14-oh-the-places-you-will-go-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/oh-the-places-you-will-go/nocal/june-14-oh-the-places-you-will-go-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/oh-the-places-you-will-go/nocal/june-14-oh-the-places-you-will-go-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/oh-the-places-you-will-go/nocal/june-14-oh-the-places-you-will-go-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/oh-the-places-you-will-go/nocal/june-14-oh-the-places-you-will-go-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/oh-the-places-you-will-go/nocal/june-14-oh-the-places-you-will-go-nocal-2560x1440.png">2560x1440</a> </li> </ul> Merry-Go-Round <p>Designed by <a href="https://www.behance.com/xenialatii">Xenia Latii</a> from Germany.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6ad15efe-32d0-4a13-9f98-0fbc19ad0e30/june-17-merry-go-round-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3567d518-b622-410d-86d3-9f844cba1cad/june-17-merry-go-round-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3567d518-b622-410d-86d3-9f844cba1cad/june-17-merry-go-round-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-2560x1440.jpg">2560x1440</a> </li> </ul> Join The Wave <p>“The month of warmth and nice weather is finally here. We found inspiration in the World Oceans Day which occurs on June 8th and celebrates the wave of change worldwide. Join the wave and dive in!” — 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/8fa3266b-d36c-49dc-9ff2-324f6087cb0d/june-16-join-the-wave-full.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9405f1a1-e310-4f41-8033-da3d60ad53ac/june-16-join-the-wave-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9405f1a1-e310-4f41-8033-da3d60ad53ac/june-16-join-the-wave-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-2560x1440.jpg">2560x1440</a> </li> </ul> Summer Surf <p>“Summer vibes…” — Designed by <a href="https://www.facebook.com/Hirs-Design-148950788515251/?timeline_context_item_type=intro_card_work&amp;timeline_context_item_source=100002085435433">Antun Hirsman</a> from Croatia.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/718103fa-7136-4f8c-a4d7-9cd1d2866c88/june-18-summer-surf-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/50f03ba5-c76f-497a-8948-934b504c0a9e/june-18-summer-surf-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/50f03ba5-c76f-497a-8948-934b504c0a9e/june-18-summer-surf-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-18/summer-surf/nocal/june-18-summer-surf-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/summer-surf/nocal/june-18-summer-surf-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/summer-surf/nocal/june-18-summer-surf-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/summer-surf/nocal/june-18-summer-surf-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/summer-surf/nocal/june-18-summer-surf-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/summer-surf/nocal/june-18-summer-surf-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/summer-surf/nocal/june-18-summer-surf-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/summer-surf/nocal/june-18-summer-surf-nocal-2650x1440.jpg">2650x1440</a> </li> </ul> Summer Party <p>Designed by <a href="https://www.ricklopez.eu/">Ricardo Gimenes</a> from Spain.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6d0cb175-acd5-400c-b34d-9ffb094261ab/june-21-summer-party-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/db056d09-00a6-4aef-b237-64f081d6aec2/june-21-summer-party-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/db056d09-00a6-4aef-b237-64f081d6aec2/june-21-summer-party-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-2560x1440.png">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-3840x2160.png">3840x2160</a> </li> </ul> Expand Your Horizons <p>“It’s summer! Go out, explore, expand your horizons!” — 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/03f98df0-bf1a-43b1-8058-a4ca522ab709/june-16-expand-your-horizons-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bb46c0af-2c1f-49ab-94f0-79dcd7d32668/june-16-expand-your-horizons-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bb46c0af-2c1f-49ab-94f0-79dcd7d32668/june-16-expand-your-horizons-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-2560x1440.jpg">2560x1440</a> </li> </ul> Handmade Pony Gone Wild <p>“This piece was inspired by the <em>My Little Pony</em> cartoon series. Because those ponies irritated me so much as a kid, I always wanted to create a bad-ass pony.” — Designed by Zaheed Manuel from South Africa.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9ecba7a4-ccdd-4eb3-9795-995efcb317a8/june-14-hand-made-pony-gone-wild-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8c35f3b3-fa61-4192-8b14-3fc8ad37eea9/june-14-hand-made-pony-gone-wild-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8c35f3b3-fa61-4192-8b14-3fc8ad37eea9/june-14-hand-made-pony-gone-wild-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-14/hand-made-pony-gone-wild/nocal/june-14-hand-made-pony-gone-wild-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/hand-made-pony-gone-wild/nocal/june-14-hand-made-pony-gone-wild-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/hand-made-pony-gone-wild/nocal/june-14-hand-made-pony-gone-wild-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/hand-made-pony-gone-wild/nocal/june-14-hand-made-pony-gone-wild-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/hand-made-pony-gone-wild/nocal/june-14-hand-made-pony-gone-wild-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/hand-made-pony-gone-wild/nocal/june-14-hand-made-pony-gone-wild-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/hand-made-pony-gone-wild/nocal/june-14-hand-made-pony-gone-wild-nocal-2560x1440.jpg">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/hand-made-pony-gone-wild/nocal/june-14-hand-made-pony-gone-wild-nocal-2880x1800.jpg">2880x1800</a> </li> </ul> Pineapple Summer Pop <p>“I love creating fun and feminine illustrations and designs. I was inspired by juicy tropical pineapples to celebrate the start of summer.” — Designed by Brooke Glaser from Honolulu, Hawaii.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e2d050c6-791c-4043-af11-3624e87054fe/june-16-pineapple-summer-pop-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/16db22ee-c7f8-47a3-856c-992c82cd61f9/june-16-pineapple-summer-pop-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/16db22ee-c7f8-47a3-856c-992c82cd61f9/june-16-pineapple-summer-pop-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-1152x720.jpg">1152x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-2560x1440.jpg">2560x1440</a> </li> </ul> All-Seeing Eye <p>Designed by <a href="https://www.ricklopez.eu/">Ricardo Gimenes</a> from Spain.</p> <a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-24-all-seeing-eye-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-24-all-seeing-eye-preview-opt.png"></a> <ul> <li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-24-all-seeing-eye-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-3840x2160.png">3840x2160</a> </li> </ul> Nine Lives <p>“I grew up with cats around (and drawing them all the time). They are so funny… one moment they are being funny, the next they are reserved. If you have place in your life for a pet, adopt one today!” — Designed by <a href="https://www.codesign.cc/">Karen Frolo</a> from the United States.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/82f48517-5119-41a9-8073-83773719dd23/june-17-nine-lives-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1c067d70-8504-476c-9730-b1d110917563/june-17-nine-lives-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1c067d70-8504-476c-9730-b1d110917563/june-17-nine-lives-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-17/nine-lives/nocal/june-17-nine-lives-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/nine-lives/nocal/june-17-nine-lives-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/nine-lives/nocal/june-17-nine-lives-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/nine-lives/nocal/june-17-nine-lives-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/nine-lives/nocal/june-17-nine-lives-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/nine-lives/nocal/june-17-nine-lives-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/nine-lives/nocal/june-17-nine-lives-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/nine-lives/nocal/june-17-nine-lives-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/nine-lives/nocal/june-17-nine-lives-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/nine-lives/nocal/june-17-nine-lives-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/nine-lives/nocal/june-17-nine-lives-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/nine-lives/nocal/june-17-nine-lives-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/nine-lives/nocal/june-17-nine-lives-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/nine-lives/nocal/june-17-nine-lives-nocal-2560x1440.jpg">2560x1440</a> </li> </ul> Summer Coziness <p>“I’ve waited for this summer more than I waited for any other summer since I was a kid. I dream of watermelon, strawberries, and lots of colors.” — Designed by Kate Jameson from the United States.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/aa7facf5-395f-44a4-a0da-05a2b1a5bd23/june-20-summer-coziness-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/374464b5-093e-4ca2-9397-6f26c83756d4/june-20-summer-coziness-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/374464b5-093e-4ca2-9397-6f26c83756d4/june-20-summer-coziness-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-20/summer-coziness/nocal/june-20-summer-coziness-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/summer-coziness/nocal/june-20-summer-coziness-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/summer-coziness/nocal/june-20-summer-coziness-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/summer-coziness/nocal/june-20-summer-coziness-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/summer-coziness/nocal/june-20-summer-coziness-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/summer-coziness/nocal/june-20-summer-coziness-nocal-2560x1440.png">2560x1440</a> </li> </ul> Bauhaus <p>“I created a screenprint of one of the most famous buildings from the Bauhaus architect Mies van der Rohe for you. So, enjoy the Barcelona Pavillon for your June wallpaper.” — Designed by <a href="https://glasshousestudio.de/">Anne Korfmacher</a> from Germany.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/008e5306-b83d-4216-9d40-b10a3713b9b9/june-19-its-bauhaus-year-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9046bec0-51bb-4aea-b312-c960e3c5894d/june-19-its-bauhaus-year-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9046bec0-51bb-4aea-b312-c960e3c5894d/june-19-its-bauhaus-year-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-19/its-bauhaus-year/nocal/june-19-its-bauhaus-year-nocal-640x480.jpeg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/its-bauhaus-year/nocal/june-19-its-bauhaus-year-nocal-800x480.jpeg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/its-bauhaus-year/nocal/june-19-its-bauhaus-year-nocal-800x600.jpeg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/its-bauhaus-year/nocal/june-19-its-bauhaus-year-nocal-1024x768.jpeg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/its-bauhaus-year/nocal/june-19-its-bauhaus-year-nocal-1024x1024.jpeg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/its-bauhaus-year/nocal/june-19-its-bauhaus-year-nocal-1152x864.jpeg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/its-bauhaus-year/nocal/june-19-its-bauhaus-year-nocal-1280x800.jpeg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/its-bauhaus-year/nocal/june-19-its-bauhaus-year-nocal-1280x960.jpeg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/its-bauhaus-year/nocal/june-19-its-bauhaus-year-nocal-1280x1024.jpeg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/its-bauhaus-year/nocal/june-19-its-bauhaus-year-nocal-1366x768.jpeg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/its-bauhaus-year/nocal/june-19-its-bauhaus-year-nocal-1400x1050.jpeg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/its-bauhaus-year/nocal/june-19-its-bauhaus-year-nocal-1440x900.jpeg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/its-bauhaus-year/nocal/june-19-its-bauhaus-year-nocal-1600x1200.jpeg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/its-bauhaus-year/nocal/june-19-its-bauhaus-year-nocal-1680x1050.jpeg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/its-bauhaus-year/nocal/june-19-its-bauhaus-year-nocal-1680x1200.jpeg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/its-bauhaus-year/nocal/june-19-its-bauhaus-year-nocal-1920x1080.jpeg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/its-bauhaus-year/nocal/june-19-its-bauhaus-year-nocal-1920x1200.jpeg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/its-bauhaus-year/nocal/june-19-its-bauhaus-year-nocal-1920x1440.jpeg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/its-bauhaus-year/nocal/june-19-its-bauhaus-year-nocal-2560x1440.jpeg">2560x1440</a> </li> </ul> Strawberry Fields <p>Designed by Nathalie Ouederni from France.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d1977205-14df-4712-9049-a03ba427a678/june-15-strawberry-fields-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c5ed64c5-aacb-424d-a996-6b72be2e5339/june-15-strawberry-fields-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c5ed64c5-aacb-424d-a996-6b72be2e5339/june-15-strawberry-fields-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-15/strawberry-fields/nocal/june-15-strawberry-fields-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/strawberry-fields/nocal/june-15-strawberry-fields-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/strawberry-fields/nocal/june-15-strawberry-fields-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/strawberry-fields/nocal/june-15-strawberry-fields-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/strawberry-fields/nocal/june-15-strawberry-fields-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/strawberry-fields/nocal/june-15-strawberry-fields-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/strawberry-fields/nocal/june-15-strawberry-fields-nocal-2560x1440.jpg">2560x1440</a> </li> </ul> Papa Merman <p>“Dream away for a little while to a land where June never ends. Imagine the ocean, feel the joy of a happy and carefree life with a scent of shrimps and a sound of waves all year round. Welcome to the world of Papa Merman!” — Designed by <a href="https://graphicmama.com/">GraphicMama</a> from Bulgaria.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/50515363-d91f-49d8-af03-dcb66b14756d/june-16-papa-merman-full.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d6e1420e-aad2-409b-ad8a-8db0b0a8be25/june-16-papa-merman-preview-opt.png"></a><ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d6e1420e-aad2-409b-ad8a-8db0b0a8be25/june-16-papa-merman-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-16/papa-merman/nocal/june-16-papa-merman-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/papa-merman/nocal/june-16-papa-merman-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/papa-merman/nocal/june-16-papa-merman-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/papa-merman/nocal/june-16-papa-merman-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/papa-merman/nocal/june-16-papa-merman-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/papa-merman/nocal/june-16-papa-merman-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/papa-merman/nocal/june-16-papa-merman-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/papa-merman/nocal/june-16-papa-merman-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/papa-merman/nocal/june-16-papa-merman-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/papa-merman/nocal/june-16-papa-merman-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/papa-merman/nocal/june-16-papa-merman-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/papa-merman/nocal/june-16-papa-merman-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/papa-merman/nocal/june-16-papa-merman-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/papa-merman/nocal/june-16-papa-merman-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/papa-merman/nocal/june-16-papa-merman-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/papa-merman/nocal/june-16-papa-merman-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/papa-merman/nocal/june-16-papa-merman-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/papa-merman/nocal/june-16-papa-merman-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/papa-merman/nocal/june-16-papa-merman-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/papa-merman/nocal/june-16-papa-merman-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/papa-merman/nocal/june-16-papa-merman-nocal-2560x1440.jpg">2560x1440</a> </li> </ul> Solstice Sunset <p>“June 21 marks the longest day of the year for the Northern Hemisphere — and sunsets like these will be getting earlier and earlier after that!” — Designed by <a href="https://www.behance.net/jamesmitchell23">James Mitchell</a> from the United Kingdom.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/492124f6-1b46-441b-a52b-2bbcf4372536/june-17-solstice-sunset-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2c0f6baa-5eda-4741-aa4c-bb92a50c16cb/june-17-solstice-sunset-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2c0f6baa-5eda-4741-aa4c-bb92a50c16cb/june-17-solstice-sunset-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-17/solstice-sunset/nocal/june-17-solstice-sunset-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/solstice-sunset/nocal/june-17-solstice-sunset-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/solstice-sunset/nocal/june-17-solstice-sunset-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/solstice-sunset/nocal/june-17-solstice-sunset-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/solstice-sunset/nocal/june-17-solstice-sunset-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/solstice-sunset/nocal/june-17-solstice-sunset-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/solstice-sunset/nocal/june-17-solstice-sunset-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/solstice-sunset/nocal/june-17-solstice-sunset-nocal-2560x1440.png">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/solstice-sunset/nocal/june-17-solstice-sunset-nocal-2880x1800.png">2880x1800</a> </li> </ul> Getting Better Everyday <p>“Inspired by the eternal forward motion to get better and excel.” — Designed by Zachary Johnson-Medland from the United States.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e64cde11-f306-4d57-b1b6-1d6965a1550e/june-17-getting-better-everyday-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4973fc78-d798-46c8-bb9d-ea639712a70a/june-17-getting-better-everyday-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4973fc78-d798-46c8-bb9d-ea639712a70a/june-17-getting-better-everyday-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-17/getting-better-everyday/nocal/june-17-getting-better-everyday-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/getting-better-everyday/nocal/june-17-getting-better-everyday-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/getting-better-everyday/nocal/june-17-getting-better-everyday-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/getting-better-everyday/nocal/june-17-getting-better-everyday-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/getting-better-everyday/nocal/june-17-getting-better-everyday-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/getting-better-everyday/nocal/june-17-getting-better-everyday-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/getting-better-everyday/nocal/june-17-getting-better-everyday-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/getting-better-everyday/nocal/june-17-getting-better-everyday-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/getting-better-everyday/nocal/june-17-getting-better-everyday-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/getting-better-everyday/nocal/june-17-getting-better-everyday-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/getting-better-everyday/nocal/june-17-getting-better-everyday-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/getting-better-everyday/nocal/june-17-getting-better-everyday-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/getting-better-everyday/nocal/june-17-getting-better-everyday-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/getting-better-everyday/nocal/june-17-getting-better-everyday-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/getting-better-everyday/nocal/june-17-getting-better-everyday-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/getting-better-everyday/nocal/june-17-getting-better-everyday-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/getting-better-everyday/nocal/june-17-getting-better-everyday-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/getting-better-everyday/nocal/june-17-getting-better-everyday-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/getting-better-everyday/nocal/june-17-getting-better-everyday-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/getting-better-everyday/nocal/june-17-getting-better-everyday-nocal-2560x1440.png">2560x1440</a> </li> </ul> Reef Days <p>“June brings the start of summer full of bright colors, happy memories, and traveling. What better way to portray the goodness of summer than through an ocean folk art themed wallpaper. This statement wallpaper gives me feelings of summer and I hope to share that same feeling with others.” — Designed by Taylor Davidson from Kentucky.</p> <a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-21-reef-days-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-21-reef-days-preview-opt.png"></a> <ul> <li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-21-reef-days-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-21/reef-days/nocal/june-21-reef-days-nocal-480x800.png">480x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/reef-days/nocal/june-21-reef-days-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/reef-days/nocal/june-21-reef-days-nocal-1242x2208.png">1242x2208</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/reef-days/nocal/june-21-reef-days-nocal-1280x1024.png">1280x1024</a> </li> </ul> Ice Creams Away! <p>“Summer is taking off with some magical ice cream hot air balloons.” — Designed by <a href="https://www.sashaendoh.com/">Sasha Endoh</a> from Canada.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/269afd2b-4458-4abd-8ebe-c37011f98fbc/jun-13-ice-creams-away-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/544e8fbe-c670-4db5-a842-6243cbf84d9e/jun-13-ice-creams-away-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/544e8fbe-c670-4db5-a842-6243cbf84d9e/jun-13-ice-creams-away-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-13/ice-creams-away!/jun-13-Ice_creams_away-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/ice-creams-away!/jun-13-Ice_creams_away-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/ice-creams-away!/jun-13-Ice_creams_away-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/ice-creams-away!/jun-13-Ice_creams_away-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/ice-creams-away!/jun-13-Ice_creams_away-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/ice-creams-away!/jun-13-Ice_creams_away-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/ice-creams-away!/jun-13-Ice_creams_away-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/ice-creams-away!/jun-13-Ice_creams_away-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/ice-creams-away!/jun-13-Ice_creams_away-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/ice-creams-away!/jun-13-Ice_creams_away-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/ice-creams-away!/jun-13-Ice_creams_away-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/ice-creams-away!/jun-13-Ice_creams_away-nocal-2560x1440.jpg">2560x1440</a> </li> </ul> Melting Away <p>Designed by <a href="https://www.ricklopez.eu/">Ricardo Gimenes</a> from Spain.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/01f70092-8fa6-41c9-a5b0-4d2d441bfd2c/june-19-melting-away-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68c2d3c0-1f39-4edf-a88d-f1869066901d/june-19-melting-away-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68c2d3c0-1f39-4edf-a88d-f1869066901d/june-19-melting-away-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-19/melting-away/nocal/june-19-melting-away-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/melting-away/nocal/june-19-melting-away-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/melting-away/nocal/june-19-melting-away-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/melting-away/nocal/june-19-melting-away-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/melting-away/nocal/june-19-melting-away-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/melting-away/nocal/june-19-melting-away-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/melting-away/nocal/june-19-melting-away-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/melting-away/nocal/june-19-melting-away-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/melting-away/nocal/june-19-melting-away-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/melting-away/nocal/june-19-melting-away-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/melting-away/nocal/june-19-melting-away-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/melting-away/nocal/june-19-melting-away-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/melting-away/nocal/june-19-melting-away-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/melting-away/nocal/june-19-melting-away-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/melting-away/nocal/june-19-melting-away-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/melting-away/nocal/june-19-melting-away-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/melting-away/nocal/june-19-melting-away-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/melting-away/nocal/june-19-melting-away-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/melting-away/nocal/june-19-melting-away-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/melting-away/nocal/june-19-melting-away-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/melting-away/nocal/june-19-melting-away-nocal-2560x1440.png">2560x1440</a> </li> </ul> Sunset With Crabs <p>“In the sunset, the crabs come to the surface. That little boat can’t sail, but after seeing the crabs it gets power and finally… it sails!” - Designed by <a href="https://www.silocreativo.com/en">Veronica Valenzuela</a> from Spain.</p> <a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2026/june-19-sunset-with-crabs-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2026/june-19-sunset-with-crabs-preview-opt.png"></a> <ul> <li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2026/june-19-sunset-with-crabs-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-19/sunset-with-crabs/nocal/june-19-sunset-with-crabs-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/sunset-with-crabs/nocal/june-19-sunset-with-crabs-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/sunset-with-crabs/nocal/june-19-sunset-with-crabs-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/sunset-with-crabs/nocal/june-19-sunset-with-crabs-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/sunset-with-crabs/nocal/june-19-sunset-with-crabs-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/sunset-with-crabs/nocal/june-19-sunset-with-crabs-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/sunset-with-crabs/nocal/june-19-sunset-with-crabs-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/sunset-with-crabs/nocal/june-19-sunset-with-crabs-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/sunset-with-crabs/nocal/june-19-sunset-with-crabs-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-19/sunset-with-crabs/nocal/june-19-sunset-with-crabs-nocal-2560x1440.png">2560x1440</a> </li> </ul> World Environment Day <p>“On June 5th, we celebrate World Environment Day — a moment to pause and reflect on how we impact Earth’s health. A few activities represented in this visual include conserving energy and water, shopping and growing local, planting flowers and trees, and building a sustainable infrastructure.” — Designed by <a href="https://www.madfishdigital.com/">Mad Fish Digital</a> from Portland, OR.</p> <a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2023/june-22-world-environment-day-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2023/june-22-world-environment-day-preview-opt.png"></a> <ul> <li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2023/june-22-world-environment-day-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/world-environment-day/nocal/june-22-world-environment-day-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/world-environment-day/nocal/june-22-world-environment-day-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/world-environment-day/nocal/june-22-world-environment-day-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/world-environment-day/nocal/june-22-world-environment-day-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/world-environment-day/nocal/june-22-world-environment-day-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/world-environment-day/nocal/june-22-world-environment-day-nocal-2560x1440.png">2560x1440</a> </li> </ul> Shine Your Light <p>“Shine your light, Before the fight, Just like the sun, Cause we don’t have to run.” — Designed by <a href="https://www.flickr.com/photos/21602977@N08/">Anh Nguyet Tran</a> from Vietnam.</p> <a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/95adda55-3d7f-4550-a74d-6f2effd18b67/june-15-shine-your-light-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/353db721-b3a2-47f3-8182-1940bdffb086/june-15-shine-your-light-preview-opt.png"></a> <ul> <li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/353db721-b3a2-47f3-8182-1940bdffb086/june-15-shine-your-light-preview-opt.png">preview</a></li> <li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-15/shine-your-light/nocal/june-15-shine-your-light-nocal-768x1280.png">768x1280</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/shine-your-light/nocal/june-15-shine-your-light-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/shine-your-light/nocal/june-15-shine-your-light-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/shine-your-light/nocal/june-15-shine-your-light-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/shine-your-light/nocal/june-15-shine-your-light-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/shine-your-light/nocal/june-15-shine-your-light-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/shine-your-light/nocal/june-15-shine-your-light-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/shine-your-light/nocal/june-15-shine-your-light-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/shine-your-light/nocal/june-15-shine-your-light-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/shine-your-light/nocal/june-15-shine-your-light-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/shine-your-light/nocal/june-15-shine-your-light-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/shine-your-light/nocal/june-15-shine-your-light-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/shine-your-light/nocal/june-15-shine-your-light-nocal-2560x1440.png">2560x1440</a> </li> </ul> Get Featured Next Month <p>Feeling inspired? We’ll publish the <strong>July wallpapers</strong> on June 30, so if you’d like to be part of the collection, please don’t hesitate to <a href="https://www.smashingmagazine.com/desktop-wallpaper-calendars-join-in/"><strong>submit your design</strong></a>. We are already looking forward to it!</p>

<p>The <a href="https://almanac.httparchive.org/">HTTP Archive Web Almanac</a> has been tracking color contrast failures for years. The numbers have barely moved. After half a decade of design system tooling, accessibility linters, and entire JavaScript libraries dedicated to computing readable text colors, <a href="https://almanac.httparchive.org/en/2025/accessibility#color-contrast">70% of websites still fail basic WCAG contrast checks in 2025</a>. The <a href="https://webaim.org/projects/million/">WebAIM Million</a> paints an even grimmer picture — 83.9% of homepages flagged for low contrast text in 2026, up from 79.1% in 2025. The rate improves by maybe a few percentage points per year on one benchmark and actually gets <em>worse</em> on another. That’s not progress — that’s proof that relying on runtime JavaScript for something this fundamental doesn’t scale across the open web. We didn’t need better libraries. We’ve needed better CSS.</p> <p>The <code>contrast-color()</code> function is that better CSS. One declaration. The browser runs the contrast math during style computation, before the page paints, and hands you the right text color. No library, no build step, no hydration flash.</p> <p><strong>Note</strong>: If you’ve seen it called <code>color-contrast()</code> in older articles and spec drafts — <a href="https://github.com/w3c/csswg-drafts/issues/7557">that name was changed</a>, and the old syntax no longer works in any browser.</p> What It Does (And What It Doesn’t) <p>The Level 5 version is simple. You give it a color. It gives you back <code>black</code> or <code>white</code>, whichever has more contrast against your input.</p> <pre><code>.button { background-color: var(--brand-color); color: contrast-color(var(--brand-color)); } </code></pre> <p>Change <code>--brand-color</code> to neon green, text goes black. Change it to midnight navy, text goes white. Swap themes at runtime via JavaScript and the text adapts instantly — no event listeners, no recalculation.</p> <p>A few things to know about the current version:</p> <ul> <li>It returns a <code>&lt;color&gt;</code>, not a number. You get an actual color value (<code>black</code> or <code>white</code>), you can use anywhere CSS accepts a color.</li> <li> <strong>Black or white only</strong>, for now. Candidate color lists and target ratios are planned for Level 6.</li> <li> <strong>No keywords.</strong> If you’ve seen <code>max</code> in older blog posts, that was stripped from the spec. Using it will silently break your declaration.</li> <li>As mentioned above, this function used to be called <code>color-contrast()</code> in early drafts. That name is dead — <a href="https://github.com/w3c/csswg-drafts/issues/7557">the CSSWG renamed it</a> to follow the convention that CSS functions are named for what they return. <code>color-mix()</code> returns a color. <code>contrast-color()</code> returns a color. The old <code>color-contrast()</code> name sounded like it returned a contrast <em>ratio</em> (a number like 4.5), which was misleading. Any tutorial from 2021–2023 showing <code>color-contrast()</code> syntax won’t work in current browsers.</li> </ul> The Spec Split: Level 5 Versus Level 6 <p>This function lives across two specifications. That’s unusual and worth understanding.</p> <p><a href="https://www.w3.org/TR/css-color-5/#contrast-color"><strong>CSS Color Level 5</strong></a> defines what browsers ship today. One color in, black or white out. The algorithm is deliberately marked “UA-defined”, meaning the browser decides what math to use internally. Right now, every engine uses WCAG 2.x relative luminance. But that “UA-defined” label isn’t accidental — it’s a planned escape hatch.</p> <p>You’ll see APCA (<strong>Accessible Perceptual Contrast Algorithm</strong>) mentioned a lot in this context. APCA models how human eyes actually perceive contrast, factoring in font weight, spatial frequency, and ambient light — a genuine improvement over the WCAG 2.x formula. By not locking <em>“use WCAG 2.x”</em> into the Level 5 spec, browser vendors <em>could</em> swap to APCA later without breaking any existing code. If the spec had shipped with a <code>wcag2()</code> keyword as the default, every site using it would’ve been stuck on the old math permanently.</p> <p>But APCA’s future is far less certain than the hype suggests. Adrian Roselli’s “<a href="https://adrianroselli.com/2026/04/wcag3-contrast-as-of-april-2026.html">WCAG3 Contrast as of April 2026</a>” lays out the current situation clearly: APCA was pulled from the WCAG 3 working draft <a href="https://www.w3.org/TR/2023/WD-wcag-3.0-20230724/#color-and-contrast">in mid-2023</a> after failing to gain enough Working Group support. The WCAG 3 spec currently says the contrast algorithm is <em>“yet to be determined,”</em> and the standard itself <a href="https://www.w3.org/WAI/standards-guidelines/wcag/wcag3-intro/#timeline">may not be finalized until 2030 or later</a>. Roselli also <a href="https://issues.chromium.org/issues/341439947">filed a Chromium issue in May 2024</a> asking for the “Advanced Perceptual Contrast Algorithm” experiment flag to be removed from DevTools entirely, arguing that the implementation is outdated and risks misleading developers into thinking APCA is further along — or more official — than it actually is. That issue is still open.</p> <p>None of this means APCA is dead. The research behind it is peer-reviewed and substantive, and its creator <a href="https://adrianroselli.com/2026/04/wcag3-contrast-as-of-april-2026.html#comment-408186">has noted</a> that colors passing APCA guidelines greatly exceed WCAG 2 minimums in the vast majority of cases. But right now, there is no guarantee APCA will be the algorithm that replaces WCAG 2.x — and that uncertainty matters for <code>contrast-color()</code>. If a different algorithm wins out, or if WCAG 3 adopts something entirely new, the “UA-defined” label means browsers can adapt without breaking your code. It also means the Level 6 features — candidate color lists, target ratios, the <code>tbd-fg</code>/<code>tbd-bg</code> keywords — are all designed around an algorithm that may or may not materialize in its current form.</p> <p><strong>CSS Color Level 6</strong> adds the extended syntax — candidate color lists and target contrast ratios:</p> <div> <pre><code>/* Level 6 future syntax — not shipping yet */ color: contrast-color(var(--bg) tbd-bg wcag2(aa), #1a1a2e, #e2e8f0, #fbbf24); </code></pre> </div> <p>The browser would evaluate each candidate left to right and pick the first that meets the 4.5:1 AA threshold. The <code>tbd-fg</code> and <code>tbd-bg</code> keywords indicate whether the base color is foreground or background, which matters for directional contrast models like APCA. This is all Working Draft territory — doubly so given APCA’s uncertain status. Use the Level 5 version for now.</p> Browser Support <p>This one’s in better shape than most new CSS features. All three major engines have shipped it in stable releases: <a href="https://chromestatus.com/feature/40142548">Chrome 147</a> (April 2026), <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/contrast-color">Firefox 146</a>, and <a href="https://developer.apple.com/documentation/safari-release-notes/safari-26-release-notes">Safari 26.0</a>. It reached <a href="https://web.dev/baseline/">Baseline Newly Available</a> status in April 2026. Check <a href="https://caniuse.com/mdn-css_types_color_contrast-color">caniuse</a> for the full version matrix. All three engines pass the Web Platform Tests for <code>contrast-color()</code>, which means the edge cases (e.g., tie-breaking logic, color space conversion, syntax parsing) behave the same across browsers.</p> <p>The raw global support percentage on caniuse looks low, but that mostly reflects enterprise browsers and people who never update. If you’re reading this, your browser almost certainly supports it already.</p> <p>Progressive enhancement is straightforward using <code>@supports</code>:</p> <pre><code>.card { background: var(--bg); color: #fff; text-shadow: 0 0 4px rgb(0 0 0 / 0.8); } @supports (color: contrast-color(red)) { .card { color: contrast-color(var(--bg)); text-shadow: none; } } </code></pre> <p>Older browsers get white text with a dark shadow for legibility. Supporting browsers get the native calculation. Nobody sees broken text.</p> <p>One thing to watch for: automated accessibility scanners (Lighthouse, Axe, etc.) can’t evaluate <code>text-shadow</code>. They only look at the computed <code>color</code> against <code>background-color</code>. So the fallback will still get flagged as a contrast failure in CI/CD pipelines, even if the shadow makes the text perfectly legible to human eyes. If your team runs automated a11y checks, you may need to allowlist that specific rule or add a comment explaining why the flag is a false positive.</p> <blockquote> <strong>A note on PostCSS</strong>:<br><br>There’s a plugin (<a href="https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-contrast-color-function"><code>@csstools/postcss-contrast-color-function</code></a>) that evaluates <code>contrast-color()</code> at build time. It works for static colors like <code>contrast-color(#ff0000)</code>. But the moment you use a custom property — <code>contrast-color(var(--bg))</code> — the plugin can’t help because it has no access to runtime values. If your theming is dynamic (which is the whole point of doing this), skip the polyfill and rely on <code>@supports</code>.</blockquote> The Gotchas <h3>It Doesn’t Guarantee Perceptual or AAA Compliance</h3> <p>This can trip people up: <em>“I used the contrast function, so my site passes accessibility checks now, right?”</em></p> <p>Mathematically? Usually yes. There is a persistent myth that for certain “mid-tone” backgrounds, both black and white fail the standard WCAG 4.5:1 AA ratio. That’s mathematically false. Under the WCAG 2.x relative luminance formula, there is absolutely no background color where both pure black and pure white fail AA. One (or both) will always pass.</p> <p>Take <code>#2277d3</code> (a medium blue). It sits right on a mathematical knife-edge where both black and white actually pass AA (both hit roughly 4.58:1). <code>contrast-color()</code> will hand you whichever has the slight mathematical edge.</p> <p>But here is the actual gotcha: the WCAG 2.x math has known perceptual blind spots. That same <code>#2277d3</code> with black text mathematically passes AA, but to human eyes, it can be incredibly difficult to read. <code>contrast-color()</code> gives you <em>mathematical</em> compliance, which is great for automated audits, but that doesn’t always equal <em>perceptual</em> accessibility. (This is exactly why APCA exists and why the spec was designed to let browsers swap algorithms later.)</p> <p>Furthermore, if you’re aiming for the stricter WCAG AAA standard (7.0:1), a true dead zone <em>does</em> exist. For backgrounds with a luminance between roughly 10% and 30%, neither black nor white will hit 7:1. In those cases, <code>contrast-color()</code> can’t save you — it just hands you the “least bad” failing option.</p> <h3>Transitions Snap, Not Fade</h3> <p>If you’re animating a background from <code>white</code> to <code>black</code> on hover:</p> <pre><code>.btn { background-color: #fff; color: contrast-color(#fff); /* black */ transition: background-color 1s, color 1s; } .btn:hover { background-color: #000; color: contrast-color(#000); /* white */ } </code></pre> <p>The background fades smoothly over one second. But because the Level 5 output is a <a href="https://www.w3.org/TR/css-transitions-1/#discrete">discrete value</a> (black or white), the text color can’t be interpolated. It snaps.</p> <p>And here is the visual gotcha: the snap doesn’t happen halfway through. If you’ve been building themes for a while, you probably have muscle memory from the old Sass days, where we checked if <code>lightness($bg) &gt; 50%</code>. That relied on HSL lightness, where 50% is the geometric midpoint.</p> <p>But WCAG 2.x relative luminance is a non-linear scale. Under the WCAG formula, the mathematical tipping point — where black and white have identical contrast against the background — actually occurs at approximately 18% relative luminance (specifically ~17.9%).</p> <p>Because of that, the visual behavior during a white-to-black fade is heavily skewed. The text doesn’t snap in the middle. It stays black for the vast majority of the animation, only snapping to white at the very tail-end of the transition when the background gets extremely dark. It’s a jarring, late hard cut.</p> <p>You might assume <a href="https://css-tricks.com/almanac/properties/t/transition/transition-behavior/"><code>transition-behavior: allow-discrete</code></a> fixes this. It doesn’t. <code>allow-discrete</code> does not fix the jarring visual experience because it cannot interpolate a binary output; it only shifts the timing of the hard snap to the 50% mark of the animation duration. If you need smooth text color transitions, you’ll have to layer <code>color-mix()</code> or manage the crossfade yourself.</p> <h3>Tie Goes To White</h3> <p>If the background is a perfect middle gray where both black and white produce identical contrast ratios, <a href="https://www.w3.org/TR/css-color-5/#contrast-color">the spec has a hardcoded tiebreaker</a>: white wins. Not a big deal in practice, but worth knowing if you’re debugging gray palettes and the text isn’t doing what you expect.</p> <h3>Gradients And Images Are Out</h3> <p>The function takes a flat <code>&lt;color&gt;</code> value. You can’t pass it a gradient or a <code>url()</code>. <code>contrast-color(linear-gradient(...))</code> is a parse error. If your background is a photo or a complex gradient, you still need JavaScript or manually color-pick for overlay text.</p> <h3>Transparent Colors Are Composited First</h3> <p>Pass a semi-transparent color, and the browser blends it against an assumed opaque canvas (usually white) before running the contrast math. It’s not ignoring your alpha channel — it’s compositing it. But the result might surprise you if you expected the function to “see through” to whatever’s actually behind the element.</p> <h3>Windows High Contrast Mode</h3> <p>If a user enables Windows High Contrast, the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors"><code>forced-colors: active</code></a> media query kicks in and the browser aggressively overwrites author-defined colors. <code>contrast-color()</code> bows out — <a href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-mode">forced system colors</a> like <code>CanvasText</code> take over completely. You don’t need to write manual media queries to undo your contrast logic; the browser handles the hierarchy.</p> Combining It With Other Color Functions <p>Black or white sounds limiting, but once you feed that output into other CSS color functions, you can build an entire component palette off a single custom property.</p> <h3>Brand-Tinted Contrast With Relative Color Syntax</h3> <p>Pure black text on a vibrant card looks fine. Pure white on a coral card can feel flat. What if the contrast text was a very dark or very light <em>tint</em> of the background color instead?</p> <p>Kevin Hamer explored related territory in his CSS-Tricks piece “<a href="https://css-tricks.com/approximating-contrast-color-with-other-css-features/">Approximating contrast-color() With Other CSS Features</a>”, where he used OKLCH lightness and <code>round()</code> to approximate the black/white switch <em>without</em> <code>contrast-color()</code> — essentially <code>oklch(from &lt;color&gt; round(1.21 - l) 0 0)</code>. That’s a polyfill strategy: get the binary light/dark decision working in browsers that don’t support the native function yet. What we’re doing here is different — we <em>start</em> with <code>contrast-color()</code>’s native output and then enrich it by injecting the background’s own hue:</p> <pre><code>.card { --bg-hue: 260; /* Indigo */ --bg: oklch(0.6 0.1 var(--bg-hue)); background: var(--bg); /* Pull L from the black/white contrast color, but inject subtle chroma and the background's hue */ color: oklch(from contrast-color(var(--bg)) l 0.05 var(--bg-hue)); } </code></pre> <p>When <code>contrast-color()</code> returns white, <code>l</code> is 1 (full lightness). When it returns black, <code>l</code> is 0. By pulling the background’s hue back in and adding a touch of chroma, you get text that reads as a deep dark indigo or a pale icy indigo instead of generic black/white. Hamer’s approach gives you the black/white decision without browser support; this one takes the decision the browser already made and gives it personality.</p> <p><strong>Fair warning</strong>: By tweaking the lightness and chroma of the black/white output, you can push a borderline contrast ratio into failing territory. Always run your tinted output through an accessibility linter before shipping.</p> <p><strong>Also worth noting</strong>: This example chains two very modern features — <code>contrast-color()</code> and <code>oklch(from ...)</code>. If either one isn’t supported, the entire declaration fails silently. Your <code>@supports</code> block needs to test for both:</p> <div> <pre><code>@supports (color: contrast-color(red)) and (color: oklch(from red l c h)) { /* Safe to use both */ } </code></pre> </div> <h3>Softened Contrast With <code>color-mix()</code> </h3> <p>Similar idea, simpler API. Mix the sharp black/white output back into the background to soften it:</p> <div> <pre><code>.alert { --bg: var(--alert-color); background: var(--bg); /* 80% contrast, 20% background = softer but readable */ color: color-mix(in oklch, contrast-color(var(--bg)) 80%, var(--bg)); /* 40% contrast for a subtle border */ border: 1px solid color-mix(in oklch, contrast-color(var(--bg)) 40%, var(--bg)); } </code></pre> </div> <p>One custom property driving text, border, and potentially <code>box-shadow</code> or <code>outline</code>. Change <code>--alert-color</code> and the entire component recalculates.</p> <p>This pattern also works well for <code>::placeholder</code> text, which is a common pain point in dynamic theming. Placeholder text should be readable but visually softer than the input’s main text — <code>color-mix()</code> with <code>contrast-color()</code> gets you there:</p> <div> <pre><code>input { --bg: var(--input-bg); background: var(--bg); color: contrast-color(var(--bg)); } input::placeholder { color: color-mix(in oklch, contrast-color(var(--bg)) 50%, var(--bg)); } </code></pre> </div> <p><code>50%</code> mix gives you a muted but legible placeholder that adapts automatically to whatever background the input sits on.</p> <h3>Theme-Aware Contrast With <code>light-dark()</code> </h3> <p>For apps that support system light/dark mode:</p> <pre><code>:root { color-scheme: light dark; --surface: light-dark(#fff, #121212); } .component { background: var(--surface); color: contrast-color(var(--surface)); } </code></pre> <p>When the operating system switches to dark mode, <code>--surface</code> resolves to <code>#121212</code>, and <code>contrast-color()</code> returns white. No media queries, no JavaScript theme detection. The whole chain resolves natively.</p> What You Can Remove From Your Bundle <p>The practical payoff: every one of these libraries existed because CSS couldn’t do contrast math. If you’re only using them for readable-text-color selection, you can pull them out of your runtime entirely:</p> <table> <thead><tr> <th>Library</th> <th>Size</th> <th>What it did</th> </tr></thead> <tbody> <tr> <td>chroma-js</td> <td>~14 kB</td> <td>Color parsing, luminance calc, readable color selection</td> </tr> <tr> <td>polished</td> <td>~11 kB</td> <td> <code>readableColor()</code> for styled-components</td> </tr> <tr> <td>tinycolor2</td> <td>~5 kB</td> <td>Hex parsing, WCAG contrast ratio math</td> </tr> </tbody> </table> <p>You might still need these for generating complex color scales, but the contrast-for-readability use case is now covered natively.</p> <p>Beyond bundle size, there’s a performance angle that’s easy to overlook. Those JavaScript libraries don’t just cost you network bytes — they run on the main thread. Every time a theme changes or a component mounts with a dynamic background, your JS has to parse the color, compute luminance, decide black or white, and write the result back to the DOM. That’s main-thread work competing with layout, event handlers, and everything else your app is doing. <code>contrast-color()</code> moves all of that into the browser’s native style computation phase — heavily optimized C++ that runs before paint. For apps with lots of themed components, that’s a real difference in responsiveness.</p> <p>There’s also a subtle bug that goes away: <strong>hydration flash</strong>. In React or Vue SSR apps, the server renders HTML without JavaScript. The client then hydrates, running JS to calculate contrast and inject the correct text color. For a brief window between initial paint and hydration, the text is either invisible or the wrong color. Moving contrast into CSS eliminates that entirely — the browser resolves the correct color during the initial paint, before JavaScript loads.</p> What We Used To Do <p>For context on what this replaces:</p> <p><strong>Sass era.</strong> You’d write a function that checked <code>lightness($bg) &gt; 50%</code> and returned black or white at compile time. Worked for static themes. Completely useless for user-picked colors, CMS palettes, or dark mode, because the output was baked into the CSS file and could never change at runtime.</p> <p><strong>The variable toggle hack.</strong> When CSS custom properties shipped, people got creative. GitHub used a version of this for their issue label picker — splitting colors into <code>--r</code>, <code>--g</code>, <code>--b</code> channels, calculating Rec.709 luminance inside <code>calc()</code>, multiplying by negative infinity, and clamping to <code>0</code> or <code>1</code>. It worked. It was also unreadable, unmaintainable, and would break silently if you got one parenthesis wrong. (Kevin Hamer’s <a href="https://css-tricks.com/approximating-contrast-color-with-other-css-features/">OKLCH-based approximation</a> is the most elegant version of this lineage — cleaner math, better perceptual alignment — but it’s still a workaround for a function that now ships natively.)</p> <p><code>contrast-color()</code> replaces all of these approaches with a single function call. And because the spec lets browsers upgrade the underlying algorithm, your code won’t need to change if and when a successor to WCAG 2.x contrast math lands — whether that’s APCA or something else entirely.</p> <p></p> <hr> <br><br><p></p> <p>That <a href="https://almanac.httparchive.org/en/2025/accessibility#color-contrast">70% failure rate</a> was never about developers refusing to care about contrast. It was about the distance between caring and shipping — the library, the build step, the runtime calculation, the hydration flash, the one component someone forgot to wire up. Every gap in that chain was a spot where accessibility quietly dropped out.</p> <p><code>contrast-color()</code> doesn’t make developers care more. It makes caring cost nothing.</p>

<p>This article is a sponsored by <a href="https://www.protopie.io/?utm_source=smashingmagazine&amp;utm_medium=referral&amp;utm_campaign=fintech_prototyping_tutorial">ProtoPie</a></p> <p>There’s a moment in almost every usability session where a participant pauses at the login screen, types something, and glances up: checking whether they’re “doing it right.” That pause is a clear sign. They’ve already clocked that this isn’t a real app, and every data point collected after that moment is filtered through that awareness.</p> <p>In financial product testing, the problem is sharper. Finance users are trained to notice when something feels off: a balance that doesn’t add up, a field that accepts anything. When a banking prototype skips real authentication, participants don’t just disengage; they stop mid-session to flag it. The team walks away with findings that reflect how users behave in a demonstration, not in a real product.</p> <p>The fix is narrower than you’d think. Identify the moment where participant trust is established and make that interaction real. In a banking app, that moment is the login.</p> <p>This tutorial builds it: credentials that validate, a live error state, and a biometric animation that feels native — no code required.</p> What We’re Building: A Login That Behaves Like A Shipped Product <p>The login flow, built around Pie Bank, a mobile banking prototype, includes functional text inputs, a masked password field, credential validation, a live error state, and a Face ID animation timed to feel indistinguishable from iOS.</p> <p>What you’ll need:</p> <ul> <li>A login UI from Figma (or any supported design tool)</li> <li> <a href="https://www.protopie.io/download">ProtoPie Studio</a> — <strong>free to start</strong>, everything in this tutorial works on the free plan</li> <li>A Lottie file for the Face ID animation (<a href="https://lottiefiles.com/free-animation/face-id-ios-checkmark-ui-animation-SAEU0Y3XHU">this one</a> is what we used)</li> <li>The <a href="https://demo.protopie.cloud/p/606d44ace6d7ea8f41cf38ff">finished Pie Bank prototype file</a> — download it to follow alongside, or use it as a reference after you build</li> </ul> <img src="https://files.smashing.media/articles/prototype-users-fix-protopie/Intro_fintech-tutorial-login-usecases-preview.gif"> Step 1: Import From Figma Choose Scene, Not Flattened <p>In Figma, open the ProtoPie plugin with your login frame selected and choose <strong>Scene</strong> when exporting. Flattened collapses everything into a single image; Scene preserves your layer hierarchy so every element arrives in ProtoPie as a separate, targetable layer.</p> <p>Before moving on: rename every layer meaningfully. “Input Username” not “Rectangle 14”. You’ll reference these names in formulas: vague names compound into real time lost.</p> <img src="https://files.smashing.media/articles/prototype-users-fix-protopie/Step%201_fintech-tutorial-design-import.gif"> Step 2: Swap Static Fields For Inputs That Actually Accept Text <p>ProtoPie’s native <strong>Input</strong> layer accepts real keyboard entry: participants type actual text, not tap a placeholder. Go to <code>Text</code>  → <code>Input</code>, drag an Input layer onto your canvas, and nest it inside your username field group. Match it visually: placeholder text <strong>Username</strong>, background fill and font to match your design.</p> <p>Hit preview. Click the field. Type. That’s the prototype starting to behave like an app rather than depicting one.</p> <p>Rename this layer <strong>Input Username</strong>, duplicate it, and nest the copy inside your password field group.</p> Step 3: One Property Change Masks The Password <p>On the duplicated layer, change placeholder text to <strong>Password</strong> and set <strong>Type</strong> to <strong>Text Password</strong>. ProtoPie handles the masking: no custom logic needed.</p> <p>Preview both fields: username shows text, password shows dots. It already feels real, and you haven’t written a single condition.</p> <p><img src="https://files.smashing.media/articles/prototype-users-fix-protopie/Step%203_fintech-tutorial-password.png"></p> Step 4: Build The Destination Scene Before Wiring Navigation <p>Add a new scene, even a blank one. The most common sequencing mistake in ProtoPie is trying to wire a navigation response before a destination exists. Create it first.</p> Step 5: Wire The Button: It Works, But It Still Lets Everyone Through <p>Select <strong>Log In</strong>, add a <strong>Tap</strong> trigger, set response to <strong>Jump</strong>, target your dashboard scene, transition <strong>Slide in from right to left</strong>.</p> <p>Preview and tap. It navigates: but for any input, including nothing. The prototype is still lying. The next two steps are the fix.</p> <img src="https://files.smashing.media/articles/prototype-users-fix-protopie/Step%205_fintech-tutorial-login-button.gif"> Step 6: Add Variables So The Prototype Remembers What Was Typed <p>At the bottom-left of ProtoPie, add two <strong>Text</strong> type variables: <code>username</code> and <code>password</code>. Bind each to its input layer with a formula:</p> <pre><code>input("Input Username").text input("Input Password").text </code></pre> <p>Enable the debug icons: green overlays will show live variable values as you type. When you see your keystrokes appear in real time, the binding is confirmed.</p> <p><img src="https://files.smashing.media/articles/prototype-users-fix-protopie/Step%206_fintech-tutorial_varibales.png"></p> Step 7: Add A Condition So Only Valid Credentials Get Through <p>Go back to the <strong>Tap</strong> trigger on the login button. Add a <strong>Condition</strong> with two rules, both must be true:</p> <ul> <li> <code>username</code> equals <a href="mailto:%60alex.c@gmail.com">`alex.c@gmail.com</a>`</li> <li> <code>password</code> equals <code>ABC123</code> </li> </ul> <p>Move the <strong>Jump</strong> response inside this condition. Wrong credentials, empty fields, wrong format: none get through. Participants now have to actually log in. That single constraint changes the texture of every test session that follows.</p> <img src="https://files.smashing.media/articles/prototype-users-fix-protopie/Step%207_fintech-tutorial-condition.gif"> Step 8: Build The Error State, The Interaction Most Prototypes Skip <p>Find your error message layer, rename it <strong>Error Text</strong>, set initial opacity to <strong>0</strong>. Add a second condition (the inverse of the first), and inside it, a <strong>Change Property</strong> response setting <strong>Error Text</strong> opacity to <strong>100</strong>.</p> <p>Wrong credentials: error appears. Correct credentials: dashboard. Two outcomes: which is what makes this testable, not just demonstrable.</p> Step 9: Add the Face ID Animation, The Detail That Makes Testers Ask “Is This Real” <p>Go to <strong>Media</strong>, drag a <strong>Lottie</strong> layer onto canvas, load your Face ID file, and position it off-screen above the iPhone frame. On your <strong>Login with Face ID</strong> button, add a <strong>Tap</strong> trigger (rename it <strong>Tap Face ID</strong>) with four responses in sequence:</p> <ul> <li> <strong>Move</strong>: Lottie container to <code>Y: 60</code> </li> <li> <strong>Playback</strong>: Seek: time <code>0s</code> (resets so it always plays from the start)</li> <li> <strong>Playback: Play</strong>: Lottie file</li> <li> <strong>Jump</strong>: to dashboard</li> </ul> Step 10: Stagger The Timing, This Is What Makes It Feel Native <p>Without delays, all four responses fire at once and the scene jumps before the animation plays. Add offsets:</p> <table> <thead><tr> <th>Response</th> <th>Delay</th> </tr></thead> <tbody> <tr> <td>Move</td> <td>0s</td> </tr> <tr> <td>Seek</td> <td>0s</td> </tr> <tr> <td>Play</td> <td>0.5s</td> </tr> <tr> <td>Jump</td> <td>1s</td> </tr> </tbody> </table> <p>Enable <strong>Reset selected scenes</strong> on Jump: without it, navigating back leaves the animation stuck at <code>Y: 60</code>.</p> <p>Preview: tap Face ID, animation drops in, plays, screen transitions. A biometric login indistinguishable from the real thing.</p> <img src="https://files.smashing.media/articles/prototype-users-fix-protopie/Step%2010_fintech-tutorial-faceID.gif">You can download <a href="https://demo.protopie.cloud/p/606d44ace6d7ea8f41cf38ff">Pie Bank, Chapter 1: Login Flow</a> and explore it freely. A Login This Real Changes What You Can Learn From Your Prototype <p>When authentication actually works, the error state becomes a genuine research touchpoint: do users understand the message, do they retry, do they reach for Face ID instead? These are questions a faked login can’t answer.</p> <p>In stakeholder reviews, the flow speaks for itself. In engineering handoff, the interaction panel documents the behavior (conditional logic, variable bindings, timing) so engineers see intent, not interpretation.</p> <p>This is why FinTech teams invest in login fidelity even when the login isn’t the feature being tested. It’s where participant trust is established. Get it right, and everything downstream produces better signal.</p> <hr> <p><em>This tutorial is part of the <a href="https://www.protopie.io/blog/fintech-prototyping-with-protopie">FinTech Prototyping with ProtoPie</a> series on the ProtoPie blog. The series builds Pie Bank from the ground up across four chapters, covering the dashboard, money transfer logic, and camera integration. If this tutorial was useful, the rest of the series goes further.</em></p>

<p>Many companies think they know fairly well what their users want and need, and how they make their decisions. Yet most of the time these are merely big assumptions and big hunches — with little real evidence to support them. In practice, <strong>obvious reasons</strong> might be true, but they rarely paint the full picture.</p> <p>To understand our customers, we must triangulate across <a href="https://www.linkedin.com/posts/hannahshamji_8-months-ago-i-posted-an-original-framework-share-7307469501229420544-t19q/">four levels of customer understanding</a> by Hannah Shamji. It’s a useful way to think about the <strong>underlying reasons</strong> for user behavior, hidden motivations, and the complex layers of messy and noisy reality that are often overlooked. Let’s see how it works.</p> <p><img src="https://files.smashing.media/articles/four-levels-customer-understanding/1-four-levels-customer-understanding.jpg"></p> Don’t Ask Users Your Burning Questions <p>To learn about customers, it might seem reasonable to <strong>ask people</strong> what they think and draw conclusions from it. But it’s <a href="https://www.linkedin.com/pulse/research-questions-interview-erika-hall/">rarely an effective way</a> to get actionable answers. In fact, as it turns out, what people <em>think</em>, <em>feel</em>, <em>say</em>, and _do_ are often <a href="https://uxdesign.cc/dont-ask-users-your-burning-questions-34abedd92a0?sk=v2%2F8aba2177-2a6a-49f9-b9f7-6b173f2b92f8">very different things</a>.</p> <p><img src="https://files.smashing.media/articles/four-levels-customer-understanding/2-reasons-people-cancel-subscriptions.jpeg"></p> <p>As Erika Hall <a href="https://medium.com/mule-design/on-surveys-5a73dda5e9a0">wrote</a>, asking a question directly is the <strong>worst way</strong> to get a true and useful answer to that question. We don’t always understand or are aware of our <strong>true motivations</strong>. We often apply our own context and interpretations to questions.</p> <p>We also exaggerate (<em>a lot!</em>). We focus on <strong>edge cases</strong> and unrealistic scenarios, and we favor <strong>short-term goals</strong> over long-term goals. So if users say that they absolutely need to <em>compare products in a table</em>, it doesn’t mean that they couldn’t get to their underlying goal <a href="https://www.productchart.com/monitors/">without it</a>.</p> “Possible” vs. “Probable” <p>Just to indicate how tricky listening to <em>words</em> alone is: even little <strong>nuances in words chosen</strong> matter. In practice, users are rarely precise in expressing their thoughts, and a good example is the distinction between <em>possible</em>, <em>plausible</em>, and <em>probable</em>, as <a href="https://www.linkedin.com/feed/update/urn:li:activity:7447580258918100992/">discovered by Thomas D'hooge</a>.</p> <p><img src="https://files.smashing.media/articles/four-levels-customer-understanding/3-numerical-interpretation-various-probability-phrases.jpeg"></p> <p>A <a href="https://jcom.sissa.it/article/pubid/JCOM_1902_2020_A03/">study on Dutch verbal probability terms</a> shows how unreliable the choice of words is. While extreme words have some agreement, terms like “possible,” “maybe,” “uncertain,” or “likely” lead to a wide spread of <strong>interpretations</strong>. So we shouldn’t rely on what people say, but rather try to go deeper.</p> The Levels Of Understanding <p>To get a <strong>more realistic and less biased</strong> view of customers’ needs, we need to understand a broader picture across 4 levels:</p> <p><img src="https://files.smashing.media/articles/four-levels-customer-understanding/4-four-levels-customer-understanding.jpeg"></p> <ul> <li> <strong>Level 1: “What they say”</strong><br>Easier to collect, but mostly opinions, and most unreliable. People often explain their behavior through the lens of how they <em>perceive</em> it, or how they <em>want it to be perceived</em>, which isn’t always accurate. We shouldn’t rely too much on CRM data, surveys, or polls.</li> <li> <strong>Level 2: “What they think and feel”</strong><br>Gives more context, but is still heavily shaped by memory and personal preferences. Good user research and interviews help us understand expectations and experiences.</li> <li> <strong>Level 3: “What they do”</strong><br>We study actual behavior, actions taken or skipped, usage data, and analytics. We run <a href="https://www.linkedin.com/pulse/breaking-down-complexity-task-analysis-ux-vitaly-friedman-sjt4f/">task analysis and workflow analysis</a> to understand how people use the product.</li> <li> <strong>Level 4: “Why they do it”</strong><br>We study <strong>underlying motivations</strong> and root causes, through observations of real workflows and in-depth interviews. Typically, it requires a trustworthy relationship with the user, repeat interviews, and task walkthroughs.</li> </ul> <p>Personally, I wouldn’t recommend <a href="https://www.linkedin.com/posts/vitalyfriedman_ux-design-metrics-share-7072585934147371008-XWXu">NPS</a> (<a href="https://www.linkedin.com/posts/vitalyfriedman_measure-ux-in-b2b-an-alternative-to-nps-share-7396872383355256833-eZQQ">alternative</a>). It’s worth noting that different levels might reveal conflicting or contradictory data. To get a better understanding, we need to <a href="https://www.linkedin.com/posts/vitalyfriedman_how-to-resolve-conflicting-data-and-ux-share-7340729861457534979-enqH">triangulate and reconcile data</a> with mixed-method research.</p> Capturing Emotions And Nuance <p>Emotions are always difficult to capture, but they are easier to spot once you observe people doing what they need to do <strong>without external influence</strong> or interruptions. The ability to positively impact users grows by moving <a href="https://www.nngroup.com/articles/sympathy-vs-empathy-ux/">from sympathy to empathy</a> or even compassion, as articulated by Sarah Gibbons.</p> <p><img src="https://files.smashing.media/articles/four-levels-customer-understanding/5-spectrum-empathy.png"></p> <p>In the past, I was using <em>“speak-aloud” protocol</em> and asked users to walk me through their thought process as they were completing tasks. But it actually turns out to be quite disruptive. Because people are focused on speaking at the same time while solving a task, many <strong>emotions remain hidden</strong> or obscured by their language.</p> <p>So, when conducting usability testing, <strong>I don’t ask users to speak</strong> through their experience. Instead, I observe where they tap or hover with the mouse, where their mouse circles without an action, where they scroll, and how long. Eventually, when a user confirms that they are done or that they are stuck, I ask questions.</p> <p><img src="https://files.smashing.media/articles/four-levels-customer-understanding/6-circular-chart-emotions.jpeg"></p> <p>The <a href="https://uca.edu/bewell/files/2020/11/Feelings-Wheel-Learn-How-to-Label-Your-Feelings.pdf">Emotion Wheel</a> (<a href="https://feelingswheel.com/">website</a>) by Geoffrey Roberts is a helpful little tool for better describing a range of emotions during user interviews or design sessions. It certainly needs refinement for <strong>product design needs</strong>, but it helps us get more precise about <strong>the sentiment</strong> customers or colleagues might be experiencing, moving beyond just “good” or “bad”.</p> <p>One helpful trick is to use <strong>mirroring</strong> — repeating what a user has said, or ask the same question twice, just paraphrasing it. Or navigating the emotions wheel (see above) to better capture and understand the emotion.</p> <p>These strategies help uncover some of the issues that perhaps didn’t come up in the first answer. That’s also when a user tends to add more useful context and details as they explain their confusion.</p> Emotions Aren’t Everything <p>Some people <a href="https://alinbuda.com/my-case-against-empathy/">strongly disagree</a>:</p> <blockquote>“Our work is about others — their problems, their pain, their mess. Our job is to make sense of it and then do something about it. Not to emote or perform but to act on and solve it. There is a <strong>flawed belief</strong> that to build great things, you first need to emotionally fully absorb someone else’s experience.”<br><br>— Alin Buda</blockquote> <p><img src="https://files.smashing.media/articles/four-levels-customer-understanding/7-diagram-categorizing-potential-harms-solutions.jpeg"></p> <p>I think that Alin brings up a very strong argument, and personally, I find it difficult to disagree with. However, I do see user’s emotional response as a <strong>signal</strong> of how well the product is working for them. How engaged or detached they are in their journey, how they react to <a href="https://www.chrbutler.com/the-art-secret-behind-all-great-design">aesthetics</a>, how confused or confident they are.</p> <p>Ultimately, these are signals. To make a difference, we must go <strong>beyond emotions</strong> and explore what people actually do. Usually, this means relentlessly observing, diagnosing, and focusing on underlying user needs.</p> Observe And Diagnose, Don’t Validate <p>Instead of asking, we need to <strong>observe</strong>. Usually, I focus on small things that make or break an experience. I see where users <strong>lose time</strong>, repeat actions, hover without clicking, or click and then go back. Pay attention to subtle cues like scratching their neck, raising eyebrows, or expressions of worry, joy, or confusion.</p> <p>Many companies talk about “validation” through user testing, but often that means simply confirming existing assumptions. But we should instead <strong>diagnose existing behavior</strong> without preconceived notions or affiliations. We don’t validate — we actually research instead.</p> <p><img src="https://files.smashing.media/articles/four-levels-customer-understanding/8-words-instead-validate.jpg"></p> <p>That research means not just understanding <strong>customers’ real motivations</strong>, but also risks, doubts, concerns, worries, and perhaps even <a href="https://www.linkedin.com/posts/indiyoung_uxresearch-designresearch-inclusivedesign-share-7047371089408081920-qEsG/">harms</a>.</p> <p>The only way to get there is by building a sincere, honest, and <strong>trustworthy relationship</strong> — one that feels right and resonates deeply. When customers truly care and want to help, getting to a real understanding becomes much, much easier.</p> Practical Ways To Uncover User Needs <p>We don’t need expensive tools to uncover user needs. David Travis provides a <a href="https://medium.com/@userfocus/60-ways-to-understand-user-needs-that-arent-focus-groups-or-surveys-8510e13b3408">fantastic overview</a> of helpful strategies to do just that. Here are some initiatives to spread the word about real user’s struggles or gain a <strong>deeper understanding</strong> of user needs:</p> <ul> <li> <strong>Exposure hours</strong>, when every employee must be <a href="https://archive.uie.com/brainsparks/2011/12/19/exposure-hours-drive-ux-innovation/">exposed to their customers</a> for at least 2 hours every 6–12 weeks.</li> <li> <strong>Live UX testing</strong>, where we invite everyone in the company to join and observe.</li> <li> <strong>Co-design with users</strong>, where we show new features and ask users to rank them.</li> <li> <strong>Helpdesk insights</strong>, where we ask for frequent complaints and questions from the support every 3–6 months.</li> <li> <strong>Listening in</strong>, where we tune in on a customer service call, web chat, or eavesdrop where users hang out.</li> </ul> <p>The core idea here is that you don’t need extensive and expensive tools to uncover user needs. You need to create spaces where <strong>customers’ struggles can be exposed</strong> and make these struggles visible across the entire company.</p> <p>It can be <strong>short video clips</strong> of user sessions or a monthly newsletter with what we learned this month. Making these pain points visible can rally everyone from marketing to engineering to keep users’ struggles at the back of their minds.</p> Wrapping Up <p>To make an impact, we must go way <strong>beyond user feedback</strong>. It’s never enough to listen to surveys — we must <strong>observe customers’ actual behaviors</strong> and build relationships to truly understand their goals and their motivations.</p> <p>And most importantly, we need to understand <strong>what questions</strong> we actually want to have answered. Not what “validation” we need to move on with the project, but what we don’t know and what we need to <strong>research</strong>.</p> <p>Without it, everything else is merely hunches and assumptions — and often wrong and expensive ones.</p> Meet “Measure UX &amp; Design Impact” <p>Meet <a href="https://measure-ux.com/"><strong>Measure UX &amp; Design Impact</strong></a>, Vitaly’s practical guide <strong>for designers and UX leads</strong> on how to track and visualize the incredible <strong>impact</strong> of your UX work on business — with a <a href="https://smashingconf.com/online-workshops/workshops/vitaly-friedman-impact-design/">live UX training</a> later this year. <a href="https://measure-ux.com/">Jump to 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>Meet <a href="https://measure-ux.com/">Measure UX and Design Impact</a>, a practical video course for designers and UX leads. <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$ 350.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/3570306?price_id=4503439">UX Bundle with 3 video courses.</a></p> </div> </div></div> Useful Resources <ul> <li> <a href="https://www.linkedin.com/posts/hannahshamji_8-months-ago-i-posted-an-original-framework-share-7307469501229420544-t19q/">Four Levels of Customer Understanding</a>, by Hannah Shamji</li> <li> <a href="https://medium.com/@userfocus/60-ways-to-understand-user-needs-that-arent-focus-groups-or-surveys-8510e13b3408">60 Ways To Understand User Needs</a>, by David Travis</li> <li> <a href="https://uca.edu/bewell/files/2020/11/Feelings-Wheel-Learn-How-to-Label-Your-Feelings.pdf">Emotion Wheel Toolkit (PNG)</a>, by Geoffrey Roberts</li> <li><a href="https://uca.edu/bewell/files/2020/11/Feelings-Wheel-Learn-How-to-Label-Your-Feelings.pdf">Feelings Wheel PDF</a></li> <li><a href="https://feelingswheel.com/">Feelings Wheel Online</a></li> <li> <a href="https://alinbuda.com/my-case-against-empathy/">My Case Against Empathy</a>, by Alin Buda</li> <li> <a href="https://www.linkedin.com/feed/update/urn:li:activity:7447580258918100992/">Possible vs. Probable</a>, by Thomas D’hooge</li> <li> <a href="https://jcom.sissa.it/article/pubid/JCOM_1902_2020_A03/">Communicating probability: a multinational study of the interpretation of verbal probability terms</a>, by Maarten C. de Vries, Marjolijn L. de Boer, and Martine Bouman.</li> </ul> <h3>Useful Books</h3> <ul> <li> <em>Deploy Empathy: A practical guide to interviewing customers</em>, by Michele Hansen</li> <li> <em>Humankind</em>, by Rutger Bregman</li> </ul>

<p>You know that thing where you have a grid of cards, and you want them to fade in one after another? That staggered cascade effect. Looks great. Should be simple. And yet every time I’ve built it, the implementation has made me feel like I’m doing something fundamentally stupid.</p> <p><img src="https://files.smashing.media/articles/mathematical-layouts-sibling-index-sibling-count/sibling-index-devtools.jpeg"></p> What’s Coming <p>The current spec only counts <em>all</em> element siblings. But the CSSWG has documented a planned extension in <a href="https://github.com/w3c/csswg-drafts/issues/9572">issue #9572</a>: an <code>of &lt;selector&gt;</code> argument, matching what <code>:nth-child()</code> already supports.</p> <p>Something like <code>sibling-index(of .active)</code> would let you count only siblings matching a specific selector. An element that’s the eighth child overall but the third <code>.active</code> child would return <code>3</code>. For dynamic UIs where you’re filtering or toggling visibility, that would keep the index sequential without requiring DOM manipulation.</p> <p>There’s also been CSSWG discussion around <a href="https://github.com/w3c/csswg-drafts/issues/11068"><code>children-count()</code></a> and <a href="https://github.com/w3c/csswg-drafts/issues/11069"><code>descendant-count()</code></a> functions — the first would tell you how many children an element has (useful for parent-driven layouts), the second would count all descendants recursively. Both are still at the proposal stage, but they’d round out the tree-counting story: <code>sibling-index()</code> and <code>sibling-count()</code> give you the horizontal view (where am I among my peers?), while <code>children-count()</code> and <code>descendant-count()</code> would give you the vertical view (what’s below me?).</p> <p><em>That feeling I mentioned at the top — writing ten <code>:nth-child()</code> rules for a staggered animation and wondering if you’re missing something obvious? You weren’t. The obvious thing just didn’t exist yet.</em></p>

<p>In the high-stakes economy of today, the cost of a friction-heavy interface is no longer just “lost clicks”, but potentially millions in wasted engineering spend and lost business value. As a veteran UX designer who has helped build digital products since the early mobile-first era, I’ve watched business leaders shift from viewing design as a “cosmetic preference” to recognising that user experience is actually the primary engine of business survival. </p> <p>A UX design role is as much about <strong>research</strong> and <strong>analytics</strong> as it is about pixels, and I believe that hard data is the only tool powerful enough to bridge the gap between design and the boardroom. Facts don’t just advocate for the user; they prove that UX is a <strong>non-negotiable requirement</strong> for a healthy bottom line. Even in the rooms where decisions are made, UX is frequently undervalued as a ‘visual’ role. I’ve learned that the most effective way to dismantle this myth is through <strong>data</strong>. </p> <p>The following ten facts represent the current reality of the digital world. These are not just “design tips”; they are the clinical, data-backed pillars for financial growth in a saturated market. Some of these facts are also commonly used by designers as best practices. </p> <p>For example, I once led a B2C mobile design project, where I was able to strip 1.2 seconds off the mobile load time by reducing and removing some of the visual assets. The result was an immediate 12% lift in completed transactions, proving that in UX, every tenth of a second is a direct lever for revenue. </p> 1. Fixing Issues In The Design Phase Is 100 Times Cheaper <p>One of the most compelling financial arguments for UX is the <strong>1:100 rule</strong>. Modern studies, such as from the <a href="https://www.researchgate.net/figure/BM-System-Science-Institute-Relative-Cost-of-Fixing-Defects_fig1_255965523">IBM Systems Institute</a> and <a href="https://www.seguetech.com/rising-costs-defects/">Sugue Technologies</a>, show that fixing an error after a product has been developed and launched can be <strong>up to 100 times more expensive</strong> than fixing it during the initial design and prototyping phase.</p> <p>Think of UX as “engineering insurance.” By the time a developer touches the code, every interaction should have been validated. If you discover a fundamental navigation flaw after launch, <a href="https://www.linkedin.com/pulse/2024-cost-fixing-defects-importance-acceptance-a-j-karikari-a10ef/">you aren’t just paying for the fix</a>; you’re paying for technical debt, lost developer time, and the revenue lost while users struggle with a broken flow.</p> <p><img src="https://files.smashing.media/articles/data-backed-truths-user-experience-roi/1-cost-bug-fixing.png"></p> 2. Performance Impacts User Experience <p>In the current landscape, performance is the essential foundation of user experience. A beautiful interface is worthless if the user bounces before it renders. <a href="https://www.wearetenet.com/blog/website-speed-page-load-time-statistics">The data is uncompromising</a>: <strong>47% of users expect a page to load in two seconds or less</strong>, and missing this window is a financial catastrophe. A mere one-second delay can reduce conversions by <strong>20%</strong> and satisfaction by <strong>16%</strong>, while retail businesses lose an estimated <strong>$2.6 billion annually</strong> to slow load times. When mobile load time moves from one to three seconds, the bounce rate spikes by <strong>32%</strong>, and by the third second, conversion rates typically plummet from <strong>40% to 29%</strong>.</p> <p>However, this volatility offers a massive lever for growth. Even a microscopic <strong>0.1-second improvement</strong> can lift retail conversions by <strong>8.4%</strong>, and travel site conversions by <strong>10.1%</strong>. Improving your Largest Contentful Paint (LCP) by 31% — a benchmark 67% of websites achieved as of June 2025 — can drive a direct <strong>8% increase in sales</strong>. As a long-time designer, I treat speed as a primary design element.</p> <blockquote>If the site isn’t instantaneous, the design hasn’t just failed — it effectively doesn’t exist.</blockquote> <p><img src="https://files.smashing.media/articles/data-backed-truths-user-experience-roi/2-conversion-rate-page-load-time.png"></p> 3. Your Site Has 50 Milliseconds to Impress Your Customers <p>First impressions are both <a href="https://www.nngroup.com/articles/first-impressions-human-automaticity/">visceral and aesthetic</a>. <a href="https://cxl.com/blog/first-impressions-matter-the-importance-of-great-visual-design/">Research</a> indicates that users form an opinion about a website’s visual appeal in approximately <strong>50 milliseconds</strong> (0.05 seconds). That’s not a lot of time! This split-second “gut-feeling” is a survival mechanism that dictates whether a user stays to explore your value proposition or bounces immediately.</p> <p>In the current market, <strong>94% of first impressions</strong> are <a href="https://cxl.com/blog/first-impressions-matter-the-importance-of-great-visual-design/">strictly design related</a>. If your interface feels “off” or dated, users subconsciously project that lack of quality onto your entire product or service. Your content effectively doesn’t exist if your design hasn’t earned the five seconds of attention required to read it.</p> 4. Hick’s Law: The Cost of Overwhelm <p>Stakeholders often think “more options” equals “more value.” Psychology proves the opposite. <a href="https://ixdf.org/literature/article/hick-s-law-making-the-choice-easier-for-users">Hick’s Law</a> states that the time it takes to make a decision increases with the number of options available.</p> <p>Every extra menu item or form field is a “tax” on the user’s brain. As noted by <a href="https://www.landbase.com/blog/conversion-rate-statistics">Landbase</a>, top-performing sites now achieve conversion rates exceeding 11%, while average performers struggle below 3%. Those performing well have applied personalization and optimization strategies to simplify the experience.</p> <blockquote>If you want to increase your revenue by tomorrow, find one field to delete from your checkout flow today.</blockquote> <p><img src="https://files.smashing.media/articles/data-backed-truths-user-experience-roi/3-complex-choices-vs-simple.png"></p> 5. White Space Improves Comprehension <p>“White space” is often viewed as wasted real estate by non-designers. In reality, it is a tool for focus. Strategic use of white space can <a href="https://www.loop11.com/the-power-of-white-space-in-ux-design/">increase a user’s content comprehension by up to <strong>20%</strong></a>.</p> <p>White space prevents “cognitive load” from peaking. By giving the user’s eyes a place to rest, you guide them toward the most important elements, usually your “Buy” or “Sign Up” button. In 2026, as attention spans have dropped to roughly <strong><a href="https://time.com/3858309/attention-spans-goldfish/">8 seconds</a></strong>, simplicity is the ultimate luxury and a major driver of engagement.</p> <p>For example, in a fintech dashboard I worked on, analyst users were feeling overwhelmed by a ‘data dump’ layout in some of the dashboard components. I applied more white space around the data to lower their cognitive load. Simply giving the data room to breathe led to a 25% decrease in time-on-task and a significant boost in trial-to-paid conversions. </p> 6. The Power Of “Fake” Progress <p>One of the most surprising psychological hacks in UX is that users will complete a task faster if they believe they have already made progress. This is known as the <strong>Goal Gradient Effect</strong>.</p> <p>In a classic study, researchers found that a 10-stamp coffee card with two stamps already “pre-filled” was completed significantly faster than an 8-stamp card with zero pre-fills, even though the total spend required was identical. In digital design, showing a progress bar that starts at 15% (simply for creating an account) <a href="https://lawsofux.com/goal-gradient-effect/">increases completion rates for onboarding by over 40%</a>. We aren’t just designing screens — we are managing the user’s dopamine and sense of momentum.</p> <p><img src="https://files.smashing.media/articles/data-backed-truths-user-experience-roi/4-goal-gradient-effect.png"></p> 7. Make Your Content Readable <p>Many stakeholders believe that cramming more text “above the fold” increases value. <a href="https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation.html">Data proves the opposite</a>. Proper typography, specifically line spacing (leading) and paragraph width, can increase content comprehension and reading speed by up to <strong>20%</strong>.</p> <p>Optimal line height (generally 1.5x the font size) reduces “visual noise,” allowing the brain to process information with less cognitive effort. When users struggle to read your text due to tight spacing or small fonts, their “perceived effort” increases, leading to a higher bounce rate. Legibility is a conversion tool: if it’s hard to read, it’s hard to buy.</p> <p>There are many ways to display more legible text. For example, if line spacing (leading) is too small or the font is too heavy, this also impacts readability.</p> <p><img src="https://files.smashing.media/articles/data-backed-truths-user-experience-roi/5-difference-readability.png"></p> 8. Your Users Only Read 20% of Your Content <p>This truth meshes well with the previous one. Users do not read your website; <a href="https://www.nngroup.com/articles/how-users-read-on-the-web/">they scan it</a>. On a typical web page, users read only about <strong>20% to 28% of the text</strong>.</p> <p>Because modern users scan in an <strong>F-pattern</strong> or <strong>Spotted pattern</strong>, designing for reading is a tactical error. We must design for scanning. </p> <p>This requires the following:</p> <ul> <li>Bold headers that narrate the value proposition.</li> <li>Bullet points for key benefits.</li> <li>White space to connect users to key information (discussed in the previous truth).</li> <li>High-contrast call-to-action (CTA) buttons. If your core message is buried in a paragraph, it is invisible to nearly 80% of your audience.</li> </ul> 9. Why User Testing With 5 People Is the Magic Number <p>I have heard of companies that waste six-figure budgets on massive user studies with 100 people, only to get buried in noise. The reality is that testing with just <strong>5 users</strong> typically uncovers <strong>85% of usability problems</strong>.</p> <p>This is a mathematical sweet spot. After the fifth user, you reach the point of diminishing returns — you spend more money to find fewer new bugs. The competitive advantage belongs to small and frequent user testing activities. Test with 5 people, iterate, and test with 5 more. It is the <a href="https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/">most cost-effective way</a> to build a bulletproof product.</p> <p>Personally, I have followed this guideline many times during user testing activities, and I can confidently say that testing with 5 people does deliver the majority of issues in your design. </p> 10. The Financial ROI of 9,900% <p>Last, but definitely not least, the most staggering statistic in our industry remains consistent. On average, every <strong>$1 invested in UX returns $100</strong>. This 9,900% ROI isn’t magic, but the sum of increased conversion and reduced support.</p> <p>A fully optimised UX design can <a href="https://www.forrester.com/report/The-Six-Steps-For-Justifying-Better-UX/RES117708">improve conversion rates by up to <strong>400%</strong></a>. Furthermore, intuitive design significantly lowers customer support requirements. When a product is self-explanatory, you don’t need a massive call centre to explain how to use it.</p> The Depth of UX Investment <p>Beyond these individual statistics, we must address the cumulative effect of a mature UX practice. In my years of practising, the most successful firms are those that treat UX as a continuous improvement loop rather than a one-off project. <a href="https://www.mckinsey.com/business-functions/mckinsey-design/our-insights/the-business-value-of-design">The data shows</a> that companies with high design maturity see <strong>32% higher revenue growth</strong> and <strong>56% higher total returns to shareholders</strong> compared to their less design-focused peers.</p> <p>This discrepancy exists because mature UX organisations move beyond “user delight” and into “user efficiency.” When you shave 30 seconds off a workflow for a team of 1,000 employees, you aren’t just making them happier; you are reclaiming hundreds of thousands of dollars in annual productivity. This internal ROI is often overlooked, but it is just as vital as consumer-facing conversion rates.</p> <p>Furthermore, the “experience gap” is real. <a href="https://www.bain.com/insights/keeping-up-with-your-customers">80% of companies</a> believe they deliver a “superior experience,” but only 8% of customers agree. This massive disconnect represents a significant market opportunity for those willing to look at the hard data. By bridging this gap through continuous user testing and performance optimisation, you aren’t just improving a product but capturing market share that your competitors are leaving on the table.</p> The Impact of AI <p>Today, we cannot talk about UX without talking about AI. However, AI hasn’t replaced these 10 facts, but <a href="https://business.adobe.com/au/resources/sdk/the-state-of-customer-experience-in-an-ai-driven-world-b2c.html">it has accelerated the solution on some of these</a>.</p> <ul> <li> <strong>Agentic UX</strong><br><a href="https://www.databricks.com/resources/ebook/state-of-ai-agents">60% of designers are now building “AI agents”</a> that take actions on behalf of the user, drastically reducing the impact of <strong>Hick’s Law</strong> by narrowing down choices before the user even sees them.</li> <li> <strong>Real-Time Personalisation</strong><br>32% of teams use AI to personalise interfaces in real-time, meaning the <strong>F-Pattern scanning</strong> habits are catered to by moving the most relevant content to exactly where that specific user’s eyes are likely to land.</li> <li> <strong>Automated ROI</strong><br>93% of designers are using generative AI tools to prototype faster, which brings the <strong>1:100 Cost Ratio</strong> even lower by allowing us to find and fix errors before a single line of production code is written.</li> </ul> <p>AI has turned UX from a static map into a living, breathing guide for users. But the fundamental rules of human psychology, such as our 50ms judgments and our need for white space, remain unchanged.</p> Conclusion <p>In summary, here is a list of the key truths to remember:</p> <ol> <li>Fixing issues in the design phase is 100 times cheaper.</li> <li>Performance impacts user experience.</li> <li>Your site has 50 milliseconds to impress your customers.</li> <li>Hick’s Law: The cost of overwhelm.</li> <li>White space improves comprehension.</li> <li>The power of “fake” progress.</li> <li>Make your content readable.</li> <li>Your users only read 20% of your content.</li> <li>Why user testing with 5 people is the magic number.</li> <li>The financial ROI of 9,900%.</li> </ol> <p>As we move deeper into the late 2020s, the line between “design” and “business strategy” has vanished. The data is in, and <a href="https://www.mckinsey.com/business-functions/mckinsey-design/our-insights/the-business-value-of-design">companies that lead in design outperform their competitors</a> by <strong>1.7x in revenue growth</strong>.</p> <p>UX design is no longer a team you hire to “make things look nice.” It is the research-driven, data-backed discipline that ensures your digital product isn’t just a cost centre, but a revenue-generating machine.</p> <p>In fact, this has always been the case, but I hope that in presenting these cold, hard truths, it now becomes a reality for your business.</p> <p>As I have found over the years, implementing factual design improvements does make a difference that intuition alone can’t replicate. We are past the era of subjective opinions. The data is clear, the psychology is proven, and the ROI is undeniable. The only question left is whether you’re ready to let the facts lead your design, or if you’ll let your competitors do it first. </p> <h3>Further Reading On SmashingMag</h3> <ul> <li>“<a href="https://www.smashingmagazine.com/2025/02/human-element-using-research-psychology-elevate-data-storytelling/">The Human Element: Using Research And Psychology To Elevate Data Storytelling</a>”, Victor Yocco &amp; Angelica Lo Duca</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/11/practical-guide-ux-strategy/">Six Key Components of UX Strategy</a>”, Vitaly Friedman</li> <li>“<a href="https://www.smashingmagazine.com/2024/07/designing-sustainable-e-commerce-experiences/">When Friction Is A Good Thing: Designing Sustainable E-Commerce Experiences</a>”, Anna Rátkai</li> </ul>

<p>In the <a href="https://www.smashingmagazine.com/2026/04/identifying-necessary-transparency-moments-agentic-ai-part1/">first part of this series</a>, we talked about the <strong>Decision Node Audit</strong>. We mapped out the internal workings of our AI system to pinpoint the exact moments it makes decisions based on probabilities. This told us when the system needs to be transparent with the user. Now, the big question is <em>how</em> to share that information.</p> <p>You’ve got your <strong>Transparency Matrix</strong> ready. You know which behind-the-scenes API calls need a visible status update. Your engineers are on board with the technical aspects. The next step is designing the visual container for those updates.</p> <p>We face a legacy problem. For thirty years, interface designers have relied on a single pattern to handle latency: <strong>the spinner</strong>. The spinning wheel, the throbber, the progress bar. These patterns communicate a specific technical reality. They tell the user that the system is retrieving data. The delay is caused by bandwidth or file size.</p> <p>AI agents introduce a new kind of wait time. When an agent pauses for twenty seconds, it’s not just downloading something; it’s <em>thinking</em>. It’s figuring out the best steps, weighing options, and creating the content you asked for.</p> <p>If we use a basic spinning icon for this “thinking time,” users get confused and anxious. They watch a looping animation and can’t tell if the system is stalled or crashed. They don’t know if the agent is handling a very complicated task or if it has simply failed.</p> <p>To build user trust, we need to turn this waiting time into a <strong>moment for reassurance</strong>. Instead of a passive <em>“something is happening,”</em> we need to communicate an active, <em>“Here is exactly how I am working to solve your problem.”</em></p> Writing Clear Status Updates <p>We often think of transparency as a visual design problem, but it’s really about the <strong>words</strong> we use. Simple, clear explanations (the microcopy) are what build trust and separate a reliable AI from one that feels broken.</p> <p>We need to retire generic placeholders like <em>Loading</em> or <em>Working</em>. These words are remnants of the era of static software. Instead, we must construct our status updates using a specific formula that mirrors the agency of the system. Let’s stop using vague words like “Loading” or “Working.” Those terms belong to the past, when software was simple and static. Instead, we should create status updates that clearly tell the user what the system is <em>actually doing</em> and make the system’s actions transparent.</p> <p>Imagine, for the sake of an example, you are deploying agentic AI that will help team members organize their calendars and plan recurring meetings on their behalf, once prompted.</p> <p>When an AI displays a message like “Checking availability” for an unknown amount of time, users often feel lost because it doesn’t offer enough information. While they understand the AI is looking at a calendar, they don’t know <em>whose</em> calendar it is, what other steps are involved (before or after), or if the AI even remembered the people and purpose of the scheduling request. Waiting for the final result can be a tense, uneasy experience, like anticipating a gift that you suspect might be a prank.</p> <p>Perplexity AI provides a strong example of doing status updates right. Figure 1 below shows that when users ask a question, the interface displays exactly what it is doing in real time. You see a list of activities updating as they are accomplished. Users do not need to guess what is happening as the AI works.</p> <p><img src="https://files.smashing.media/articles/practical-interface-patterns-ai-transparency/1-perplexity-ai.png"></p> The Agentic Update Formula <p>To give people useful status updates, we need to connect what the system is <em>doing</em> with <em>why</em> it’s doing it. Keeping with our scheduling agent example, the system should break down that waiting period into at least four clear, separate steps.</p> <ul> <li>First, the interface displays <em>Checking your calendar to find open times for a recurring Thursday call with [Name(s)]</em>. </li> <li>Then, it updates to: <em>Cross-checking availability with [Name(s)] calendars</em>.</li> <li>Next, it might display: <em>Syncing [Name(s)] schedules to secure your meeting time on [Data and Time]</em>. </li> <li>Finally, at the conclusion, the agent might state they have successfully completed the task and request the user check their email to confirm the invite that’s been shared with the group having the recurring meeting. </li> </ul> <p>This communication process grounds the technical process in the user’s actual life.</p> <p>Making an AI’s progress easy to understand boils down to a three-part structure: a strong <strong>Action Word</strong>, what the AI is working on (the <strong>Specific Item</strong>), and any <strong>Limits</strong> or rules it has to follow.</p> <p>Think about an AI helping you book a trip. A weak, unhelpful update would just be: <em>Searching for flights...</em></p> <p>A much better update uses the formula:</p> <ul> <li> <strong>Action Word:</strong> <em>Scanning</em> </li> <li> <strong>Specific Item:</strong> <em>the prices on Lufthansa and United</em> </li> <li> <strong>Limits/Rules:</strong> <em>to find anything under $600.</em> </li> </ul> <p>This approach clearly shows the user that the AI understood their request and is working within the set boundaries.</p> <p><img src="https://files.smashing.media/articles/practical-interface-patterns-ai-transparency/2-agentic-ai-status-update.png"></p> Matching Tone to the Risk Matrix <p>Should an AI sound like a person or act like a robot? The right answer depends on the task’s importance, which we can figure out using the <strong>Impact/Risk Matrix</strong> from our <strong>Decision Node Audit</strong>.</p> <p>For simple, low-risk tasks, a friendly, conversational tone works best. For example, a scheduling assistant can say it’s checking your calendar for the best time. This creates a comfortable, easygoing experience for the user.</p> <p>However, high-stakes tasks demand clear, mechanical accuracy. If the AI is managing a big financial transfer or a complicated database migration, users don’t want a playful interface; they want precision. A screen that says <em>“I am thinking hard about your money”</em> would possibly cause panic. Instead, the interface should use straightforward language like <em>“Verifying account routing numbers.”</em> By adjusting the AI’s “personality” to match the level of risk, we give users exactly the experience they need in that moment. While the Impact/Risk Matrix provides a necessary starting point, the ultimate determinant of the appropriate AI voice and tone is rigorous <strong>user research</strong>. </p> <p>It’s impossible for any set of rules to predict the exact words or tone that will build trust or cause stress for every group of users or in every situation. That’s why hands-on research is essential. You need to:</p> <ul> <li> <strong><a href="https://medium.com/@alienoghli/the-essential-guide-to-a-b-testing-a84b853c16e0">Run A/B tests</a></strong> on different ways the AI “talks” to people.</li> <li> <strong><a href="https://uxplanet.org/usability-testing-the-complete-guide-e162898f68db">Conduct usability studies</a></strong> to see how users react emotionally to the system’s messages.</li> <li> <strong><a href="https://ixdf.org/literature/article/how-to-conduct-user-interviews">Perform interviews</a></strong> to truly understand what users expect from an AI in terms of openness.</li> </ul> <p>This kind of research ensures the AI’s “personality” is comfortable and appropriate for the actual people who will be using the system in their specific context.</p> <p>We’ve now covered the <em>“what”</em> — the critical microcopy, the clear action words, and the necessary limits that make an AI status update honest and informative. But words alone aren’t enough. A perfect sentence hidden in a poor interface is still a failure of transparency.</p> <p>The next challenge is the <em>“how”</em> — designing the physical delivery system for that message. You can think of the status update formula as the engine, and the interface pattern as the car. A powerful engine needs a reliable, well-designed chassis to carry it down the road.</p> Interface Patterns: A Library For Agents <p>Once we have the right words, we need <strong>the right container</strong>. The key is matching the message’s weight to the pattern’s visibility. A tiny background task (like an agent gently tidying up your files) doesn’t need a loud, flashing banner. That message is best delivered subtly. A high-stakes, multi-step process (like moving money) potentially demands a more robust container that forces the user to pay attention. </p> <p>By creating a library of these patterns, we ensure the right level of transparency is delivered at the right moment, turning the anxiety of waiting into a moment of informed confidence. Let’s review a few common, critical patterns.</p> <h3>The Living Breadcrumb: AI Working in the Background</h3> <p>For those low-importance tasks that an AI is handling quietly in the background, we need a way to show users it’s working without constantly distracting them. We can call this the living breadcrumb.</p> <p>Think of an email app where an AI is drafting a reply for you. You don’t want a disruptive pop-up message. Instead, a small, subtle status indicator pulses within the application’s border or menu area.</p> <p>The solution needs to go beyond a static icon. The living breadcrumb smoothly transitions between different text updates. It might pulse from <em>Reading email</em> to <em>Drafting reply</em> to <em>Checking tone</em>. It’s there if you want to check on its progress, offering a quiet assurance that the task is underway, but it won’t demand your immediate attention.</p> <p><img src="https://files.smashing.media/articles/practical-interface-patterns-ai-transparency/3-living-breadcrumb.jpg"></p> <h3>Dynamic Checklists</h3> <p>When dealing with critical, high-stakes tasks — like processing a complex financial transaction or migrating a large, intricate dataset — we recommend using a <strong>Dynamic Checklist</strong> (illustrated in Figure 3).</p> <p>This pattern serves as a powerful anchor for the user, providing clarity and confidence about the <strong>process’s progress</strong>. Instead of a simple bar, the Dynamic Checklist lays out every planned step the AI agent will take. It clearly highlights the step that is currently in progress, marks preceding steps as complete, and lists future actions as pending.</p> <p>For example:</p> <ul> <li> <strong>Step 1</strong>: Verify Account Balance <strong>[Complete]</strong>.</li> <li> <strong>Step 2</strong>: Convert Currency <strong>[Processing]</strong>.</li> <li> <strong>Step 3</strong>: Transfer Funds <strong>[Pending]</strong>.</li> </ul> <p>The Dynamic Checklist offers a significant advantage over a traditional progress bar because it expertly manages unpredictable time. If the currency conversion (Step 2) unexpectedly requires an extra ten seconds, the user won’t feel sudden anxiety or panic. They have full visibility into the system’s exact location, understanding that the delay is occurring during the <em>Converting Currency</em> step. Because they recognize this is a potentially complex action, they are naturally more patient and trusting of the system’s ongoing work.</p> <p><img src="https://files.smashing.media/articles/practical-interface-patterns-ai-transparency/4-devin-ai.png"></p> <p>The pattern itself is a compelling UI idea, but designers must remember that its implementation transforms the task into a full-stack design requirement. Unlike a simple loading flag, the dynamic checklist requires a robust front-end state management system to listen for step-completion events, which are typically triggered by a back-end webhook structure. This ensures the interface is always reflecting the agent’s real-time position in the workflow.</p> <p><img src="https://files.smashing.media/articles/practical-interface-patterns-ai-transparency/5-dynamic-checklist.jpg"></p> <h3>The Thinking Toggle</h3> <p>Some users with higher information needs or higher needs for transparency may not trust a simple summary; they want to see the system’s raw processing. For this audience, we’ve designed the <strong>Thinking Toggle</strong>.</p> <p>This is a simple progressive disclosure UI control, like a chevron or a “View Logs” button, that lets the user expand a friendly status update into a raw terminal view. It displays the sanitized logic logs of the AI agent, such as:</p> <ul> <li> <em>Querying API endpoint /v2/search</em>;</li> <li> <em>Response received: 200 OK</em>;</li> <li> <em>Filtering results by relevance score &gt; 0.8</em>.</li> </ul> <p>Many people will never open this view. However, for the user who needs deep transparency, the very presence of this toggle is a signal of trust. It reassures them that the system is not concealing anything.</p> <p>Keep in mind, with this deep transparency comes a critical technical risk. Even for your most expert audience, you must sanitize and abstract these raw logs before display. This step is non-negotiable to prevent accidentally exposing proprietary business logic, internal data structure names, or security tokens that could be exploited. This process ensures trust is built through honesty, not security vulnerability.</p> <h3>Designing For Partial Success</h3> <p>In standard software, things are often black or white. A file either saves or it doesn’t. But with AI agents, things are often grey. An agent might plan most of a trip perfectly, yet struggle to book that one special restaurant.</p> <p>We need to design for when the AI is mostly successful.</p> <p>Standard binary (yes or no) error messages are trust-killers because they suggest the AI failed completely. If an agent does 90% of a task and only misses the last 10%, a big red “Request Failed” banner is misleading.</p> <p>Instead, the interface should clearly show what worked and what didn’t:</p> <ul> <li> <em>Flight booked: UA 492</em> [Success].</li> <li> <em>Hotel reserved: Marriott Downtown</em> [Success].</li> <li> <em>Car rental: Hertz</em> [Failed — No inventory].</li> </ul> <p>This way, you only have to step in and fix the parts that failed, like booking the car yourself, while keeping all the good work the agent already did.</p> <p><img src="https://files.smashing.media/articles/practical-interface-patterns-ai-transparency/6-designing-partial-success.jpg"></p> <h3>Disentangling The Tool</h3> <p>When an AI system doesn’t perform as expected, it’s crucial to be absolutely clear about the true reason for the failure. Users often mistakenly blame the AI itself for problems that are actually caused by an external service or tool the AI relies on.</p> <p>For example, imagine a virtual assistant tries to look at your schedule, but the connection to the Google Calendar API is down. The error message shouldn’t make the assistant look like it failed to do its job.</p> <ul> <li> <strong>Less helpful:</strong> <em>“I could not check your calendar.”</em> (This suggests the assistant is incompetent.)</li> <li> <strong>More helpful and honest:</strong> <em>“The Google Calendar connection is not responding. I will automatically try again in 30 seconds.”</em> </li> </ul> <p>The first message is frustrating because it makes the AI look like it failed. The second message, though, is much clearer. It explains that the AI is capable, but a broken tool outside its control is causing the issue. This distinction is really important because it keeps the user from losing faith in the AI, even when things go wrong.</p> <h3>The Audit Trail: Trust After The Fact</h3> <p>Real-time transparency is fleeting. If a user walks away from their desk while the agent is working, they miss the Dynamic Checklist. They return to a finished screen. If the result looks odd, they have no way to verify the work. This is why every agentic workflow requires a persistent Audit Trail.</p> <p>We need to design a <em>Show Work</em> interaction. On the final result screen, provide a link or history log that allows the user to replay the decision logic.</p> <ul> <li> <em>See how this price was calculated</em>;</li> <li> <em>View search sources</em>.</li> </ul> <p>This receipt is the ultimate safety net. It allows the user to spot-check the validity of the output. Even if they never click it, the mere presence of the receipt tells the user that the system stands behind its work.</p> <p><img src="https://files.smashing.media/articles/practical-interface-patterns-ai-transparency/7-audit-trail-design-pattern.jpg"></p> <p>ChatGPT provides an example of how now providing users with an easy way to audit the information AI uses can cause confusion or user frustration. ChatGPT remembers you in the way a file cabinet quietly fills up with notes about everything you’ve ever said, then uses those notes to shape every future conversation without telling you. This is called memory. According to developer <a href="https://simonwillison.net/2025/May/21/chatgpt-new-memory/">Simon Willison</a>, in April 2025, that memory was getting fed into every new conversation automatically.</p> <p>The problem with ChatGPT’s memory at that time was that you couldn’t see what it remembers, or when it’s using that information, or how it’s influencing what you get back. There’s no log. No timeline. No plain-language list of <em>“here’s what the AI has decided about you.”</em></p> <p>The only way to glimpse the dossier was to know a specific prompt trick — essentially asking the model to quote its own hidden instructions back to you. Most users will never discover this. They’ll just notice, as Willison did, that ChatGPT placed a “Half Moon Bay” sign in the background of an image they generated (Figure 8) because it had silently cross-referenced their location from previous conversations. This is the absence of transparency (the ability to audit the memory with ease) disguised as personalization. You need to provide users with both.</p> <p><img src="https://files.smashing.media/articles/practical-interface-patterns-ai-transparency/8-chatgpt-output.png"></p> <p><strong>The Audit Trail pattern</strong> is the ultimate solution to the memory audit problem demonstrated by ChatGPT. It is one of four core design solutions that, together, create a library of options for improving AI transparency.</p> <p>Here is a quick summary of the key interface patterns discussed in this article, which are designed to transform AI waiting time from a moment of anxiety into an opportunity to build user confidence:</p> <table> <thead><tr> <th>Pattern</th> <th>Best Use Case</th> <th>The User’s Anxiety</th> <th>The Trust Signal</th> </tr></thead> <tbody> <tr> <td>The Living Breadcrumb</td> <td>Low-stakes, background tasks (e.g., drafting emails, sorting files).</td> <td>Did the system stall or freeze?</td> <td>I am active, but I won't disturb you.</td> </tr> <tr> <td>The Dynamic Checklist</td> <td>High-stakes workflows with variable time (e.g., financial transfers, booking travel).</td> <td>Is it stuck? What step is taking so long?</td> <td>I have a plan, and I am currently executing Step 2.</td> </tr> <tr> <td>The Thinking Toggle</td> <td>Expert tools or complex data analysis (e.g., code generation, market research).</td> <td>Is this hallucinating or using real data?</td> <td>I have nothing to hide; here are my raw logs.</td> </tr> <tr> <td>The Audit Trail</td> <td>Post-task review for any outcome (e.g., final reports, completed bookings).</td> <td>How do I know this result is accurate?</td> <td>Here is the receipt of my work for you to verify.</td> </tr> </tbody> </table> <p><strong><em>Table 1:</em></strong> <em>Four design patterns enhancing transparency.</em></p> <h3>The Reality of Attention: When Users Ignore the Interface</h3> <p>Even the most perfectly designed checklist or the clearest status message may still go ignored by many users.</p> <p>When people are working on tons of tasks, especially professionals, they often tune out the interface. Think of an insurance underwriter creating fifty quotes a day — they’re not watching a progress bar. They click “Generate,” switch tabs to answer an email, and only come back when the task is done.</p> <p>My research with these experts shows they judge the system based entirely on the final result. They have a good idea of what the answer <em>should</em> be. If a salesperson expects a premium between $500 and $600, and the system returns $550, they accept it right away, and trust is established. </p> <p>These experts tell me that over time, as the AI continues to provide what they perceive as accurate outputs, usage will increase, and they will save time versus manual quoting. Essentially, the system is now viewed as an efficient accelerator of an otherwise monotonous yet mandatory task.</p> <p>But if the system returns $900, the user stops. The output is not aligned with expectations, and that’s a problem they must solve. At that moment, the user switched tabs; they missed the little explanation about the high-risk surcharge that popped up in real-time. They didn’t see the specific rule that was triggered. If that explanation disappeared with the progress bar, the user has no way to understand the difference between expectation and outcome. They certainly won’t run the query again just to watch the animation play out.</p> <p>They will run the quote by hand, effectively treating the AI’s output as useless and initiating a complete rework of their effort. This manual recalculation feels like a waste of time, which further erodes their confidence in the tool. Once this happens, the user is not interested in <em>why</em> the system chose $900; they are focused purely on validating or invalidating the system’s accuracy against their own, trusted methods. This lack of transparency, especially in moments of disagreement, is a primary barrier to adoption and consistent use. The audit trail allows us to provide persistent transparency and is the mechanism that prevents the AI from creating more work.</p> <p>We need to keep this in mind, particularly when delivering AI-powered tools meant for enterprise use. If the tool delivers a result that misaligns with expectations, you rarely get a second chance. If the user must spend ten minutes investigating why the AI provided that number, they will stop using the AI.</p> <h3>Predictability, Reliability, and Understanding Are The Product</h3> <p>We are not building magic tricks. A magic trick relies on misdirection and hidden mechanics. We are building colleagues.</p> <p>Think of a good colleague, they keep you in the loop. They let you know what they’re up to, what’s taking their time, and when they hit a snag. That honesty is what helps you trust them.</p> <p>We can apply this to AI. By using the practical patterns we discussed: giving specific updates, showing a dynamic checklist, acknowledging partial wins, and keeping an audit trail, we stop seeing AI as a mysterious black box that just needs a nice coat of paint. Instead, we start treating it like a team member we can rely on and manage, which builds trust and a clear understanding.</p> <p>The main reason for using these interface ideas is to achieve real transparency, going beyond explaining the AI’s complicated inner workings. Here, transparency means showing the user the <strong>AI’s process and performance</strong> right when they need to see it. This involves plainly communicating the <strong>AI’s current status</strong>, its known <strong>limits</strong>, and an easy-to-follow <strong>history of its decisions</strong>. This level of openness changes the interaction from just accepting what the AI does to actively working with it. It lets users understand why they got a certain result and how they can best step in or guide the system for the best possible outcome.</p> <h3>References</h3> <ul> <li>“<a href="https://medium.com/@alienoghli/the-essential-guide-to-a-b-testing-a84b853c16e0">The Essential Guide to A/B Testing</a>”, Ali E. Noghli</li> <li>“<a href="https://uxplanet.org/usability-testing-the-complete-guide-e162898f68db">Usability testing: the complete guide</a>”, Andrew Tipp</li> <li>“<a href="https://ixdf.org/literature/article/how-to-conduct-user-interviews">How to Conduct User Interviews</a>”, IxDF</li> </ul>

<p>Last October, I was sitting in a hotel room in Lisbon, the night before I was supposed to demo a project management tool my team had spent four months building. The hotel Wi-Fi was doing that thing where it <em>connects</em> but nothing actually loads. And I watched our app, this thing I was genuinely proud of, render a blank screen with a spinner. Then a timeout error. Then nothing.</p> <p>I pulled out my phone, tethered to cellular, and got a shaky connection. The app loaded, but every click was a two-second wait. Create a task? Spinner. Move a task between columns? Spinner. I sat there thinking: we built a front end in React, a back end in Node, a Postgres database, a Redis cache, a GraphQL API with six resolvers just for the task board. All that infrastructure, and the damn thing can’t show me my own data without a round-trip to a server 3,000 miles away.</p> <p>That was the night I started seriously looking at <strong>local-first architecture</strong>. Not because I read a blog post or saw a tweet. Because I was <em>embarrassed</em>.</p> <p>I want to be upfront about something: I spent the first year or so dismissing local-first as academic. I read the <a href="https://www.inkandswitch.com/local-first-software/">Ink &amp; Switch “Local-First Software” paper</a> when it came out in 2019 and thought, <em>“Cool research, not practical for real apps.”</em> I was wrong. The tooling in 2019 genuinely wasn’t ready. But I was also being lazy, defaulting to the architecture I already knew. The paper laid out seven ideals for software: <strong>fast, multi-device, offline, collaboration, longevity, privacy, user ownership</strong>. And I remember thinking those sounded like a wish list, not engineering requirements.</p> <p>Seven years later, I’ve shipped three production apps using local-first patterns. I’ve also ripped local-first out of two projects where it was the wrong call. I have opinions. Some of them are probably wrong. But they’re earned.</p> <p>So here’s what I actually think about building local-first web apps in 2026, written for developers who’ve been doing this long enough to be skeptical of silver bullets.</p> What “Local-First” Actually Means (And The Confusion That Won’t Die) <p>I need to clear something up because I keep having this conversation at meetups. <strong>Local-first is not offline-first.</strong> It’s not “add a service worker and call it a day.” It’s not a synonym for PWA. I’ve seen all of these conflated in conference talks, and it drives me a little crazy.</p> <p>Offline-first means your app handles network loss gracefully, but <a href="https://www.smashingmagazine.com/2019/04/cloudflare-workers-serverless/">the server is still the source of truth</a>. When the network comes back, the server wins. Cache-first (service workers caching responses) is a performance optimization. You’re serving stale data faster, which is great, but you haven’t changed who <em>owns</em> the data. PWAs are a delivery mechanism: installable, cached, push notifications. None of these is a data architecture.</p> <p><strong>Local-first is a data architecture.</strong> Your user’s device holds the primary copy of their data. The app reads and writes to a local database. Renders instantly. Syncs with servers or other devices in the background. The server, when it exists, is a sync peer with some special authority (authentication, backup, access control). But it’s not the gatekeeper.</p> <p>The Ink &amp; Switch paper defined seven ideals, and I think they still hold up. But the one that matters most in practice, the one that changes how you build everything, is this:</p> <blockquote>The client is not a thin view requesting permission to show data. The client is a <strong>node</strong> in a distributed system with its own database.</blockquote> <p>That distinction sounds subtle. It isn’t. It changes your entire stack.</p> Be Honest Early: When You Should Not Do This <p>I’m putting this near the top because I’ve watched too many developers (including myself, once) get excited about a new architecture and shoehorn it into projects where it doesn’t belong. I wasted about six weeks trying to make a local-first approach work for an internal analytics dashboard at a previous job. My colleague Sarah finally pulled me aside and said, <em>“The data is generated on the server. There’s nothing to replicate to the client. What are you doing?”</em> She was right.</p> <p>Local-first is a bad fit when your data is primarily server-generated. Analytics dashboards, social media feeds, search results: the server <em>produces</em> this data, so the client consuming it via API requests is completely fine.</p> <p>It’s wrong for systems that need strong transactional consistency. Banking, payment processing, and inventory management. If two people try to buy the last item in stock, you need a single authoritative database making that decision with <a href="https://en.wikipedia.org/wiki/ACID">ACID</a> guarantees. Eventual consistency will lose you money, or worse.</p> <p>It’s overkill for simple CRUD apps with no offline or collaboration needs. If you’re building an internal admin panel used by five people in an office with good internet, adding a sync engine is over-engineering. And it’s physically impractical for massive datasets that won’t fit on client devices.</p> <p>But here’s where it shines: note-taking, document editing, collaborative design tools, project management, field apps with unreliable connectivity, basically anything where <strong>data privacy is a selling point</strong>, as well as anything with <strong>real-time collaboration</strong>. In other words, it’s great for <strong>user-generated data</strong> that benefits from instant interaction and should survive the server going down.</p> <p>One more thing I wish someone had told me earlier: you don’t have to go all-in. I’ve had the best results using local-first for <em>specific features</em> within otherwise traditional apps. Offline drafts in a blog editor. Real-time collaborative notes inside a project management tool that’s otherwise standard REST.</p> <p>The “spectrum of local-first” is a real thing, and starting with one feature is how I’d recommend anyone begin.</p> Replicas, Not Requests <p>If you’ve used Git, you already understand the mental model.</p> <p>SVN (remember SVN?) was centralized. One server. You check out files, make changes, and commit to the server. Server down? Can’t commit. Can’t even see history.</p> <p>Git gave every developer a full clone. You commit locally, branch locally, and merge locally. Push and pull when you’re ready. The remote repository is important, but it’s not the only copy of the truth.</p> <p><strong>Local-first web development is Git for application data.</strong> Every client device holds a replica (full or partial) of the relevant data. Writes happen locally. Sync is push/pull in the background. Conflicts get resolved through defined merge strategies.</p> <p>I remember the first time this clicked for me in practice. I was prototyping a task board, and I wrote a function to add a task. In our old architecture, it would be:</p> <ol> <li>POST to API.</li> <li>Wait for the response.</li> <li>If success, update the local state.</li> <li>If failure, show error toast and maybe roll back optimistic update.</li> </ol> <p>In the local-first version, it was: write to local SQLite, done. The UI updated instantly because it was reading from the same local database. Sync happened whenever. No loading state, no error handling for the write itself, no optimistic update logic (because there’s nothing to be “optimistic” about; the local write <em>is</em> the state).</p> <p>The implications ripple through everything. You don’t need React Query or SWR for data fetching, because you’re not fetching. You don’t need Redux or Zustand for server-derived state, because the local database <em>is</em> your state. Your routing doesn’t trigger API calls. Authentication works differently because the server isn’t checking permissions on every read.</p> <p>Here’s a visual comparison that might help if you’re the kind of person (like me) who thinks spatially:</p> <p><img src="https://files.smashing.media/articles/architecture-local-first-web-development/local-first-vs-traditional-architecture.png"></p> <p>On the left, every user interaction is a round-trip. Click, wait, render. On the right, reads and writes hit the local database directly. The sync server is still there, but it’s doing its work in the background. The user never waits for it. That’s the fundamental shift.</p> <p>But I’m getting ahead of myself. Before we can talk about sync and conflicts, we need to talk about where the data actually lives on the client.</p> Where Data Lives on the Client <p>Forget <code>localStorage</code>. It’s synchronous (blocks the main thread), caps at 5-10 MB, and only stores strings. It’s fine for a theme preference. It’s not a database.</p> <p>IndexedDB is the workhorse that nobody loves. It’s in every browser, it’s asynchronous, it can handle hundreds of megabytes, and its API is absolutely miserable to work with. I’ve used it directly a grand total of once. Now I use it through abstractions or, more often, I don’t use it at all.</p> <p>Because the real story in 2026 is SQLite running in the browser via WebAssembly.</p> <p>I know that sounds like a party trick, but it’s not. SQLite compiled to WASM, persisted to the Origin Private File System (OPFS), gives you a <em>real relational database</em> in the browser. Full SQL queries. Transactions. Indexes. The works.</p> <p>OPFS is the newer API that makes this practical. It gives web apps a sandboxed file system with high-performance synchronous access (in Web Workers), which is exactly what SQLite needs. Before OPFS, you could run SQLite in memory and manually persist to IndexedDB, which worked but was slow and fragile.</p> <p>Here’s roughly what initialization looks like in a real project (I’m using <a href="https://github.com/rhashimoto/wa-sqlite"><code>wa-sqlite</code></a> here, which is the library I’ve had the best luck with):</p> <div> <pre><code>import { SQLiteAPI } from 'wa-sqlite'; import { OPFSCoopSyncVFS } from 'wa-sqlite/src/examples/OPFSCoopSyncVFS.js'; async function initDatabase() { const module = await SQLiteAPI.initialize(); const vfs = new OPFSCoopSyncVFS('pm-tool-db'); await vfs.initialize(module); const db = await module.open_v2('workspace.db'); // HACK: wa-sqlite doesn't handle concurrent writes well on Safari, // so we serialize through a queue. See vlcn-io/wa-sqlite#247 await module.exec(db, <code>PRAGMA journal&amp;#95;mode=WAL</code>); await module.exec(db, <code>CREATE TABLE IF NOT EXISTS tasks ( id TEXT PRIMARY KEY, title TEXT NOT NULL, status TEXT DEFAULT 'backlog', assignee&amp;#95;id TEXT, project&amp;#95;id TEXT NOT NULL, position REAL DEFAULT 0, created&amp;#95;at TEXT DEFAULT (datetime('now')), updated&amp;#95;at TEXT DEFAULT (datetime('now')) )</code>); return db; } </code></pre> </div> <p>In production, I wrap all database access in a write queue that serializes mutations. I also log every failed write to Sentry with the full SQL statement (scrubbed of PII, obviously) because debugging database issues in a user’s browser is hell without that telemetry.</p> <p>A gotcha I wasted almost two days on: Safari’s OPFS implementation behaves differently from Chrome’s in subtle ways. Specifically, I hit a bug where <code>createSyncAccessHandle()</code> would silently fail in certain iframe contexts on Safari 18. There’s no error, no exception. It just doesn’t work. I ended up falling back to IndexedDB-backed persistence on Safari, which was slower but at least functioned. (I’m told <a href="https://developer.apple.com/documentation/safari-release-notes/safari-26-release-notes">Safari 19/26</a> fixes this, but I haven’t verified it yet.)</p> <p>Quick comparison of the options I’ve actually used:</p> <table> <thead><tr> <th>Storage</th> <th>Good For</th> <th>Watch Out For</th> </tr></thead> <tbody> <tr> <td>IndexedDB</td> <td>Broad compatibility, moderate data</td> <td>Terrible DX, no SQL, verbose</td> </tr> <tr> <td>OPFS + SQLite WASM</td> <td>Relational data, complex queries, serious apps</td> <td>Safari quirks, ~400KB bundle addition</td> </tr> <tr> <td>PGlite (Postgres in WASM)</td> <td>Full Postgres compatibility on client</td> <td>Newer, larger bundle, still maturing</td> </tr> </tbody> </table> <p>I’ve also tried <a href="https://github.com/vlcn-io/cr-sqlite"><code>cr-sqlite</code></a>, which adds CRDT column support directly to SQLite tables. Clever idea, but I found it too early-stage for production use when I evaluated it in late 2025. The merge semantics were sometimes surprising, and debugging CRDT state inside SQLite was painful. I’d revisit it later this year.</p> The Part That’s Actually Hard <p>Storing data locally is a solved problem. Syncing it reliably across devices and users is where you earn your gray hairs.</p> <p>When multiple replicas can independently read and write, you need a mechanism to reconcile changes. There are basically four approaches, and I’ve used three of them.</p> <p><strong>CRDTs (Conflict-Free Replicated Data Types)</strong> are data structures designed so that concurrent edits can always be merged without conflicts, mathematically guaranteed. Yjs is the most popular implementation in JavaScript, and it’s genuinely excellent for real-time collaborative text editing. I used it to build a collaborative document editor at my last company, and the experience was mostly good, though I’ll get into the pain points in the conflict resolution section.</p> <p>Here’s what setting up a shared Yjs document looks like in practice:</p> <pre><code>import * as Y from 'yjs'; import { WebsocketProvider } from 'y-websocket'; const ydoc = new Y.Doc(); const provider = new WebsocketProvider( 'wss://sync.our-app.dev', 'workspace-a1b2c3d4', ydoc ); const tasks = ydoc.getMap('tasks'); // Add a task const task = new Y.Map(); task.set('title', 'Review Q3 roadmap draft'); task.set('completed', false); task.set('assignee', 'maria'); // TODO: type this properly once; yjs exports better TS types // for nested maps. For now, this works fine. tasks.set('f47ac10b-58cc-4372-a567-0e02b2c3d479', task as any); tasks.observeDeep(() =&gt; { // Re-render UI. In practice, I debounce this to ~16ms // because observeDeep fires a LOT during active collaboration renderTaskList(tasks.toJSON()); }); </code></pre> <p><a href="https://github.com/automerge/automerge">Automerge</a> is the other major CRDT library, backed by Rust and with a document-oriented model. I’ve used it less, but I know teams who swear by it. <a href="https://github.com/loro-dev/loro">Loro</a> is newer, Rust-based, and claims better performance. I haven’t shipped anything with Loro yet.</p> <p><strong>Database replication</strong> is the other big approach, and honestly, for most apps that don’t need Google Docs-style real-time text editing, I think it’s the better choice. The idea is straightforward: replicate rows between a server database (Postgres) and a client database (SQLite) with a sync engine managing the plumbing.</p> <p><a href="https://www.powersync.com/">PowerSync</a> does this well. It gives you one-way replication from Postgres to client SQLite with a write-back path for mutations. ElectricSQL is more ambitious, going for full active-active sync between Postgres and SQLite. I’ve used PowerSync in production and <a href="https://electric-sql.com/docs/intro">ElectricSQL</a> in prototypes. PowerSync felt more stable when I evaluated them both in early 2026, but ElectricSQL’s approach is more powerful if they nail the execution.</p> <p><a href="https://github.com/aspen-cloud/triplit">Triplit</a> takes a different angle entirely: it’s a full-stack database with sync built in, so you don’t think about “client DB” and “server DB” separately. I haven’t tried it beyond a weekend prototype, but the developer experience was surprisingly nice.</p> <p><strong>Event sourcing</strong> (syncing a log of mutations rather than the current state) is the approach <a href="https://livestore.dev/">LiveStore</a> takes. I find it intellectually appealing and occasionally useful, but in practice, I’ve found that reconstructing state from an event log adds complexity that most apps don’t need. My controversial opinion: Event sourcing is over-recommended for application development. It’s great for audit logs and certain domains, but for a task board? Just sync the rows.</p> <p>Not everyone will agree with that. I know event sourcing has passionate advocates, and I’ve been told I’m wrong about this at least twice at conferences. Maybe I just haven’t built the right app for it yet.</p> Conflicts: The Thing Everyone’s Afraid Of <p>I used to think conflict resolution was a terrifying, unsolvable problem. After building three apps that handle it, I’d revise that to: it’s a <em>manageable</em> problem that requires you to think carefully about your specific data model, and most developers overthink it.</p> <p>Conflicts happen when two replicas modify the same data without seeing each other’s changes. User A edits a task title on their phone while offline. User B edits the same title on their laptop. Both come back online. Now what?</p> <p>My first attempt at handling this was embarrassingly naive:</p> <pre><code>// My first try. Don't do this. function resolveConflict(local: any, remote: any) { // just... take the remote one? sure? return remote; } </code></pre> <p>The problem is obvious: local changes get silently dropped. User A edits a title, syncs, and their edit vanishes. They don’t even know it happened.</p> <p>What actually works for most cases is <strong>last-write-wins (LWW)</strong> at the <em>field</em> level, not the record level. If User A changes the title and User B changes the due date, you keep both changes because they touched different fields. You only have a real conflict when both modified the same field, and then you pick the later timestamp.</p> <div> <pre><code>interface FieldValue { value: string | number | boolean; // ISO timestamp with enough precision to break most ties updatedAt: string; // Client ID as tiebreaker when timestamps match. // This happens more often than you'd think. clientId: string; } function pickWinner(a: FieldValue, b: FieldValue): FieldValue { const timeA = new Date(a.updatedAt).getTime(); const timeB = new Date(b.updatedAt).getTime(); if (timeA !== timeB) return timeA &gt; timeB ? a : b; // Deterministic tiebreaker when timestamps match return a.clientId &gt; b.clientId ? a : b; } // In practice, I apply this per-field across the whole record. function mergeTask(local: Record&lt;string, FieldValue&gt;, remote: Record&lt;string, FieldValue&gt;) { const merged: Record&lt;string, FieldValue&gt; = {}; const allKeys = new Set([...Object.keys(local), ...Object.keys(remote)]); for (const key of allKeys) { if (!local[key]) { merged[key] = remote[key]; continue; } if (!remote[key]) { merged[key] = local[key]; continue; } merged[key] = pickWinner(local[key], remote[key]); } return merged; } </code></pre> </div> <p>In our production app, this handles about 95% of conflicts without any user-visible issues. For the remaining cases (two people editing the same text field), LWW means one person’s edit silently wins. For a task title? Honestly, that’s usually fine. For a document body? No. That’s where CRDTs earn their keep.</p> <p>But there’s a subtler problem I didn’t appreciate until I hit it: <strong>semantic conflicts</strong>. Data merges cleanly at the structural level, but the result is nonsensical. Two users, both offline, book the same 2 PM meeting slot with different meetings. Field-level merge accepts both writes because they’re writing to different records. No structural conflict. But you’ve got a double-booking, and your merge function has no idea that’s a problem.</p> <p>Semantic conflicts require application-level validation, and that has to happen on the server during sync. Your sync engine merges the data structurally, but <em>your</em> server needs to check domain invariants before accepting the result. The approach I’ve landed on (after getting it wrong twice) is: validate on the server during the write-back phase, but <em>flag</em> violations rather than silently rejecting them.</p> <p>Here’s what I mean. When the client pushes mutations to the server during sync, the server runs them through a constraint validation layer before applying them to Postgres:</p> <div> <pre><code>interface SyncViolation { type: 'scheduling_conflict' | 'capacity_exceeded' | 'stale_assignment'; recordId: string; description: string; // The conflicting records so the client can show context conflictingRecords: string[]; // When was this violation detected detectedAt: string; } async function validateSyncBatch( mutations: SyncMutation[], serverDb: Database ): Promise&lt;{ accepted: SyncMutation[]; violations: SyncViolation[] }&gt; { const accepted: SyncMutation[] = []; const violations: SyncViolation[] = []; for (const mutation of mutations) { if (mutation.table === 'calendar_events') { // Check for double-booking const overlapping = await serverDb.query( <code>SELECT id, title FROM calendar&amp;#95;events WHERE room&amp;#95;id = ? AND id != ? AND start&amp;#95;time &amp;lt; ? AND end&amp;#95;time &amp;gt; ?</code>, [mutation.data.room_id, mutation.data.id, mutation.data.end_time, mutation.data.start_time] ); if (overlapping.length &gt; 0) { violations.push({ type: 'scheduling_conflict', recordId: mutation.data.id, description: <code>Conflicts with "${overlapping[0].title}"</code>, conflictingRecords: overlapping.map(r =&gt; r.id), detectedAt: new Date().toISOString() }); // Still accept the write, but flag it // The alternative is rejecting it, but then the user's // local state and server state diverge, and that's worse accepted.push(mutation); continue; } } accepted.push(mutation); } return { accepted, violations }; } </code></pre> </div> <p>The key decision here — and I went back and forth on this — is that we <em>accept</em> the conflicting write and flag it, rather than rejecting it outright. If you reject it, the user’s local database has a record that the server refuses to acknowledge, and now you’re in a state divergence situation that’s genuinely hard to recover from. I tried the rejection approach first, and it led to ghost records on the client that users couldn’t delete because they didn’t exist on the server. Nightmare.</p> <p>So instead, the server accepts the write, stores the violation, and syncs the violation back to the client. The client shows a non-blocking notification: <em>“Your meeting ‘Q3 Planning’ conflicts with ‘Design Review’ in Room B at 2 PM. Tap to resolve.”</em> The user taps, sees both meetings, and picks one to reschedule or cancel. The resolution is a normal write that syncs back.</p> <p>Is this perfect? No. There’s a window between when the violation is created and when the user resolves it, where both conflicting records exist. For meeting rooms, that’s tolerable. For something like inventory management where two people “buy” the last item, that window is unacceptable, and that’s exactly why I said earlier that local-first is wrong for systems requiring strong transactional consistency.</p> <p>I’m still iterating on this pattern. The violation table grows if users ignore notifications (we expire them after 72 hours, which feels arbitrary). And deciding <em>which</em> invariants to validate on the server requires you to essentially maintain a parallel set of business rules outside your client-side application logic. It’s not elegant. But it works, and it’s the best approach I’ve found for the class of apps I’m building. If you’ve built something cleaner, I genuinely want to hear about it.</p> <p>For CRDTs like Yjs, conflict resolution at the character level (for text) works remarkably well. Two people typing in the same paragraph will see both sets of characters appear in a sensible order. But CRDT merging of structured data (maps, arrays, nested objects) can produce results that surprise you. I once watched a Yjs-backed task list duplicate items after a merge because two users had reordered the same list offline, and the CRDT’s list merge semantics interleaved their orderings. Technically correct. Practically confusing. We ended up adding a post-merge de-duplication step, which felt like a hack but solved the problem.</p> <p>When should you surface conflicts to the user, Git-style? In my experience, almost never for typical app data. Users don’t want to resolve merge conflicts. They want the app to figure it out. The exception is high-stakes content: legal documents, medical records, anything where silently dropping an edit could cause real harm.</p> The Tools Right Now <p>I’m going to give you my honest read on the tools available as of mid-2026, with the caveat that this space is moving fast enough that some of this might be outdated by the time you read it.</p> <p><strong>Yjs</strong> is the most mature CRDT library. Production-ready, huge community, integrates with most collaborative editors (TipTap, BlockNote, Lexical). If you need real-time collaborative editing, start here.</p> <p><strong>Automerge</strong> is solid, Rust-backed, and takes a more document-oriented approach than Yjs. I’ve seen it used well in apps where the data model fits a document metaphor. Fewer integrations than Yjs, but the core is well-engineered.</p> <p><strong>PowerSync</strong> is what I’d recommend for teams that have an existing Postgres back-end and want to add offline support. It’s production-ready, the docs are good, and the mental model (Postgres syncs to client SQLite, client writes go through a defined upload path) is easy to reason about. In our app, initial sync for a workspace with around 5,000 tasks takes about 1.2 seconds on a decent connection and about 3.5 seconds on a throttled 3G simulation. That was acceptable for us.</p> <p><strong>ElectricSQL</strong> is going for something more ambitious: true active-active replication between Postgres and SQLite, with “shapes” defining what data syncs to which client. I want this to succeed because the developer experience in prototypes was excellent. But when I evaluated it for production in February 2026, I hit enough rough edges (particularly around shape management and reconnection behavior) that I went with PowerSync instead. I plan to revisit it.</p> <p><strong>Triplit</strong> impressed me in a weekend prototype. Full-stack database with sync built in, nice TypeScript API. I haven’t stress-tested it with real production load, and I’d want to before committing.</p> <p><a href="https://zero.rocicorp.dev/"><strong>Zero</strong></a> (from Rocicorp, the Replicache people) is interesting because it takes a query-based approach to sync, which is different from the row-replication model. Replicache was sunset in favor of Zero, which tells you something about how fast approaches are evolving in this space. Worth watching, but I wouldn’t build on it yet for a production app.</p> <p><a href="https://tinybase.org/"><strong>TinyBase</strong></a> is a lightweight reactive store that’s great for smaller apps or prototyping. I used it for a personal side project (a reading tracker) and liked it a lot. Not sure I’d use it for a team-scale product.</p> <p><a href="https://pglite.dev/"><strong>PGlite</strong></a> (Postgres compiled to WASM) is wild. Same SQL dialect on client and server. Combined with ElectricSQL, you could theoretically run identical queries everywhere. I think this is where things are heading long-term, but PGlite’s bundle size and memory footprint are still concerns for mobile browsers.</p> <p>One thing the Replicache sunset taught me: don’t bet your architecture on a single tool from a small company without a fallback plan. I keep my sync layer abstracted enough that I could swap engines in a few weeks, not months. I know that sounds like premature abstraction, but in a space this young, I think it’s just prudence.</p> Building A Real App: Architecture, Auth, And Migrations <p>I want to walk through how I actually structure a local-first app in practice, because the layer diagrams you see in blog posts rarely match what the code looks like.</p> <p>My current stack for a collaborative project management tool looks like this:</p> <ul> <li> <strong>UI:</strong> React components that never call <code>fetch()</code> for data reads.</li> <li> <strong>Query layer:</strong> <code>useLiveQuery</code> hooks that subscribe to the local SQLite database and re-render automatically when data changes.</li> <li> <strong>Local database:</strong> SQLite via wa-sqlite, persisted to OPFS.</li> <li> <strong>Mutation layer:</strong> Plain <code>INSERT</code>/<code>UPDATE</code>/<code>DELETE</code> statements against local SQLite.</li> <li> <strong>Sync:</strong> PowerSync managing replication between local SQLite and our Postgres back-end.</li> <li> <strong>Server:</strong> Postgres, a Node.js auth service, and a small sync validation layer.</li> </ul> <p>The component code ends up looking almost absurdly simple compared to what I used to write:</p> <div> <pre><code>import { useLiveQuery } from '@powersync/react'; import { db } from '../lib/database'; function TaskBoard({ projectId }: { projectId: string }) { const tasks = useLiveQuery( <code>SELECT &amp;#42; FROM tasks WHERE project&amp;#95;id = ? AND archived = 0 ORDER BY position</code>, [projectId] ); async function addTask(title: string) { await db.execute( <code>INSERT INTO tasks (id, title, project&amp;#95;id, position, created&amp;#95;at) VALUES (?, ?, ?, ?, datetime('now'))</code>, [crypto.randomUUID(), title, projectId, tasks.length] ); // That's it. useLiveQuery picks up the change automatically. // No invalidation, no refetch, no loading state. } // No isLoading check. Data is local. It's always there after the first sync. return ( &lt;div&gt; {tasks.map(task =&gt; &lt;TaskCard key={task.id} task={task} /&gt;)} &lt;NewTaskInput onSubmit={addTask} /&gt; &lt;/div&gt; ); } </code></pre> </div> <p>Compare that to the React Query + REST equivalent, which would be at least twice the code and include loading states, error states, optimistic update logic with rollback, and cache invalidation. I don’t miss it.</p> <h3>Auth In A Local-First World</h3> <p>Authentication works roughly the same as traditional apps: JWT tokens, OAuth flows, and session management. The token authenticates the sync connection rather than every individual request. Offline access works because the data is already local. The user was authenticated when the data was originally synced.</p> <p>Authorization is trickier, and I think most local-first articles under-explain this. You cannot sync your entire database to every client and rely on client-side code to hide unauthorized data. Someone will open DevTools, find the local SQLite file, and see everything. The client is not a trust boundary.</p> <p>You enforce authorization at the sync layer. PowerSync has “sync rules” that define which rows go to which clients. ElectricSQL has “shapes.” Either way, the server only sends data that the user is authorized to see. When the client sends writes back, the server validates them against authorization rules before applying them to Postgres. If a user tries to modify something they shouldn’t, the server rejects it during sync.</p> <p>I also want to mention <strong>end-to-end encryption (E2EE)</strong>, because it pairs naturally with local-first. Since data lives on the client, you can encrypt it before sync. The server stores and relays encrypted blobs it can’t read. Apps like Anytype do this. We haven’t implemented E2EE in our current app, but it’s on the roadmap for when we handle more sensitive data.</p> <h3>Schema Migrations On A Thousand Devices</h3> <p>This one caught me off guard the first time. On the server, you run a migration against one database you control. On the client, every user has their own database that might be running any version of your schema, depending on when they last opened the app.</p> <p>I use a simple migration runner that checks a version number at app startup:</p> <div> <pre><code>const MIGRATIONS = [ { version: 1, sql: <code>CREATE TABLE IF NOT EXISTS tasks ( id TEXT PRIMARY KEY, title TEXT NOT NULL, status TEXT DEFAULT 'backlog', project&amp;#95;id TEXT NOT NULL, created&amp;#95;at TEXT DEFAULT (datetime('now')) );</code> }, { version: 2, // Added priority and due_date in sprint 4 sql: <code>ALTER TABLE tasks ADD COLUMN priority INTEGER DEFAULT 0; ALTER TABLE tasks ADD COLUMN due&amp;#95;date TEXT;</code> }, { version: 3, // Denormalized assignee name for offline display. // Yes, I know this is a trade-off. The JOIN was killing // performance on low-end Android devices. sql: <code>ALTER TABLE tasks ADD COLUMN assignee&amp;#95;name TEXT DEFAULT '';</code> } ]; async function runMigrations(db: Database) { await db.execute(<code>CREATE TABLE IF NOT EXISTS &amp;#95;schema&amp;#95;version (version INTEGER)</code>); const rows = await db.execute('SELECT version FROM _schema_version'); const currentVersion = rows.length &gt; 0 ? rows[0].version : 0; for (const migration of MIGRATIONS) { if (migration.version &gt; currentVersion) { console.log(<code>Migrating local DB to v${migration.version}</code>); await db.execute('BEGIN'); try { await db.execute(migration.sql); await db.execute( 'INSERT OR REPLACE INTO _schema_version (rowid, version) VALUES (1, ?)', [migration.version] ); await db.execute('COMMIT'); } catch (err) { await db.execute('ROLLBACK'); // In production, this fires a Sentry alert with the // migration version and error details throw err; } } } } </code></pre> </div> <p><strong>Design your migrations to be additive.</strong> New columns with defaults. New tables. Don’t rename or drop columns unless you absolutely must, because users running old app versions will still be syncing data, and your server needs to handle the mismatch. I learned this the hard way when I dropped a column that an older client was still writing to, which caused silent sync failures for about 200 users over a weekend. Not fun.</p> If I Were Starting A New Project Today <p>I get asked this a lot, so here’s my current answer. It changes every six months or so.</p> <p>For a collaborative app with real-time features and offline support, I’d start with: <strong>React</strong> on the front end, <strong>PowerSync</strong> for sync, <strong>SQLite via wa-sqlite</strong> on the client (persisted to OPFS with IndexedDB fallback for Safari), and <strong>Supabase</strong> (which gives me Postgres, auth, and row-level security out of the box). I’d use <strong>Yjs</strong> only if I needed rich text collaboration, and I’d avoid it if I didn’t, because CRDTs add meaningful complexity to your data model.</p> <p>For a simpler app where I mostly need offline support and instant reads but collaboration is secondary, I might skip the sync engine entirely and just use a local SQLite database with a custom sync layer that pushes/pulls from a REST API. I know that sounds like reinventing the wheel, but for simple cases, a custom sync that you fully understand is better than a general-purpose sync engine that adds concepts you don’t need.</p> <p>I would not currently use ElectricSQL or Zero for production, not because they’re bad, but because I want another 6-12 months of maturity before I’d trust them for something I’m on-call for. I’ve been burned before by building on early-stage infrastructure (I was an early <a href="https://docs.meteor.com/">Meteor</a> adopter, if that tells you anything) and I’m more cautious now about where I accept novelty risk.</p> Performance: What’s Actually Fast And What Hurts <p>Reads are instant. That’s not marketing. Querying a local SQLite database for a list of 500 tasks takes under two milliseconds on my M2 MacBook and about eight milliseconds on a mid-range Android phone. No network. No spinner. No loading state.</p> <p>Writes are instant, too. <code>INSERT INTO tasks</code> runs locally, the UI updates reactively, and sync happens whenever. Users perceive writes as instantaneous because they are.</p> <p>Initial sync is where you pay the cost. Bootstrapping the local replica on first load (or on a new device) means downloading potentially megabytes of data. In our app, a workspace with 5,000 tasks, 200 projects, and 50 users takes about 1.2 seconds on broadband and four to five seconds on a slow mobile connection. We mitigate this with partial sync (only sync the user’s active projects) and by showing a one-time “Setting up your workspace” screen during the first sync. After that initial sync, incremental updates are tiny.</p> <p>Bundle size is a real concern. SQLite compiled to WASM adds roughly 400KB gzipped to your JavaScript bundle. That’s not trivial, especially if you care about Time to Interactive on mobile. I lazy-load the database module with dynamic <code>import()</code> so it doesn’t block the initial render.</p> <p>Memory is the other gotcha. SQLite WASM runs in memory, and on mobile browsers with aggressive memory limits, a large database can cause tab crashes. I haven’t found a great solution for this beyond keeping the synced dataset small through partial sync and being aggressive about pruning old data.</p> <p><strong>Note</strong>: Speaking of memory issues, I’ve been reading <a href="https://www.oreilly.com/library/view/designing-data-intensive-applications/9781491903063/"><em>Designing Data-Intensive Applications</em></a> by Martin Kleppmann for the third time. Every re-read, I catch something new. If you haven’t read it and you’re thinking about distributed data, just stop and read it first.</p> Testing This Stuff <p>I’ll keep this brief because the honest answer is that testing local-first apps is harder than testing traditional apps, and the tooling isn’t great yet.</p> <p>What works for me: unit tests for merge logic (these are pure functions, easy to test), integration tests that spin up two client instances in memory and verify they converge after concurrent edits, and Playwright E2E tests that use <code>context.setOffline(true)</code> to simulate offline/online transitions.</p> <p>What I haven’t figured out well: reproducing bugs that only happen during conflict resolution with specific timing. When a user reports that a task <em>“lost its description,”</em> I often can’t reproduce it because I don’t know exactly what sequence of offline edits and sync events led to the conflict. I’ve started logging sync events in more detail (what was sent, what was received, what conflicts were detected, how they were resolved) and shipping those logs to our observability stack. It helps, but it’s not as clean as I’d like.</p> <p>Property-based testing with something like fast-check is genuinely useful for CRDT logic. Generate random operation sequences, apply them in random orders, and assert convergence. I wish I’d started doing this earlier.</p> What I’m Watching, What Worries Me <p>I’m excited about where this is going. PGlite (full Postgres in the browser) feels like a glimpse of a future where the client/server data layer distinction just dissolves. You write SQL, it runs everywhere, sync is a runtime concern rather than an architectural decision. We’re not there yet, but you can see it from here.</p> <p>I’m also watching the convergence of local-first and AI. Running models locally, keeping data on-device, using cloud AI only with explicit consent, and encrypted data. The privacy implications are compelling, and I think <em>“your data never leaves your device”</em> will become a real product differentiator as AI eats more of the software experience.</p> <p>What worries me is <strong>fragmentation</strong>. Every sync engine uses its own protocol. There’s no standard. If ElectricSQL shuts down (it won’t, probably, but <em>if</em>), migrating to PowerSync isn’t trivial. I abstract my sync layer partly for this reason, but it still makes me nervous.</p> <p>The web has standards for nearly everything. We don’t have one for sync, and I don’t see one emerging soon.</p> <p>I’m also worried about the <strong>complexity budget</strong>. Local-first adds real architectural complexity: sync engines, conflict resolution, client-side migrations, partial replication, and auth at the sync boundary. For a team of experienced developers building the right kind of app, that complexity pays for itself many times over. For a team that just needs a CRUD app, it’s a trap.</p> <p>I keep coming back to something a developer named Kevin said to me at a local-first meetup in Berlin last year: </p> <blockquote>“The best architecture is the one your team can debug at 2 AM.”</blockquote> <p>He’s right. If local-first makes your app faster, more reliable, and better for users, and your team understands how the sync works, go for it. If you’re adding it because it sounds cool and you don’t fully understand the failure modes yet, build a prototype first. Learn where it breaks. Then decide.</p> <p>I’m building my fourth local-first app right now: a collaborative planning tool for small teams, with offline support and optional E2E encryption. It’s the most ambitious thing I’ve attempted with this architecture. I’ll write about how it goes.</p> <p>If you’re starting out, pick one feature in your current app that would benefit from instant local reads and offline writes. Add a local SQLite database. Wire up reactive queries. See how it feels. I think you’ll have the same reaction I did: oh, <em>this</em> is how it should have always worked.</p> Further Reading <ul> <li>“<a href="https://www.inkandswitch.com/local-first/">Local-First Software</a>” (Ink &amp; Switch): This is still the best starting point.</li> <li>“<a href="https://www.youtube.com/watch?v=PMVBuMK_pJY">CRDTs: The hard parts”</a>” (Martin Kleppmann, video): Martin’s talks on CRDTs are excellent.</li> <li>The <a href="https://localfirstweb.dev/">localfirstweb.dev</a> community site: A good directory of tools.</li> <li><a href="https://docs.powersync.com/">PowerSync Documentation</a></li> <li><a href="https://electric-sql.com/docs">ElectricSQL Documentation</a></li> <li><a href="https://docs.yjs.dev/">Yjs Documentation</a></li> <li><a href="https://automerge.org/docs/hello/">Automerge Documentation</a></li> </ul>

<p>This article is a sponsored by <a href="https://macpaw.com/">MacPaw</a></p> <p>Your grandmother’s vacuum was a trusty but ugly workhorse hidden in a dark closet. Dyson turned that practical tool into an aspirational product, one you love leaving out even when guests come over. Dish soap was just dish soap until Method put it in a glass container, and it became an addition to, not a distraction from, the aesthetics of your kitchen. Physical product brands spent the last two decades transforming mundane, practical items like soap and vacuums into must-have experiences.</p> <p>But utility software — especially maintenance tools, a type of system software designed to analyze, configure, optimize, and maintain a computer — hasn’t made that leap from something you open as a chore to an experience you choose with excitement. And that means those brands are missing an interesting design opportunity: these tools are well overdue for a more intelligent, more human, and less emotionally flat approach. </p> “The Most Underexplored Frontier In UX Is The Maintenance Layer.” <p>Utility software still feels like a chore. Using it has all the excitement of pulling out that dusty old vacuum from the back of the closet. These four common software design assumptions illustrate why the category hasn’t yet transcended its chore status. </p> <ul> <li> <strong>Assuming the user already resents the task</strong>: they’re here because something is wrong, not because they chose to open this tool. Designing accordingly means assuming they want the software to be fast, clinical, invisible, and something to get out of the way, not get into. But a design built for resentment produces tools that deserve it. If you expect your users to want to get out of the product as fast as possible, they’ll feel it in the design. </li> <li> <strong>Assuming function is enough and feelings are for consumer apps</strong>: emotion in interface design is decoration. The maintenance layer is infrastructure, and nobody decorates infrastructure. But nobody decorated dish soap either, until Method. They didn’t change the product, just the user’s relationship to the tool they use to accomplish a task. </li> <li> <strong>Assuming your users are not your fans because nobody cares about maintenance tools</strong>: utility tools don’t build communities, and nobody posts about running a disk cleanup. But people care deeply about tools that respect their time and make complex things simple for them to use. The MacPaw team listens to our community and implements many of the features they ask for, because we know users can be fans too, and they should shape how our products work. </li> <li> <strong>Assuming that designers shouldn’t waste pixels on personality</strong>: you need to hide complexity and show minimal UI. Utility software should look neutral, technical, and forgettable. </li> </ul> <p>But when software hides the system, people lose trust in it. </p> <p>Design always starts with function — function shapes form. But if that function can’t be made completely invisible and people still have to interact with it, it inevitably becomes part of their experience. In that case, people expect it not just to work, but to match their environment, influence their mood, and contribute to their overall experience.</p> <p>A good example is a watch. Its core function is simple: show the time. But because a watch occupies physical space in a person’s world, you want more from it than just functionality. It needs to play an aesthetic role and complement the environment.</p> “The Maintenance Layer Is A Behavioral Problem, Not Just A UX One.” <p>The user experience in utility software matters more than the industry tends to admit. In utility software, experience is not something added on top of function. It emerges from how the function is structured, explained, and interacted with. If you think you can design the most functional app on the market without considering how users understand and experience the process, you’re missing an opportunity to build a relationship with that user.</p> <p>Part of that ignored UX element is a behavioral problem: users don’t avoid utility software because using it is hard, but instead because it produces <a href="https://research.macpaw.com/publications/emotional-assesments-ux">no positive emotional signal</a> at any point. The problem is rarely complex. It’s the absence of meaningful interaction during the process of using the app. </p> <p>Another issue is focusing solely on function. <a href="https://uxmag.com/articles/the-aesthetic-usability-effect-why-beautiful-looking-products-are-preferred-over-usable-but-not-beautiful-ones">The aesthetic-usability effect</a> shows us clearly that if something looks better, it feels better — ATM screens in a 1995 study were judged easier to use if the screen layout was more attractive. Even something as purely functional as an ATM screen display needs attention to how the function is structured, presented, and perceived.</p> <p>And then there’s the memory problem. People remember <a href="https://www.researchgate.net/publication/5246508_Evaluations_of_Pleasurable_Experiences_The_Peak-End_Rule">the emotional peak and the ending of an experience</a>, not the average. A completed process that ends with a clear “done” is remembered more positively than one that just fades out, even if the end task is completed successfully in both cases. System tools rarely intentionally design the ending of an interaction — they just stop running. </p> “Thoughtful System Design Can Transform Maintenance From A Technical Chore Into A Seamless User Experience.” <p>What does emotional design actually mean, then, in utility UX? Here are three principles the MacPaw team follows to design its products against the category norm. </p> <h3>Translating system complexity into human language</h3> <p>Maintenance tools deal with storage, task management, and background processes. Good design explains what’s happening, avoids system jargon, and communicates outcomes clearly. </p> <p><a href="https://www.figma.com/blog/the-linear-method-opinionated-software/">Linear’s game-changing move</a> that illustrates this principle was agreeing on straightforward units of work, like projects and teams, that any new user can immediately understand. That helps them spend less time ramping up and more time building. </p> <h3>Make the process clear and show progress</h3> <p>System tools run complex processes. Design should show progress, impact, and system change to create trust and control. </p> <p>Vercel’s deployment infrastructure is an excellent example here. When you trigger a build, the browser tab favicon changes — a spinner while building, a green checkmark when done, a red X if it fails. It’s ruthlessly functional, not visual or warm, but it’s emotionally intelligent: it exists purely to reduce the low-level anxiety of waiting for a build to finish. </p> <h3>Design the moment of completion</h3> <p>Maintenance tasks often end quietly. But completion is the emotional payoff. Design should emphasize clarity of results, a sense of resolution, and visible improvement so users remember a positive and distinct ending. </p> <p>Take the new CleanMyMac by MacPaw <a href="https://macpaw.com/news/introducing-new-cleanmymac">after its 2024 major update</a>. Unlike the maintenance utility category norm, CleanMyMac uses visual language, including color, depth, motion, icons, and 3D illustrations, to shift the focus from diagnosing problems to showing progress: space cleared, threats removed, time saved. Instead of confronting the user with what's wrong, the interface closes with a picture of a machine that's already working better. </p> <p>The task is the same, but the ending tells a different story, giving the user a picture of a machine that's already working better. </p> “Even if you don’t care about emotional design as a principle, the change is coming anyway.” <p>The market is forcing this issue even for those who don’t find the argument I’ve made here compelling. </p> <p>That’s partly generational — designers and users who grew up with Linear, Figma, and Notion have a completely different baseline for the tools they use. Good software is not a happy accident for them, but a given. That generation is now the primary audience for maintenance software, and so the old “it’s fine, it’s just a utility” excuse doesn’t work philosophically or commercially. Just like Dyson and Method changed how entire product categories approached design, the current state of utility software is shifting for good.</p> <p>And digital fatigue is the current cultural state. The resurgence of vinyl records, film cameras, and dumbphones is not merely nostalgia, but a signal that the emotional relationship between people and their tools is changing. </p> <p>The question has shifted from whether your utility software should feel better to use to whether it can afford not to. </p>

<p>More interfaces now render while the response is still being generated. The UI begins in one state, then updates as more data comes in. You see this in chat apps, logs, transcription tools, and other real-time systems.</p> <p>The tricky part is that the <strong>interface is not in a fixed state</strong>; it keeps changing as new content comes in. It grows where lines become longer and new blocks appear. Something that was just below the screen can suddenly move, and the user’s scroll position becomes harder to manage. Parts of the UI might even be incomplete while the user is already interacting with it.</p> <p>In this article, we’ll take a simple interface and make it handle this properly. We’ll look at how to keep things stable, manage scrolling, and render partial content without breaking the reading experience.</p> What Does A Streaming UI Actually Look Like? <p>I’ve built three demos that stream content in different ways: a chat bubble, a log feed, and a transcription view. They look different on the surface, but they all run into the same three problems.</p> <p>The first is <strong>scroll</strong>. When content is streaming in, most interfaces keep the viewport pinned to the bottom. That works if you are just watching, but the moment you scroll up to read something, the page snaps back down. You did not ask for that. The interface decided for you, and now you’re fighting it instead of reading.</p> <p>The second is <strong>layout shift</strong>. Streaming content means containers are constantly growing, and as they do, everything below shifts downward. A button you were about to click is no longer where it was. A line you were reading has moved. The page is not broken; it is just that nothing stays still long enough to interact with comfortably.</p> <p>The third is <strong>render frequency</strong>. Browsers paint the screen around 60 times per second, but streams can arrive much faster than that. This means the DOM, which is the browser’s internal representation of everything on the page, ends up being updated for frames the user will never actually see. Each update still costs something, and that cost adds up quietly until performance starts to slip.</p> <p>As you go through each demo, pay attention to where things start feeling off. That small moment of friction when the interface starts getting in your way. This is exactly what we are here to fix.</p> Example 1: Streaming AI Chat Responses <p>This is the most familiar case. You click <strong>Stream</strong>, and the message starts growing token by token, just like a typical AI chat interface.</p> <p><img src="https://files.smashing.media/articles/designing-stable-interfaces-streaming-content/1-streaming-ai-chat-responses.png"></p> <p>Here’s what I want you to try:</p> <ul> <li>Click the <strong>Stream</strong> button.</li> <li>Try scrolling upwards while the message is streaming.</li> <li>Increase the speed (to something like 10ms).</li> </ul> <p>You will notice something subtle but important: the UI keeps trying to pull you back down. Basically, it is making a decision for you about where your attention should be.</p> <p>That’s one example. Let’s look at another.</p> Example 2: Live Processing In A Log Viewer <p>This example looks different on the surface, but the problem is actually very similar to the first example. Rather than a message that gets longer over time, new lines are appended continuously, like a terminal or a log stream.</p> <p>The interesting part here is the tail toggle. It makes the trade-off between interaction and stable interfaces very clear:</p> <p><img src="https://files.smashing.media/articles/designing-stable-interfaces-streaming-content/2-live-processing-log-viewer.png"></p> <p>Again, here is what I want you to try:</p> <ul> <li>Click the <strong>Start</strong> button.</li> <li>Allow the logs to stream past the container’s height.</li> <li>Scroll up to the beginning.</li> <li>Stop the stream and disable the “tail” option.</li> </ul> <p>Notice that, when tail is enabled, the UI follows the new content. But you’re unable to scroll up and stay in place. Instead, you need to stop the stream or enable “tail” to explore the content.</p> Example 3: Dashboard Displaying Real-Time Metrics <p>In this case, the UI updates in place:</p> <ul> <li>Numbers change,</li> <li>Charts shift,</li> <li>Values refresh continuously.</li> </ul> <p><img src="https://files.smashing.media/articles/designing-stable-interfaces-streaming-content/3-dashboard-display-real-time-metrics.png"></p> <p>There is no scroll tension this time, but a different issue shows up. That’s what we’ll get into next.</p> Why The UI Feels Unstable And How To Fix It <p>If you tried the chat demo and scrolled upward while the responses were coming in, you may have spotted the first issue right away: the UI keeps pulling you back down to the latest streamed content as it updates. This takes you out of context and never allows you the time to fully digest the content once it has passed.</p> <p>We see that exact same issue in the second example, the log viewer. Without the tail toggle, the streamed content overrides your scroll position.</p> <p>These aren’t bugs in the traditional sense that they produce code errors; rather, they are accessibility issues that affect <em>all</em> users. That said, they can be fixed and prevented with careful UX considerations as you plan and test your work.</p> <h3>Ensure Predictable Scroll Behavior</h3> <p>This is the goal:</p> <ul> <li>Enable auto-scrolling when detecting that the user is at the bottom of the stream.</li> <li>Stop auto-scrolling when the user has scrolled upwards.</li> <li>Resume auto-scrolling if the user scrolls back to the bottom of the stream.</li> </ul> <p>To do that, we need to know whether the user has intentionally moved away from the bottom, which we can assume is true when the scroll position is manually changed. We can track that behavior with a flag.</p> <pre><code>let userScrolled = false; chatEl.addEventListener('scroll', () =&gt; { const gap = chatEl.scrollHeight - chatEl.scrollTop - chatEl.clientHeight; userScrolled = gap &gt; 60; }); </code></pre> <p>That <code>60px</code> threshold matters. Without it, tiny layout changes (like a new line) would briefly create a gap and break auto-scroll, even if the user didn’t actually scroll.</p> <p>Now let’s make sure that we enable auto-scrolling only when the user’s scroll position is equal to the stream’s scroll height, i.e., the user is at the bottom of the stream:</p> <pre><code>function autoScroll() { if (!userScrolled) { chatEl.scrollTop = chatEl.scrollHeight; } } </code></pre> <p>One small thing that’s easy to miss: we need to reset <code>userScrolled</code> once a new stream begins. Otherwise, one scroll from a previous message can silently disable auto-scroll for the next one.</p> <h3>Solidify Layout Stability</h3> <p>We saw this in the first example as well. As new content streams in, the layout jumps, or shifts, taking you out of your current context. To be specific about what’s shifting: it’s not the page layout in a broad sense, it’s the content directly below the chat bubble. </p> <p>There’s also a subtler artifact worth calling out before we look at the code: cursor flicker. Because we’re wiping <code>innerHTML</code> and recreating every element on every tick, the cursor is being destroyed and re-added constantly, up to 80 times per second at fast speeds. </p> <p>At normal speed, it’s easy to miss, but slow the slider down to around 30ms, and you’ll see a faint but persistent flicker at the end of the text. Once we fix the rebuild pattern, the flicker disappears entirely.</p> <p><img src="https://files.smashing.media/articles/designing-stable-interfaces-streaming-content/4-broken-vs-fixed.png"></p> <p>None of these changes is a big effort on its own. But once they are in place, the interface stops reacting blindly to every update. It becomes easier to read, easier to control, and a lot less distracting, even though the content is still coming in continuously.</p> <p>There are even more considerations to take into account for ensuring a stable, predictable, and good user experience. For example, what happens if the stream is canceled mid-flow? And what can we do to ensure that user preferences are respected for things like reduced motion, keyboard navigation, and screen reader accessibility? Let’s get into those next.</p> Handling Interrupted Streams <p>Most streaming interfaces include a way to stop or cancel the stream. We saw that in the demos. But stopping often leaves the UI in an awkward state. The cursor might keep blinking, buttons don’t update, and the message just freezes mid-stream with no clear indication that it didn’t finish.</p> <p>The problem is that the stop is usually wired to do one thing: cancel the timer. That’s not enough. You also need to (1) clear the pending buffer, (2) remove the cursor, (3) mark the response as incomplete, and (4) reset the buttons. Here’s how we accomplish those.</p> <h3>1. Stop The Stream Cleanly</h3> <p>Here’s what <code>stopStream</code> needs to do, in order:</p> <ol> <li>Cancel the timer and flip the <code>isStreaming</code> flag so no more ticks run.</li> <li>Clear the <code>requestAnimationFrame</code> (RAF) buffer so nothing still queued gets written on the next frame.</li> </ol> <pre><code>function stopStream() { clearTimeout(streamTimer); isStreaming = false; pending = ''; rafQueued = false; } </code></pre> <p>Clearing the <code>pending</code> property matters because there might be characters buffered from the last stream instance that haven’t been flushed yet. If you don’t clear it, the next <code>requestAnimationFrame</code> fires, drains the buffer, and writes those characters to the DOM after the stream has officially stopped.</p> <p>Now we move on to removing the cursor by calling <code>markStopped</code> on the bubble:</p> <pre><code>if (cursorEl &amp;&amp; cursorEl.parentNode) cursorEl.remove(); markStopped(aiBubble); stopBtn.style.display = 'none'; retryBtn.style.display = ''; playBtn.style.display = ''; setStatus('Stopped', 'stopped'); chat.removeEventListener('scroll', onScroll); } </code></pre> <p>The <code>cursorEl.parentNode</code> check is there because <code>stopStream</code> is also called internally when a new message fires mid-stream, at which point the cursor might already be gone. Calling <code>remove()</code> on a detached node throws, so we check first.</p> <p><code>markStopped</code> appends a small label to the bottom of the bubble so the user knows the response didn’t finish:</p> <pre><code>function markStopped(bubble) { if (!bubble) return; bubble.classList.add('stopped'); const label = document.createElement('span'); label.className = 'stopped-label'; label.textContent = 'response stopped'; bubble.appendChild(label); } </code></pre> <p>The null check on <code>bubble</code> handles the edge case where stop fires before the AI message element has been initialized, which can happen if the user clicks stop during the 300ms delay before the bubble appears.</p> <h3>Provide A Retry Option</h3> <p>If the stream simply stops — perhaps due to a network issue or some other unexpected error — we ought to provide the user with a path to re-attempt the stream. What that basically means is preventing the UI from doing the expensive work needed to scroll back up to the top, re-read the prompt, and retype it. With a retry option, the user only needs to click a button, and the stream restarts from the current position. </p> <p>To make that work, we need to hold onto the question when the stream starts:</p> <pre><code>let lastQuestion = ''; function startStream(question, answer) { lastQuestion = question; // rest of setup... } </code></pre> <p>Then, when the retry attempt runs, we reset everything and start fresh:</p> <pre><code>function retryStream() { if (currentMsgEl &amp;&amp; currentMsgEl.parentNode) { currentMsgEl.remove(); } charIndex = 0; userScrolled = false; pending = ''; rafQueued = false; isStreaming = true; retryBtn.style.display = 'none'; stopBtn.style.display = ''; setStatus('Streaming...', 'streaming'); chat.addEventListener('scroll', onScroll, { passive: true }); setTimeout(() =&gt; { initAIMsg(); tick(lastAnswer); }, 200); } </code></pre> <p>The reset is critical. Every piece of state needs to go back to its initial value, just like a brand new stream.</p> <p><strong>Note:</strong> We remove the entire message row (<code>currentMsgEl</code>), not just the bubble. If only the bubble is removed, the layout wrapper and avatar remain persistent and break the structure.</p> <h3>Send A New Message Mid-Stream</h3> <p>There’s one more edge case that’s easy to miss. If the user sends a new message while a stream is still running, you end up with two loops writing to the DOM at the same time. The result is messy, and characters from different responses get mixed together.</p> <p>Here’s what to do: stop the current stream before starting a new one.</p> <pre><code>function startStream(question, answer) { if (isStreaming) { clearTimeout(streamTimer); isStreaming = false; pending = ''; rafQueued = false; if (cursorEl &amp;&amp; cursorEl.parentNode) cursorEl.remove(); chat.removeEventListener('scroll', onScroll); } // now reset and start fresh charIndex = 0; userScrolled = false; isStreaming = true; lastQuestion = question; // ... } </code></pre> <p>Here, we inline the cleanup rather than calling <code>stopStream</code> directly because <code>stopStream</code> also calls <code>markStopped</code> and resets the buttons. The next demo has all three behaviors wired up. You can start a stream, hit “Stop” mid-stream, and the cursor disappears, the “response stopped” label appears, and a “Retry” buttons displayed. </p> <p><img src="https://files.smashing.media/articles/designing-stable-interfaces-streaming-content/5-interruptible-stream.png"></p> Accessibility <p>Streaming interfaces are often built and tested with a mouse, so they may feel just fine in a browser, but break down in other situations that may not have been considered, like whether a screen reader announces new content at all. Or navigating with a keyboard might get stuck or lose focus as things update. And, of course, moving text can be uncomfortable — or even disabling — for <a href="https://www.smashingmagazine.com/2021/10/respecting-users-motion-preferences/">those with motion sensitivities</a>. </p> <p>The good part is that you do not need to rebuild everything to accommodate these things; they can be fixed with solutions that sit on top of what is already there.</p> <h3>Accommodating Assistive Technology With Live Regions</h3> <p>Screen readers don’t automatically announce content that shows up on its own. They usually read things when the user moves to them. So, in a streaming UI, where text builds up over time, nothing gets announced. The content is there, but the user doesn’t hear anything.</p> <p>The fix is <a href="https://w3c.github.io/aria/#aria-live"><code>aria-live</code></a>. It tells the browser to watch a container and announce updates as they happen, without the user needing to move focus.</p> <pre><code>&lt;div id="chat" role="log" aria-live="polite" aria-atomic="false" aria-label="Chat messages" &gt;&lt;/div&gt; </code></pre> <ul> <li> <code>role="log"</code> tells assistive tech this is a stream of updates, like a running transcript. Some tools handle this automatically, but it’s safer to be explicit so behavior stays consistent.</li> <li> <code>aria-atomic="false"</code> makes sure only the new content is announced. Without it, some screen readers try to read the whole message again on every update, which quickly becomes unusable.</li> <li> <code>aria-live="polite"</code> queues updates instead of interrupting. Use <code>assertive</code> only for things that really need immediate attention, like errors.</li> </ul> <h3>Handling Incomplete States</h3> <p>Earlier, we inserted a “Response Stopped” label to the message when the stream stops mid-stream. Visually, that’s enough. But for a screen reader, that change needs to be announced.</p> <p>Since the message is inside a live region with <code>aria-live="polite"</code>, the label will be automatically announced as new content when it’s added to the DOM. The live region already handles the announcement, so no additional ARIA is needed on the label itself.</p> <p>The <strong>Retry</strong> button that appears next also needs context. If a screen reader simply says “Retry, button,” it’s not clear what action that refers to. You can fix that by adding an <code>aria-label</code> that includes the original question:</p> <pre><code>retryBtn.setAttribute( 'aria-label', `Retry: ${lastQuestion.slice(0, 60)}` ); </code></pre> <p>What you can do here is to set this label when the button appears, not on page load:</p> <pre><code>retryBtn.style.display = 'inline-block'; retryBtn.setAttribute( 'aria-label', `Retry: ${lastQuestion.slice(0, 60)}` ); </code></pre> <p>We also call <code>retryBtn.focus()</code> after stopping. That way, keyboard users don’t have to <code>Tab</code> around with the keyboard to find the next action.</p> <p><strong>Testing with assistive technology:</strong> Don’t rely on assumptions about how screen readers announce this. Test with actual tools like NVDA (Windows), JAWS (Windows), or VoiceOver (Mac/iOS). Browser DevTools can show you what’s exposed in the accessibility tree, but they can’t tell you how the content <em>sounds</em>. A real screen reader will reveal whether the announcement is happening at the right time and in the right way.</p> <h3>Account For Keyboard Navigation</h3> <p>The controls need to work with the keyboard while the UI is live, so the Stop button has to be reachable. For someone not using a mouse, Tab + Enter is the only way to cancel a running stream. </p> <p>Using <code>display: none</code> is fine for hiding buttons; it removes them from the tab order. The problem is using things like <code>opacity: 0</code> or <code>visibility: hidden</code>. Those hide elements visually, but they can still receive focus, so users end up tabbing onto something they can’t see.</p> <p>Use <code>:focus-visible</code> so the focus ring shows up for keyboard navigation, but not for mouse clicks:</p> <pre><code>btn:focus-visible { outline: 2px solid #1d9e75; outline-offset: 2px; } </code></pre> <p>The cursor inside the message should have <code>aria-hidden="true"</code>. It’s just visual. Without that, some screen readers try to read it as text, which gets distracting.</p> <h3>Motion Sensitivity</h3> <p>The typewriter effect we see in practically every AI interface produces constant motion. As we’ve already discussed, certain amounts of motion can be disabling. Thankfully, browsers expose <code>prefers-reduced-motion</code>, which detects a user’s motion preferences at the operating system level.</p> <p>For streaming, the best approach is simple: skip the animation and render the full response at once. The content stays the same, only without the motion.</p> <pre><code>const reducedMotion = window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches; </code></pre> <pre><code>if (reducedMotion) { initAIMsg(); for (const char of text) appendChar(char); if (cursorEl &amp;&amp; cursorEl.parentNode) cursorEl.remove(); done(); return; } tick(text); // normal animation </code></pre> <p>In CSS, the cursor blink also needs to stop. Despite being a minor detail, a blinking cursor element counts as <a href="https://www.w3.org/WAI/WCAG21/Understanding/three-flashes-or-below-threshold.html">flashing content</a>.</p> <pre><code>@media (prefers-reduced-motion: reduce) { .cursor { animation: none; opacity: 1; } } </code></pre> <p>There we go! The demo below puts everything from this article together, so you can see how these patterns work in practice. It also includes a reduced motion toggle, so you can test the instant render version easily.</p> <p><img src="https://files.smashing.media/articles/designing-stable-interfaces-streaming-content/6-accessible-streaming.png"></p> Conclusion <p>Streaming itself is mostly solved. Getting data from the server to the client is not the hard part anymore. What breaks is the UI on top of it.</p> <p>When content updates continuously, small things start to matter, like scroll behavior, layout stability, render timing, and how the interface responds to user actions. If those aren’t handled well, the UI feels unstable and hard to use.</p> <p>The patterns in this article fix that by:</p> <ul> <li>Keeping scroll position under the user’s control,</li> <li>Updating only what has changed,</li> <li>Batching renders per frame,</li> <li>Handling stop and retry actions, and</li> <li>Making the interface accessible.</li> </ul> <p>You don’t need all of these every time. But when streaming is involved, these are the places things usually go wrong.</p> <h3>Further Reading</h3> <ul> <li> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events">Using Server-Sent Events</a><br>How to open a connection, handle events, and reconnect when needed. This is the transport layer, everything here builds on.</li> <li> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Streams_API">Streams API</a><br>Streaming data directly from <code>fetch</code>. Useful when you need more control than SSE.</li> <li> <a href="https://developer.chrome.com/docs/devtools/performance">Chrome DevTools Performance panel</a><br>Helps you see layout recalculations and paint costs, so you can verify performance improvements.</li> <li>“<a href="https://web.dev/articles/dom-size-and-interactivity">How Large DOM Sizes Affect Interactivity, And What You Can Do About It</a>”, Jeremy Wagner<br>Why large DOM trees slow things down, and how to keep them under control in long streaming sessions.</li> </ul>