创建漂亮的线性和径向渐变,并获取可用于网页设计的CSS代码
现代浏览器都支持CSS渐变。对于IE浏览器,可能需要添加前缀或使用替代方案。
线性渐变沿着直线方向变化颜色,可以指定角度或方向。常用于按钮、背景和分隔线等元素。
background: linear-gradient(to right, #ff7e5f, #feb47b); background: linear-gradient(45deg, #ff7e5f, #feb47b);
径向渐变从中心点向外扩散颜色。可以是圆形或椭圆形,常用于创建聚光灯效果或自然光效果。
background: radial-gradient(circle, #ff7e5f, #feb47b); background: radial-gradient(ellipse at top, #ff7e5f, #feb47b);
锥形渐变围绕中心点旋转颜色,类似于色轮。适合创建饼图、色轮选择器等效果。
background: conic-gradient(#ff7e5f, #feb47b, #ff7e5f); background: conic-gradient(from 45deg, #ff7e5f, #feb47b);
颜色停止点定义渐变中颜色的位置。可以通过百分比或像素值指定位置。
/* 颜色在 20% 和 80% 位置 */ background: linear-gradient(to right, #ff7e5f 20%, #feb47b 80%); /* 硬边界渐变 */ background: linear-gradient(to right, #ff7e5f 50%, #feb47b 50%);