代码片段 / CSS 效果

Abstract User Avatar API

免费头像 API，根据用户名或首字母生成可定制颜色、字体和样式的用户头像。

Paper CSS

轻量 CSS 片段，让浏览器按 A3/A4/A5 等纸张尺寸排版并打印或导出 PDF。

shadcn/ui Custom Password Input

基于 shadcn/ui 的自定义密码输入框代码片段，支持显示/隐藏密码切换。

CSShake

纯 CSS 类库，为 DOM 元素添加多种抖动动画，如慢速、快速、旋转、透明度等。

CSS Grid Generator

一个开源在线工具，通过可视化操作快速生成 CSS Grid 布局代码。

CodeUI

收录知名网站真实使用的 HTML/CSS/JS 与 React 组件代码片段，开源可定制。

CSS Arrow Please

在线生成带箭头的 CSS 盒子代码，可自定义方向、大小、颜色和边框，适合制作提示框。

clerk-shadcn-theme

让 Clerk 的登录注册等组件自动匹配 shadcn/ui 风格的 CSS 主题，复制粘贴即可使用。

html-to-react-components

将 HTML 页面按 data-component 标注自动拆分为 React 组件，默认输出 TypeScript。

Infinite CSS Animations

一组可无限循环的纯 CSS 动画代码片段，如脉冲、旋转等，可直接复制到项目中使用。

clay.css

一个极简的 CSS 工具类与 SASS mixin，用于给任意 HTML 元素添加黏土拟态（Claymorphism）风格。

Data Pixels

用代码程序化生成像素画的 JS 库，附带跨平台桌面编辑器 Data Pixels Playground。

CSS Ribbon Generator

在线生成纯 CSS 角标丝带，可自定义样式并复制代码，用于突出显示新品或热门标签。

shadcn/svelte (VS Code Extension)

VS Code 扩展，在 Svelte 项目中直接插入 shadcn/svelte 组件与代码片段。

Web Dev Trick

分享免费 HTML/CSS/JS/PHP 小程序源码与教程的博客，含大量前端特效代码片段。

Animatopy

即用型 CSS 动画代码片段库，无需引入整个 animate.css，复制粘贴即可使用。

Obnoxious.css

一套夸张搞怪的 CSS 动画库，用简单类名给元素添加强调、抖动等吸睛动效。

uilang

面向网页设计师的极简 UI 编程语言，用类英文语法在 HTML 中实现点击交互。

CSS Loaders and Spinners

纯 CSS 加载动画与 Spinner 合集，无需图片依赖，可自由定制。

shadcn/ui snippets

VS Code 扩展，输入 cn 或 shadcn 即可快速插入 shadcn/ui 组件的导入与代码片段。

react-select with shadcn/ui

将 react-select 库与 shadcn/ui 风格结合的代码片段，让下拉选择器拥有统一的现代 UI 外观。

Saurabh Bhayana Open Source

Saurabh Bhayana 提供的免费可复制粘贴的 UI 组件，包含动画、玻璃拟态等效果。

RewampUI

免费开源 UI 区块与组件集合，提供可直接复用的界面代码片段。