CSS渐变生成器
使用可视化编辑器创建漂亮的CSS线性和径向渐变
Gradient Settings
CSS Output
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
CSS Gradient Generator
Create beautiful linear and radial CSS gradients with a live preview. Add multiple color stops, adjust angles, and copy the ready-to-use CSS code in one click.
FAQ
What is a CSS gradient?
A CSS gradient is a smooth transition between two or more colors generated by the browser — no image file needed. Use background: linear-gradient() or radial-gradient().
How do I make a gradient with transparency?
Use rgba() or hsla() colors with an alpha value less than 1, or use the keyword 'transparent' as one of the color stops.
What is the difference between linear and radial gradients?
Linear gradients transition along a straight line (e.g. top to bottom). Radial gradients radiate outward from a center point in a circle or ellipse.
继续探索
您可能喜欢的其他 开发者工具…
JSON格式化工具
使用语法高亮和错误检测格式化、验证和压缩JSON
Base64编码/解码
将文本或文件编码为Base64，并将Base64字符串解码为可读文本
URL编码/解码
编码和解码URL组件和查询字符串参数
UUID生成器
生成随机UUID（v1、v4）或批量生成多个UUID
哈希生成器
从文本或文件生成MD5、SHA-1、SHA-256、SHA-512哈希
正则表达式测试器
实时匹配高亮测试正则表达式并提取分组
JWT解码器
解码和检查JSON Web Token — 查看header、payload并验证签名
HTML格式化工具
使用正确缩进和语法高亮格式化和美化HTML代码