Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196

7 Incredible CodePens to inspire your experimental CSS

Want to experiment with CSS but don't know where to start? Here are 7 of the coolest, experimental CodePenners to get your creative juices flowing!

Want to experiment with CSS but don’t know where to start? Here are 7 of the coolest, experimental CodePenners to get your creative juices flowing!


Sarah Drasner
Sarah is a senior UX engineer working at Trulia in San Francisco. She writes for CSS-Tricks and is working on a book about SVG animations. Sarah enjoys creating SVG and CSS animations coupled with awesome designs. She works across disciplines, uniting sound, interactivity and design to create some wonderful Pens.




Zach Saucier
Zach is a front-end developer studying at the University of Georgia. He’s also written for CSS-Tricks on CSS animations and spoken at Front-Trends on the same subject. His most popular project is asset-loading-effects: a way to feedback to the user how much assets have loaded and reveal them in more engaging ways.




Katy DeCorah
Katy is an explainer, helper and tinkerer from Albany, New York. She works at Mapbox working on the next generation of map design. You may have seen her posts online explaining topics that include CSS columns, how to use ::selection and many more. She also helps organise ela conf, a very well-received conference for women to gain confidence speaking and leading in the tech industry.




Hugo Darby-Brown
Hugo is a front-end developer who loves everything web-related. He’s been creating websites for 13 years and is a keen experimenter, which his CodePen profile demonstrates. He prides himself on his clean, readable code and elegant design. He specialises in responsive design, animations and transforms. His Pens often show off a variety of challenging techniques, which come together to create an impressive experience.




Ana Tudor
Ana likes three things: maths, cartoons and big cats. She often shares her findings on new CSS techniques through CodePen. This includes deep dives into gradients, transforms on SVGs, SVG shapes and filters to name a few. She’s a prominent and engaging speaker, and often contributes to the community by answering questions on Stack Overflow.




Julia Buhvalova
Julia is an open-source hero and CSS lover. She creates and maintains many of her own open-source projects including svg-fallback, grunt-svg-modify and grunt-prototyper. She also contributes to Frontender magazine, a Russian blog for frontenders. She lives in Moscow, Russia and has Twitter accounts in both Russian and English (@yoksel and @yoksel_en).




Una Kravets
Una is a front-end designer and technical writer who currently works at IBM. She co-hosts the Toolsday podcast discussing the latest in tech tools, has set up two Sass meetups and often speaks out at conferences for designers in open source. Una specialises in CSS performance as well as experiments in visual design and her CodePens features Sass and image effects.



And if you want to know what other amazing things you can do with CSS with just some experimenting, make sure you buy issue 248 of Web Designer now!