CSS 渐变生成器CSS Gradient Generator
可视化生成CSS渐变代码Visually generate CSS gradient code.
background: linear-gradient(135deg, #667eea, #764ba2);
预设渐变
关于 CSS 渐变生成器About CSS Gradient Generator
CSS 渐变能替代大量背景图片，既减小请求体积又保持任意分辨率下清晰。本工具可视化调整线性/径向渐变的颜色、角度与色标位置，实时生成可直接使用的 CSS 代码。CSS gradients replace countless background images — smaller payloads and crisp at any resolution. This tool visually adjusts linear/radial gradient colours, angle and stop positions, generating ready-to-use CSS code in real time.
使用方法How to Use
- 选择渐变类型：线性或径向。Choose the gradient type: linear or radial.
- 添加色标并调整每个色标的颜色与位置。Add colour stops and adjust each stop’s colour and position.
- 线性渐变可拖动或输入角度。For linear gradients, drag or type the angle.
- 复制生成的 background: linear-gradient(...) 代码到样式表。Copy the generated background: linear-gradient(...) code into your stylesheet.
常见问题FAQ
如何做出硬边（色块拼接）渐变？How do I make hard-edge gradients?
让相邻两个色标处于相同位置，即可得到清晰边界，常用于条纹、色块背景与进度条效果。Place two adjacent stops at the same position to get a sharp boundary — handy for stripes, colour blocks and progress bars.
支持三个以上颜色吗？Can I use more than three colours?
支持。添加多个色标后默认均匀分布，也可单独调整每个色标位置，做出彩虹、日落等复杂效果。Yes. Multiple stops distribute evenly by default and each position is adjustable, enabling rainbows, sunsets and more.
渐变需要加浏览器前缀吗？Do gradients need vendor prefixes?
现代浏览器均支持标准语法，无需 -webkit- 前缀；只有需要兼容极老浏览器时才考虑回退方案。Modern browsers fully support the standard syntax without -webkit- prefixes; only very old browsers need fallbacks.
相关阅读Related Reading
CSS box-shadow 从入门到拟物：多层阴影、内阴影与渲染性能CSS box-shadow From Basics to Skeuomorphism: Layered Shadows, Inset Shadows and Rendering Performance
`box-shadow` 是前端最常用的视觉工具之一，但五个参数的含义、多层叠加的技巧和性能陷阱并不总是被讲清楚。本文从语法拆解到拟物质感，再到什么时候该用图片代替阴影。`box-shadow` is one of the most-used visual tools in frontend, but the meaning of its five parameters, multi-layer stacking techniques and performance pitfalls are not always clearly explained. This article goes from syntax breakdown to skeuomorphic texture, and covers when to replace shadows with images.
CSS 渐变进阶：linear-gradient 的角度、色标位置与 5 个常用视觉效果Advanced CSS Gradients: Angles, Colour-Stop Positioning and 5 Useful Visual Effects
`linear-gradient` 看似简单，但角度基准、色标位置和多层叠加里藏着不少细节。本文从原理讲起，给出 5 个可直接复制的视觉效果代码，并讨论性能与兼容性。`linear-gradient` looks simple, but the angle baseline, colour-stop positions and multi-layer stacking hide plenty of detail. This article starts from first principles, gives five copy-paste-ready visual effects, and discusses performance and compatibility.