10 Cool CodePen Demos (May 23)
Tags: codepen, css, javascript, webdev
Published: 2023-06-03 15:39:02

---
title: 10 Cool CodePen Demos (May 23)
published: true
description: A collection of 10 cool and exciting front-end demos shared on CodePen during May 2023
tags: codepen,css,javascript,webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tfw3mg1mfnyng0ca29pp.png
canonical_url: https://alvaromontoro.medium.com/10-cool-codepen-demos-may-2023-e9958b4e546c
---

## Flying through hexagons
[Amit Sheen](https://codepen.io/amit_sheen) is an expert on 3D in CSS. This demo would be a beautiful show of CSS in three dimensions, but the “Fly through” mode takes it to be one of the best demos you’ll see using `translated3D`.

{% codepen https://codepen.io/amit_sheen/pen/OJBwPgy %}

---


## 100% 3D CSS + HTML Render
Behind this long (and descriptive) title, there’s another amazing 3D CSS demo (and one of the best you’ll see in a long time, too!). [Jane Ori](https://codepen.io/propjockey) brings to life a whole city district in CSS and HTML (and a bit of JavaScript to control the camera). Beautiful art and implementation. Note: it works best on Firefox.

{% codepen https://codepen.io/propjockey/pen/KKGQpdK %}

---

## Filler
Some generative art to continue. In Filler, [Dillon](https://codepen.io/Dillo) creates colorful patterns that randomly multiply and cover the whole screen. I like how easy and pretty they look. And how they fit just perfectly.

{% codepen https://codepen.io/Dillo/pen/gOByXvV %}

---

## gradient-art
Using gradients and `mix-blend-mode`, we can get unbelievable effects, add an animated background-position, and things get even more impressive. For example, [Oscar Saharoy](https://codepen.io/oscarsaharoy) achieves a fantastic effect with just two gradients. Mind-blowing results.

{% codepen https://codepen.io/oscarsaharoy/pen/BaqEEBj %}

---

## 🌙 CSS Color Mix( ) demo
[Sasha](https://codepen.io/sashatran) shares a demo to showcase one of the latest CSS color functions: `color-mix()`. Notice that although the title mentions it only works on the latest Chrome, the demo will work on other browsers too.

{% codepen https://codepen.io/sashatran/pen/KKGxPeB %}

---

## Polaroid memories
This demo is clean and nice. [Håvard Brynjulfsen](https://codepen.io/havardob) created it as part of a CodePen challenge, and it is a nice demo of an excellent scrolling effect that can be achieved using `position:sticky`.

{% codepen https://codepen.io/havardob/pen/KKGZGLW %}

---

## CSS Rollin’ Road 🌞 (See ya Miami!)
[Jhey Tompkins](https://codepen.io/jh3y) brings one of his whimsical 3D demos with CSS and GSAP. This time it is a car riding along an “infinite” road. Move the mouse around to view the car from different angles, and click to change between day and night. It is fun.

{% codepen https://codepen.io/jh3y/pen/abRxZJE %}

---

## Ocean Sunrise 🌅 (548 bytes)
This SVG drawing is impressive, especially considering it was coded in less than 1KB. [Bence Szabo](https://codepen.io/finnhvman) is the author. Check other of his work with CSS and SVG. It’s great.

{% codepen https://codepen.io/finnhvman/pen/oNamzNj %}

---

## 3D parallax effect on hover
[Temani Afif](https://codepen.io/t_afif) builds many creative things with CSS (his collection of background patterns is great). In this demo, he shared a set of cards that provide a 3D effect using `clip-path` and `transform`.

{% codepen https://codepen.io/t_afif/pen/qBJyXNy %}

---

## columns and clamp css
This demo by [Itay Haephrati](https://codepen.io/itayko) shows how to create a responsive multi-column display with a handful of lines of code –and without using Flexbox or Grid, with the `columns` property alongside the `clamp()` function.

{% codepen https://codepen.io/itayko/pen/gOBorpq %}