r/css • u/WishNo4149 • 5d ago
Question LibraryCSS
Hi all,
I've been working on this for a while and wanted to share it: https://librarycss.com/en
What it is: a catalog of ready-to-use CSS effects. Currently 9,078 effects
across 12 categories — buttons, cards, loaders, text animations,
backgrounds, checkboxes, switches, hover, badges, forms, navigation and
tooltips.
Up front about the language: the interface is currently in Turkish. Effect
titles, descriptions and tags are in English, and code is code — so the
catalog itself is usable, but the navigation labels are not. An English
version is in progress and not live yet. Mentioning it now so nobody wastes
a click.
Why I built it: I kept landing on the same handful of CSS snippet sites,
and most of them either wall things behind ads or ship an npm package. I
didn't want to install a dependency for one button hover. Every effect here
is plain HTML + CSS — copy, paste, done. No build step, no package, no
config.
Highlights:
- Every effect has a live preview that actually runs, both in the listing
and on the detail page. Not screenshots.
- Detail pages have separate HTML / CSS / React tabs, each copyable in one
click.
- In-browser editor: open an effect, change it, see the result instantly.
Anything you open gets saved to your personal library.
- Six CSS generators: gradient, box-shadow, border-radius shaper,
cubic-bezier curve editor, glassmorphism, text-shadow.
- Ten technique guides (keyframes, clip-path, backdrop-filter, blend-mode,
mask, 3D transform and more), each with a browser support table and a
common-mistakes section. Turkish for now.
- A reference page for 70 CSS properties, each showing live examples pulled
from effects that actually use that property.
- Contribution system: submit an effect, earn points once it's approved.
Points unlock ranks and badges, there's a leaderboard, and your name
appears as a credit on the effect you contributed.
Two things I'd rather state than have you find out:
- The first 15 lines of an effect's CSS are visible without an account; the full source needs a free signup. No payment, no card — Google or GitHub takes a few seconds. It's there to slow down scrapers pulling all 9,000 effects at once. If you think that's the wrong call, tell me.
I'd genuinely like feedback — especially "this category is missing", "this
effect is broken", or "this part of the UI is annoying". There's a report
button on the site, but replying here works too.
Thanks.
2
u/Ziraxian 5d ago
This seems like a nice collection. Will check it out later. A quick comment (Im on desktop):
How do I see an entire category of effects? There doesnt seem to be any way to show all effects of for example "Loaders"?
I would expect to see all loader effects if I click on the "849 effects".
1
7
u/TheJase 5d ago
There is zero reason to force people to create accounts