I built a CSS shadow generator. Figuring out deployment took longer than writing the actual code.
I've always hated how existing CSS shadow generators work. They either cap you at 2 layers, shove ads everywhere, or ask for an email before letting you copy a simple box-shadow. Some of them have pop-ups that cover half
I've always hated how existing CSS shadow generators work. They either cap you at 2 layers, shove ads everywhere, or ask for an email before letting you copy a simple box-shadow. Some of them have pop-ups that cover half the screen the moment you open the page.
So I decided to build my own â one that actually respects the user.
I'm not a senior frontend developer, so I used Qwen AI to write the core logic. It took about two days. Ironically, getting the site live took way longer. DNS records, Netlify, custom domains... I've never deployed a website before, so figuring out how to put it on the internet was a real adventure on its own.
I tried to make the UI look modern and clean, avoiding that "tool built in 2010" vibe. Here's what you actually get compared to the usual alternatives:
- đĢī¸ Up to 10 shadow layers (most free tools cap at 2 or 3)
- đĄī¸ Zero pop-up ads, zero trackers, zero forced sign-ups. The site opens and just works.
- ⥠One-click CSS copy
- đī¸ Live preview with 3D tilt
- đĻ Export code in multiple formats: CSS, Tailwind, Swift, and Kotlin (Kotlin is still in beta, but it works)
- đ¨ Copy directly for Figma (also beta)
- đ Share URL â save your shadow config as a link and come back to it later
- âŦī¸ Download the CSS as a file if you prefer
- đ Full action history â your 5 most recent shadow designs are saved locally in the browser, and you can restore any of them with one click
- âŠī¸ Undo/redo support so you can step back if you mess up a slider
- đ Shadow presets (Dreamy, Brutal, Glass) if you don't want to start from scratch
- đ Dark UI that doesn't hurt your eyes at 2 AM
About the pricing and the timer you might see on the site
Right now, all Pro features are completely free as part of an early access offer. The countdown is just a placeholder for when this early period ends.
But here is the honest truth: this plan is not set in stone.
If I realize that locking certain features behind a paywall feels unfair or disrupts your workflow, I will simply keep them free. I have no intention of pulling the rug out from under people who rely on the tool.
Instead, if a paid tier ever happens, I will invent new, genuinely useful features specifically for it (like cloud sync, advanced team sharing, or a dedicated Figma plugin). The goal is for the paid version to earn its keep by adding new value, not by taking away what is already useful and free.
Core features like 10-layer shadows, one-click copy, live preview, and local history will always remain free, no matter what. No credit card required right now. No hidden limits. No annoying pop-ups. Just a clean tool that works.
I need your feedback!
I'm completely open to criticism, advice, or bug reports. If something feels clunky, the design is off, a feature is missing, or the code I generated with AI is ugly â let me know. Even a "this is useless" is useful feedback at this stage.
đ You can try the site here: https://shdwstudio.com
đ Safe CodePen sandbox: If you don't trust clicking random links (which is fair), here is a demo where you can see the clean CSS output it generates before going anywhere: CodePen Demo



Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes â full credit and traffic to the original publisher.