代码片段 / CSS 效果

Circle Loaders

24 个单色圆形加载动画，纯 CSS 与 SVG 实现，无依赖，支持减少动效偏好。

Transitions.dev

收录 43+ 精心制作的 UI 过渡动效，可复制粘贴或通过 AI 代理直接应用到代码库。

CSS Button Library

收录 99 个纯 CSS 悬停按钮效果，无需 JavaScript，点击即可复制代码。

Beautiful CSS buttons examples

92 个免费精美的 CSS 按钮示例，点击即可复制代码，直接用于网页项目。

Cursor Lab

28 款可实时调节的自定义鼠标光标，支持复制为 JS、React 或 CSS 代码。

CSS Layout

纯 CSS 实现的流行网页布局与模式集合，可直接复制使用。

Magic CSS Animations

一套轻量的 CSS 动画库，提供旋转、透视、滑动、炸弹等数十种即用动效类。

CSS Portal

提供大量 CSS/HTML 生成器、工具与代码示例的在线资源站，帮助开发者快速实现网页样式效果。

Shape Divider App

免费在线工具，快速生成响应式 SVG 形状分隔符，可自定义颜色、翻转、高度与宽度。

Blend

在线 CSS 渐变生成器，支持线性与径向渐变，实时预览并复制代码。

MetalForge

无需编写着色器代码，即可为 SwiftUI、React Native 和 Web 添加精美着色器与动画效果。

Gradient Buttons

收录数百款 CSS 渐变按钮，一键复制代码，悬停有动效。

Whirl

一个纯 CSS 加载动画合集，用伪元素实现，可单独引入或复制修改。

CSS Scan Box Shadow Examples

95 个精选 CSS box-shadow 阴影示例，点击即可复制代码，免费使用。

Dialectcn

一个 shadcn 预设目录，收录品牌灵感、社区投稿和随机生成的配色与排版预设，复制即用。

CSSnippets

300+ 可直接复制的 HTML、React、CSS 与 Tailwind 组件代码片段，涵盖按钮、卡片、表单等。

Modern Fluid Typography Editor

用 CSS clamp() 生成流体排版代码的在线编辑器，可实时微调字号缩放行为。

CSS Shadow Gradients Generator

纯 CSS 实现的渐变阴影生成器，通过伪元素和模糊效果为元素添加彩色渐变阴影。

Background Snippets

现代背景效果代码片段集合，复制粘贴即可使用，基于 Tailwind CSS。

Gradient Picker

基于 Shadcn UI、Radix UI 和 Tailwind CSS 构建的渐变选择器组件，可生成渐变与纯色主题。

pocoloco

在线生成动态渐变背景，类似 Stripe 风格，可导出代码用于网站。

AngryTools

免费在线前端开发工具集，提供渐变、Flexbox、Grid、CSS 动画等生成器。

Icono

纯 CSS 实现的图标库，无需外部资源，每个标签即可变成一个图标。

Scrollbar.app

在线可视化编辑 CSS 滚动条样式的工具，实时预览并生成代码。