CSS工具/渐变生成器
渐变生成器
使用可视化编辑器创建美丽的CSS渐变
预览
控制
135°
#6366F1
0%
#8B5CF6
50%
#A855F7
100%
CSS代码
Loading...🎨创意预设
💡
专业提示
点击任意预设应用，然后自定义颜色和角度来创建你自己的作品。使用分享按钮将你的创作保存为URL。
CSS Gradient Guide
Learn how to use CSS gradients effectively
What is CSS Gradient?
CSS gradients let you display smooth transitions between two or more specified colors. They are generated by the browser, so they look great at any screen size and can be zoomed infinitely without losing quality.
Gradient Types
- Linear: Creates a gradient along a straight line. You can control the direction using angles (0-360°).
- Radial: Creates a gradient that radiates from a center point outward in a circular or elliptical shape.
- Conic: Creates a gradient with color transitions rotated around a center point, like a color wheel.
How to Use This Tool
- Select a gradient type (Linear, Radial, or Conic)
- Adjust the angle or direction using the slider
- Add, remove, or modify color stops
- Copy the generated CSS code to use in your project
Pro Tips
- Use complementary colors for vibrant gradients, or analogous colors for subtle transitions
- Add more color stops at similar positions to create sharper color boundaries
- Radial gradients work great for spotlight effects and button highlights
Browser Support
CSS gradients are supported in all modern browsers including Chrome, Firefox, Safari, and Edge. For older browsers, consider using a solid color fallback.
常见问题
线性渐变、径向渐变和锥形渐变有什么区别？
线性渐变沿直线方向变化颜色。径向渐变从中心点向外圆形扩散。锥形渐变围绕中心点旋转（像色轮一样）。线性适合背景，径向适合光照效果，锥形适合饼图或圆形进度条。
如何创建锐利的颜色边界（硬渐变）？
将两个颜色的停止位置设为相同值。例如：linear-gradient(red 50%, blue 50%)会在50%位置创建红蓝的锐利分界线而非渐变过渡。这可以用来创建条纹图案。
渐变可以重复吗？
可以使用repeating-linear-gradient()或repeating-radial-gradient()创建重复的渐变图案。例如：repeating-linear-gradient(45deg, red, red 10px, blue 10px, blue 20px)会创建对角条纹图案。
可以使用透明色吗？
可以使用transparent关键字或rgba()值来包含透明度。例如：linear-gradient(to right, rgba(0,0,0,0), black)会从透明渐变到黑色。这对于创建淡入效果或叠加层非常有用。
可以叠加多个渐变吗？
可以将多个渐变用逗号分隔作为background属性的值。例如：background: linear-gradient(...), radial-gradient(...);。先声明的渐变显示在上面，使用透明色可以让下层渐变透出来。