CSS3 渐变效果生成器

欢迎CSS3 渐变效果生成器！请注意本工具生成的渐变效果代码必须使用Webkit内核的Safari、Chrome，或Firefox浏览器才有效果。IE,Opera暂时不支持CSS3渐变。

渐变效果生成器

渐变方向

选择渐变的方向

渐变颜色

Add Swatch

添加渐变颜色

    渐变样本

    »生成随机渐变
    渐变背景的按钮

    代码

    							-webkit-gradient(
								linear
								left top,
								left bottom,
								color-stop(0.5, #333333),
								color-stop(0.8, #494949)
							)

    颜色选取器

    使用下面的颜色选择工具选取渐变的颜色。

    相关信息

    这是CSS3 渐变生成器可以为开发者和设计师生成强大的CSS3渐变代码。

    CSS3渐变在浏览器下相当于一幅图片，这意味着生成的渐变可以用于可以定义为图片的CSS属性中，可以设置的地方包括 background-image, mask, border, 或list-style 等。

    功能改进

    下面是未来可能添加并改进的功能，敬请期待。

    • 目前仅支持线性渐变linear gradients，Radial Gradients 稍后添加支持。
    • 添加对选择HEX或RGB颜色的功能。（已支持）

    参考信息

    Surfin' Safari 博客上关于Webkit对CSS3渐变的实现的介绍，以及苹果开发者联盟上的Apple Safari Visual Effects Guide: Gradients指引。

    还有Mozilla Firefox 3.6对CSS3渐变的实现。

    使用指引

    添加颜色 Add Icon
    点击图标可以添加颜色到渐变颜色版。
    删除颜色Remove Icon
    点击图标可以删除颜色到渐变颜色版。
    选择颜色 Swatch Example
    点击颜色版选中要更改的颜色，并在右边的颜色选取器中选择一个新的颜色。
    调整颜色位置 Position Slider
    使用每个颜色的相关滑块可以调整渐变的颜色位置
    调整渐变方向 Direction Controls
    通过方向控制可以调整渐变的颜色方向。除了常规的上下左右方向外，你可以定义一个特定的起始坐标和终结坐标。