CSS 渐变生成器
可视化设计渐变色彩，一键复制可直接粘贴进样式表的 CSS。
- 选择渐变类型：线性、放射或锥形。
- 拖动角度滑块调整线性或锥形渐变的方向。
- 点击色块打开颜色选择器，或直接输入 HEX 色码。
- 拖动位置滑块移动各颜色停止点。
- 点击「新增停止点」增加更多色彩，或点击 × 移除。
- 也可以直接套用预设渐变快速开始。
- 按下「复制」将 CSS 复制到剪贴板，粘贴进样式表即可使用。
提示：生成的 CSS 可直接粘贴到 background 或 background-image 属性，所有现代浏览器均兼容。
什么时候会用到？
- 为页头区域、按钮或卡片添加渐变背景。
- 在图片上叠加半透明渐变效果。
- 在定稿设计前快速探索配色方案。
线性、放射、锥形有什么区别？
线性 (linear-gradient) 沿直线按指定角度混合颜色。放射 (radial-gradient) 从中心向外以椭圆或圆形放射混合。锥形 (conic-gradient) 围绕中心点旋转混合，产生类似饼图的效果。
如何添加透明效果？
在 CSS 输出中将 HEX 替换为 rgba(99, 102, 241, 0)，或使用 transparent 关键字，所有现代浏览器均支持。
输出的 CSS 各浏览器都兼容吗？
线性与放射渐变在所有现代浏览器（Chrome、Firefox、Safari、Edge）无需前缀。锥形渐变所有常青浏览器均支持，但 Internet Explorer 不支持。
可以添加超过两个颜色停止点吗？
可以，点击「新增停止点」即可无限添加，CSS 规范对停止点数量没有限制。
图片格式怎么选？JPG、PNG、WebP、GIF 完整比较指南
同样是存图片，为什么 PNG 有时比 JPG 大好几倍？什么时候该用 WebP？GIF 是不是已经过时了？本文从压缩原理出发，一次搞清楚主流图片格式的差异与选择逻辑。
色彩对比度与无障碍设计：WCAG 标准、对比度计算原理与改善技巧
色彩对比度是无障碍网页设计的核心指标，影响弱视、色盲及一般用户在不同环境下的阅读体验。本文说明 WCAG 2.1 标准的 AA/AAA 等级、相对亮度计算公式，以及常见的色彩设计错误与修正策略。
色码完全指南：RGB、HEX、HSL 的转换原理与设计应用
前端工程师与设计师都离不开色码，但你真的了解 RGB、HEX、HSL 背后的原理吗？本文从光学物理到无障碍设计，完整解析各种色彩模型的换算逻辑、使用场景与配色实战技巧。
社媒贴文图片编辑全流程：尺寸规范、视觉一致性与导出设置
想让社媒内容更吸睛，关键不只在创意，还在尺寸、构图、色彩一致与导出设置。本文整理一套可复用的图片编辑流程，帮助你稳定产出高质量内容。
Markdown 语法完全指南：从入门到实战应用
Markdown 是现代写作者、开发者与内容创作者最常用的轻量级标记语言。本文从语法基础到进阶技巧，完整解析 Markdown 的使用方式与各平台应用实战。
PDF 合并、分割、压缩怎么做？日常文档整理完整攻略
收到一大份 PDF 只需要其中几页？多份报告要整合成一份发出？文件太大无法上传？本文拆解最常见的四种 PDF 操作，让你不需安装任何软件也能搞定。