CodePen Archive
Statistics
Pens : 65
Views : 297.9K
Hearts : 6.5K
Comments : 178
Updated : March 29, 2026 at 1:38 PM BST
Name : S. Shahriar
Handle : @ShadowShahriar
Followers : 1.3K
Following : 185
Location : Dhaka, Bangladesh
Bio : Front-end Developer (UI) and Illustrator
Updated : December 27, 2025 at 2:51 AM BST
Archive
| Title | Views | Likes | Comments | Slug | Preview | Links |
|---|---|---|---|---|---|---|
| 📁 range-slider-progress-in-chrome Range Slider Progress in Chrome with pure CSS 🌟 |
47.4K | 386 | 2 | zYPPYrQ |
Image |   |
| 📁 css-animated-accordion CSS-only Accordion with Reveal Animation |
37.7K | 644 | 4 | LYgeNLB |
Image | |
| 📁 css-3d-guitar CSS 3D Guitar with 5 texture variation 🎸 |
18.1K | 334 | 9 | wvWLeWr |
Image |  |
| 📁 css-3d-chessboard CSS 3D Chess Board Model with Pieces ♟️ |
17.4K | 357 | 20 | JjXaOqe |
Image | |
| 📁 no-div-arduino-uno No DIV Arduino UNO with LCD Display and Animation 🚀 |
16.9K | 661 | 44 | pobqepZ |
Image | |
| 📁 css-dna CSS DNA 🧬 |
15.8K | 422 | 3 | eYgPjxX |
Image | |
| 📁 css-geometric-blooming-flower CSS Geometric Blooming Flower 🌻 |
15.2K | 448 | 0 | vYWXKpK |
Image | |
| 📁 css-stretchy-heading CSS Stretchy Heading 😄 |
13.4K | 215 | 0 | ZEXVLbB |
Image | |
| 📁 css-knob-widget CSS Knob widget with Range Slider ✨ |
10.5K | 150 | 0 | zYPePva |
Image |  |
| 📁 css-pseudo-commas CSS Pseudo Commas: Exploring comma rules in nouns and verbs |
9.4K | 149 | 2 | LYyvVjo |
Image | |
| 📁 css-3d-cake CSS 3D Cake 🍰 |
9K | 217 | 10 | ZEJerdX |
Image | |
| 📁 css-3d-donut CSS 3D Donut 🍩 |
8.3K | 128 | 2 | YzrbBXg |
Image | |
| 📁 motion-trail-pt-ii Motion Trail pt. II 🌠 |
6.9K | 308 | 9 | rNmWopY |
Image | |
| 📁 best-css-3d-cubiod-ever Best CSS 3D Cuboid Ever! |
6.7K | 164 | 3 | rNGJNwy |
Image | |
| 📁 css-scene-climate-change CSS Scene - Industrialization 🏭 and Climate Change 🌄 |
6K | 390 | 15 | PoGvrQv |
Image | |
| 📁 css-back-to-top Playing with Temani’s CSS-only Back-To-Top Button |
5.8K | 43 | 0 | jOGxvZq |
Image | |
| 📁 css-blob-maker CSS Blob Maker 🌈 |
5.8K | 170 | 0 | BaKdyMJ |
Image | |
| 📁 css-3d-kn95-mask CSS 3D KN95 Mask 😷 |
4.7K | 149 | 5 | PoNMMBW |
Image | |
| 📁 hover-for-fun Hover for Fun! 🌈 |
4.6K | 49 | 0 | XWaLPOv |
Image | |
| 📁 css-doodle CSS Doodle: An unexpected moment of surprise 🤭 |
4.5K | 111 | 2 | BaRKPZy |
Image | |
| 📁 fireworks-in-the-mind Fireworks in the mind 🎆 |
4.4K | 104 | 12 | QWMmwVW |
Image | |
| 📁 scss-animated-generative-pattern SCSS Animated Generative Pattern |
3.3K | 117 | 0 | XWzNBQO |
Image | |
| 📁 pastry-for-pritha Pastry for Pritha 🍰 |
3K | 121 | 0 | wvmjqxj |
Image | |
| 📁 no-div-sketch CSS No DIV Sketch Effect ✏️ |
2.6K | 26 | 0 | gOgNBrb |
Image | |
| 📁 rotating-checkerboard CSS Rotating Checkerboard Thingy |
2K | 16 | 0 | JjOPZGN |
Image | |
| 📁 scss-lerp-shading SCSS lerp-shading algorithm |
2K | 50 | 0 | mdpbgog |
Image | |
| 📁 css-night-mode-switch CSS Night Mode Switch 🌙 |
1.8K | 35 | 2 | ZEQPvMP |
Image | |
| 📁 css-3d-hashnode-logo CSS 3D Hashnode Logo 🔷 |
1.3K | 35 | 0 | RwLejpb |
Image | |
| 📁 css-pseudo-rings CSS Pseudo Rings ⭕ |
1.1K | 39 | 0 | oNGVeom |
Image | |
| 📁 motion-trail-pt-i Motion Trail pt. I 🌠 (formerly Marshmallow Comet Effect) |
987 | 41 | 2 | xxZJyXo |
Image | |
| 📁 css-3d-lowpoly-pyramid CSS 3D Lowpoly Pyramid (simplified) |
973 | 29 | 0 | JjMEQPq |
Image | |
| 📁 css-radio-group-animation CSS Radio Group with Subtle Animation |
948 | 34 | 0 | PoymNYm |
Image | |
| 📁 css-3d-headset CSS 3D Headset 🎧 |
767 | 30 | 2 | ExKJZvM |
Image | |
| 📁 css-codepen-logo CSS CodePen Logo |
736 | 14 | 0 | jOGgjXx |
Image | |
| 📁 animated-twitter-circle An Interactive Animated Twitter Circle |
672 | 27 | 0 | JjOybGV |
Image | |
| 📁 night-mode-switch-in-action Night Mode Switch 🌙 in action! |
666 | 21 | 0 | bGEXaNy |
Image | |
| 📁 css-circular-heart-pattern CSS Circular Heart Pattern |
640 | 20 | 3 | Yzrombj |
Image | |
| 📁 css-7-segment-digits CSS 7 Segment Digits |
608 | 20 | 0 | JjOvaEV |
Image | |
| 📁 css-3d-kiki-shapes CSS 3D “Kiki” Shapes |
606 | 18 | 0 | gOGrbev |
Image | |
| 📁 css-dna-loader CSS DNA Loader 🧬 |
534 | 33 | 3 | wvWmPEL |
Image | |
| 📁 css-3d-shaheed-minar CSS 3D Shaheed Minar 🌅 |
447 | 13 | 0 | BaKxrMw |
Image | |
| 📁 sass-hollow-n-gon Sass @function for hollow n-gon (clip-path) |
311 | 10 | 2 | GRMQWzj |
Image | |
| 📁 svg-flipping-checkerboard-pattern SVG-in-CSS Flipping Checkerboard Pattern |
251 | 13 | 2 | podoZKr |
Image | |
| 📁 svg-write-on SVG strike through text w/ write-on |
239 | 19 | 0 | eYWoGLL |
Image | |
| 📁 unicorns-around-circular-path-center Unicorns 🦄 around a circular path pointing towards the center |
219 | 6 | 0 | jOGjYVo |
Image | |
| 📁 css-sick-hover-effect Sick Hover effect simplified! |
203 | 8 | 0 | eYGjbJY |
Image | |
| 📁 css-3d-pentagon Coding a CSS 3D Pentagon from Scratch! (Batteries Included) |
179 | 5 | 6 | vYepQNa |
Image | |
| 📁 profile-css @ShadowShahriar’s Profile |
179 | 5 | 6 | BaKqggB |
Image | |
| 📁 box-shadow-circles Using box-shadow to place circles around a circular path |
177 | 5 | 0 | mdBoVyg |
Image | |
| 📁 no-div-jamstack-logo No DIV JAMstack Logo |
165 | 6 | 0 | GROReNa |
Image | |
| 📁 css-gradient-stroke Gradient Stroke simplified! |
160 | 9 | 0 | jOGKjze |
Image | |
| 📁 css-3d-starter CSS 3D Starter |
154 | 4 | 0 | vYeGYPG |
Image | |
| 📁 css-colorful-candies CSS Colorful Candies 🍬 |
142 | 9 | 1 | oNWKYaP |
Image | |
| 📁 sass-round-rectangles Sass @function to create Rounded Rectangles with CSS Gradients |
141 | 4 | 0 | vYWxzmO |
Image | |
| 📁 infinite-portals Infinite portals with finite DIVs 😅 |
136 | 15 | 2 | wvqXNwE |
Image | |
| 📁 unicorns-around-circular-path Unicorns 🦄 around a circular path |
124 | 3 | 0 | MWEMOgG |
Image | |
| 📁 3-div-css-3d-cubiod 3-DIV CSS 3D Cuboid |
118 | 7 | 0 | QWqrvzr |
Image | |
| 📁 scss-generative-triangles SCSS Generative Triangles |
115 | 5 | 0 | XWzNENq |
Image | |
| 📁 scss-generative-pattern SCSS Generative Pattern |
111 | 9 | 0 | RwjoybG |
Image | |
| 📁 extra-pseudo-elements Discovering Extra Pseudo-elements! 🤩 |
96 | 3 | 0 | bGoxGKa |
Image | |
| 📁 css-rotating-square-pattern (⚠ Chrome Only!) CSS Rotating Square Pattern w/ background-image |
88 | 4 | 0 | JjOjjYB |
Image | |
| 📁 svg-rotating-checkerboard-pattern (⚠ Rebound) SVG-in-CSS Rotating Checkerboard Pattern |
71 | 4 | 0 | KKyKwJE |
Image | |
| 📁 css-hashnode-logo CSS Hashnode Logo 🔷 |
67 | 5 | 0 | qBPMNQd |
Image | |
| 📁 sass-n-gon Sass @function to create n-gon shapes with clip-path |
40 | 3 | 5 | ExwmdgL |
Image | |
| 📁 sass-mixins Useful Sass Mixins and Functions |
31 | 2 | 0 | vYeGBbP |
Image |
API
Statistics are updated weekly.
License
All of my CodePen projects are licensed under the MIT license. You are free to do whatever you want with these projects (ethically, of course). In fact, I highly encourage you to use these projects as learning exercises. Recreate the problem-solving steps, study the techniques I employed, and brainstorm what could have been done better.
Please send me an email if you ever make something awesome with these. I really want to see your take on these projects. Also, you may want to include a link back to the original pens because it is the kind thing to do.