10.8K ·GitHub
What is this?
A curated collection of pure-CSS demos and visual effects, organized by category (layout, shadows, gradients, filters, blend modes, 3D, animation, clip-path, SVG) so you can browse them for inspiration or to learn a specific CSS technique.
A curated collection of pure-CSS demos and visual effects, organized by category (layout, shadows, gradients, filters, blend modes, 3D, animation, clip-path, SVG) so you can browse them for inspiration or to learn a specific CSS technique.Is this a library I install, or just a browsable collection?It is not a library or package — it is a browsable gallery of standalone CSS demos and snippets grouped by topic, meant to be viewed and copied rather than imported into a project.
It is not a library or package — it is a browsable gallery of standalone CSS demos and snippets grouped by topic, meant to be viewed and copied rather than imported into a project.How do I view the examples?Each entry links to an online preview page where the effect runs live and the code can be inspected; a GitHub Page mirror is provided as a backup when the main links have certificate issues.
Each entry links to an online preview page where the effect runs live and the code can be inspected; a GitHub Page mirror is provided as a backup when the main links have certificate issues.Do I need JavaScript for these effects, or is it pure CSS?Most effects are implemented in pure CSS, using tricks like the hover, checked, and target pseudo-classes to fake interactivity without JS; a handful of entries rely on CSS-Doodle, a custom-element tool for generative patterns.
Most effects are implemented in pure CSS, using tricks like the hover, checked, and target pseudo-classes to fake interactivity without JS; a handful of entries rely on CSS-Doodle, a custom-element tool for generative patterns.Who is this collection useful for?It's aimed at frontend developers and designers who want reference examples of advanced CSS techniques (shadows, gradients, 3D transforms, blend modes) rather than a ready-made component library.
It's aimed at frontend developers and designers who want reference examples of advanced CSS techniques (shadows, gradients, 3D transforms, blend modes) rather than a ready-made component library.What is CSS-Doodle mentioned in some entries?CSS-Doodle is a custom HTML element/tool used in several demos to generate generative-art-style patterns and backgrounds purely with CSS.
CSS-Doodle is a custom HTML element/tool used in several demos to generate generative-art-style patterns and backgrounds purely with CSS.Why are there multiple demos for the same logo, like the TikTok/Douyin logo?The author intentionally shows several different techniques (box-shadow, mix-blend-mode, etc.) that each produce the same visual, to illustrate different CSS features side by side.
The author intentionally shows several different techniques (box-shadow, mix-blend-mode, etc.) that each produce the same visual, to illustrate different CSS features side by side.Does it include SVG techniques too, or only plain CSS?Yes, a dedicated SVG section covers things like feTurbulence filters and SVG hover line animations combined with CSS drop-shadow and blur.
Yes, a dedicated SVG section covers things like feTurbulence filters and SVG hover line animations combined with CSS drop-shadow and blur.What are similar projects?iCSS, galaxy, animate.css, Skills, mg-styles-15, flag-icons, design-resources-for-developers, frontend-dev-bookmarks
iCSS, galaxy, animate.css, Skills, mg-styles-15, flag-icons, design-resources-for-developers, frontend-dev-bookmarks