<p>Marie and Chris jump on to discuss some of the trends of what people are building on CodePen here, approximately halfway through 2025. </p>



<h3 class="wp-block-heading">New CSS!</h3>



<ul class="wp-block-list">
<li>Custom @functions (<a href="https://bsky.app/profile/una.im/post/3lwcfrkar7s2t">just landed</a>)</li>



<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/if">if() function</a></li>



<li>clip-path & <a href="https://css-tricks.com/better-css-shapes-using-shape-part-1-lines-and-arcs/">shape()</a></li>



<li>corner-shape and the <a href="https://frontendmasters.com/blog/understanding-css-corner-shape-and-the-power-of-the-superellipse/">superellipse</a></li>



<li><a href="https://codepen.io/spark/448">Scrolling stuff</a></li>



<li><a href="https://codepen.io/spark/464">The attr() power up</a></li>
</ul>



<h3 class="wp-block-heading">Hot Styles</h3>



<ul class="wp-block-list">
<li>Liquid glass (<a href="https://codepen.io/jh3y/pen/EajLxJV,">Jhey's demo</a>, <a href="https://codepen.io/spark/453">Spark)</a></li>



<li><strong><em>Hard</em></strong> glitch (<a href="https://codepen.io/fand/pen/YPXBwVd">CRT-like effect with VFX-JS</a>, <a href="https://codepen.io/jdillon/pen/azbaYqr">Glitchy button hover effect with VFX-JS</a>, <a href="https://codepen.io/filipz/pen/ogjWmPg">❍ Cinematic Glitch Slideshow</a>)</li>



<li>Holographics (<a href="https://codepen.io/HejChristian/pen/YPzLbYX">CSS Holographic Masks)</a></li>



<li>Grainy textures (<a href="https://codepen.io/thebabydino/pen/YPzNWoR">Grainy distorted interactive 1 gradient blobs</a>)</li>



<li>Innovative blurs (<a href="https://codepen.io/hexagoncircle/pen/wBBwmqo">wavy wobbly lava orb</a>, <a href="https://codepen.io/glitchworker/pen/jENZGOV">Bubbles Background Animation</a>)</li>



<li>New color spaces (<a href="https://codepen.io/tylersticka/pen/YPPKMNp,">OKLCH Swatch Example</a>, <a href="https://css-tricks.com/css-color-functions/">CSS Color Functions</a>, <a href="https://codepen.io/wakana-k/pen/qEBoPoO">CSS oklch Gradation</a>)</li>
</ul>



<h3 class="wp-block-heading">Hot Pens</h3>



<ul class="wp-block-list">
<li><a href="https://codepen.io/Petr-Knoll/pen/QwWLZdx">Petr Knoll’s Glass Button</a> (From February, well ahead of liquid glass) </li>



<li><a href="https://codepen.io/Mikhail-Bespalov/pen/JoPqYrz">Mike Bespalov’s Monospace ASCII art generator</a> (known to be “vibe coded”) </li>



<li><a href="https://codepen.io/cobra_winfrey/pen/ogvpYwv">Adam Kuhn’s Severance Lumon Macrodata Refinement</a></li>



<li><a href="https://codepen.io/ste-vg/pen/ByaQXvp">Steve Gardner’s “Who Needs Shaders”</a></li>
</ul>





<h2 class="wp-block-heading">Time Jumps</h2>

Podurama

Home

Trending

Personal

Your Podcasts

New Episodes

My Files

Favourite Episodes

Tags (Folders)

Recently Played

Bookmarks

Followed Playlists

406: Hot Trends of 2025

CodePen Radio

AI Chapters

AI Insights

Reviews