Preview
生成的 CSS
梯度控制
流行预设
梯度示例
探索这些令人惊叹的渐变示例，为你的下一个项目获得灵感。 单击任何渐变效果，将其加载到生成器中。
日落胭脂
受美丽日落启发而产生的温暖渐变效果。
海风
平静的渐变效果，唤起沿海水域的感觉。
薄荷融合
清新现代的渐变效果，结合了薄荷色和天蓝色。
Lush Garden
充满活力的渐变效果，代表了大自然的美丽。
Cosmic Dream
灵感来自夜空的神奇渐变效果。
Golden Hour
捕捉黄昏精髓的温暖渐变效果。
渐变效果文档
什么是 CSS 梯度？
CSS 梯度可以在两种或多种颜色之间实现平滑过渡。 它们可用作元素的背景，有三种不同类型：
- 线性渐变：沿直线过渡颜色。
- 径向渐变：从中心点向外过渡颜色。
- 圆锥渐变：围绕圆心点过渡颜色。
如何使用渐变
使用我们的工具生成渐变后，就可以在项目中使用 CSS 代码了：
- Copy the CSS code from the generator.
- Paste it into your CSS file, or use it inline in your HTML elements.
- Apply the gradient to any element using the
backgroundproperty.
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}
- Use more than two colors for a more complex gradient effect.
- Adjust color positions to control where transitions occur.
- Combine multiple gradients for even more creative effects.
- For conic gradients, changing the center creates interesting patterns.
- Save your favorite gradients for later use.
Browser Support
CSS gradients are widely supported in modern browsers. However, older browsers like Internet Explorer may not render them correctly. Always provide a fallback color:
background: #4F46E5; /* Fallback color */
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}
Chrome
26+
Firefox
16+
Safari
6.1+
Edge
12+
About This Tool
Our CSS Gradient Generator is designed to help developers and designers create beautiful gradients effortlessly. Whether you're working on a website, application, or just want to experiment with colors, this tool makes it easy to generate the perfect gradient for your project.
Features
Easy to Use
Intuitive interface for creating gradients.
Responsive Design
可在所有尺寸的屏幕上完美运行。
可复制粘贴
立即获取简洁的 CSS 代码。
可用预设
从漂亮的预定义渐变开始。