3D Paper Fold Text Effect in Pure CSS
A pen to create a CSS paper folding text effect
3D Paper Fold Text Effect in Pure CSS launched on December 11, 2017 with 10 votes, #902 of 2,482 launches that month and more than 50% of that year's launches. The site was still online in September 2026, 8 years on.
What it does
This is an experiment to create a paper folding text effect so that it looks like it’s coming off the page. This pen was made using the clip-path property.
This is an experiment by Mandy Michael to create a paper folding text effect so that it looks like it's coming off the page. This pen was made using the - posted under Coding by Fribly Editorial
Switch to the dark mode that's kinder on your eyes at night time. Switch to the light mode that's kinder on your eyes at day time. This is an experiment by Mandy Michael to create a paper folding text effect so that it looks like it’s coming off the page. This pen was made using the clip-path property. Fribly is a digital magazine where we will share useful and awesome stuff for your inspiration and benefit. We will hope to bring you daily resources and inspiration from all around the web. You just sit back and enjoy, and we will do all the search work for you. We will strive to find the best and most useful stuff out there. Your email address will not be published. Required…from fribly.com
Does a similar job
all alternatives →
3D Book Image CSS Generator2020 · 3d-book-css.netlify.app · ▲638Generate an animated 3D image from a book cover and export to HTML/CSS to embed on your website.
Eschersket.ch – a symmetry drawing app to design custom wrapping paper2019 · eschersket.ch · ▲386
CSS generator for a high-def glass effect2025 · glass3d.dev · ▲420There are lots of glassmorphism generators out there, but I wanted to push the effect further! This project is the result of months of experimenting with CSS property layering and battling browser quirks. Cross-browser compatibility is actually the reason I rely on ::before and ::after pseudo-elements to build up the effect. Move the color/opacity to the main element, and you’ll get weird color bleed on the corners in Chrome. Move the texture, and it muddles the bevel’s specular highlight. Move the bevel, and it gets blurred out by the backdrop-filter. And so on! Layers include: *…
Webflow 3D Transforms2015 · 3d-transforms.webflow.com · ▲318Build 3D interactions visually, without writing any code
I saw this cool navigation reveal, so I made a simple HTML+CSS versionFeb 2026 · github.com · ▲141Two clip-paths, over the navigation: - The first clip-path is a circle (top-left corner) - The second clip-path is a polygon, that acts like a ray (hardcoded, can be improved) The original work by Iventions Events https://iventions.com/ uses JavaScript, but I found CSS-only approach more fun Here's a demo and the codebase: https://github.com/Momciloo/fun-with-clip-path
Origami Simulator2018 · origamisimulator.org · ▲186Simulate how any origami crease pattern will fold
More dev tools this month
the category →
open-source IDE for thoughtful software design. Contribute to devdotfast/whiteboard development by creating an account on GitHub.
Dev tools · 28d ago · github.com
Contribute to reladraw/reladraw development by creating an account on GitHub.
Dev tools · 26d ago · github.com
OpenBot▲362Grok Bot alternative: free, local, open-source, multiplayer
Dev tools · 23d ago · openbot.run
Talanoa▲346Hi HN, I’m a fullstack developer, and honestly, I’ve lost count of how many side projects I’ve worked on over the years. But one idea kept coming back to me: a different kind of email client. It first came to me in 2014: “What if we could handle emails more like conversations?” Every year, I’d revisit this concept in my “Build Notes.” Ten years later, no one had built exactly what I had in mind — so I finally decided to do it myself. That’s how Talanoa was born. I wanted something focused on people, not timelines. I was tired of marking messages as unread just to remember to reply later, or…
Dev tools · 21d ago · talanoa.email
CoreSpeed▲332One MCP for everything your agents need: apps, memory, tools
Dev tools · 28d ago · corespeed.io
Source: Product Hunt launch ↗
Launched alongside, December 2017
the whole month →
Free multiplayer dogfights in your browser, the official reboot of the 2017 hit. Five aircraft, five game modes, no download.
Life & fun · 2017 · airma.sh
Nomad List 3.0▲1,252Find the best place to ❤️ live, 👩💻 work, and 💃 play
Life & fun · 2017 · nomads.com
An open source repository of design principles and methods
Work · 2017 · principles.design
Magic Leap One▲803Super stealthy AR startup reveals its first product
Life & fun · 2017 · magicleap.com