https://github.com/ilukemagic/css-gradient-generator
css渐变生成器
https://github.com/ilukemagic/css-gradient-generator
Last synced: 11 months ago
JSON representation
css渐变生成器
- Host: GitHub
- URL: https://github.com/ilukemagic/css-gradient-generator
- Owner: ilukemagic
- Created: 2025-02-01T12:21:26.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-02-01T12:23:43.000Z (about 1 year ago)
- Last Synced: 2025-03-13T03:30:28.526Z (12 months ago)
- Language: TypeScript
- Homepage: https://css-gradient-generator-lake.vercel.app
- Size: 217 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CSS 渐变生成器
一个现代化的 CSS 渐变代码生成工具，帮助开发者和设计师快速创建和调试渐变效果。
## 功能特点
- 🎨 支持线性渐变和径向渐变
- 🎯 直观的颜色控制和位置调整
- 📋 一键复制生成的 CSS 代码
- 💾 本地保存渐变历史记录
- 🌓 深色模式支持
- 📱 响应式设计
- ⚡ 实时预览效果
## 技术栈
- Next.js 14
- TypeScript
- Tailwind CSS
- Framer Motion
- Zustand
- Shadcn/ui
## 开始使用
1. 克隆项目：
```bash
git clone https://github.com/bantangzm/css-gradient-generator.git
cd css-gradient-generator
```
2. 安装依赖：
```bash
npm install
```
3. 启动开发环境：
```bash
npm run dev
```
4. 在浏览器中打开 [http://localhost:3000](http://localhost:3000)
## 使用说明
1. 选择渐变类型（线性/径向）
2. 添加或调整颜色节点
3. 使用滑块调整角度或方向
4. 点击"保存当前"将喜欢的渐变保存到历史记录
5. 点击"复制代码"获取 CSS 代码
## 贡献指南
欢迎提交 Pull Request 或创建 Issue！
## 许可证
MIT License
## 部署
本项目可以轻松部署到 Vercel 平台：
[](https://vercel.com/new/clone?repository-url=https://github.com/yourusername/css-gradient-generator)