废话不多说，直接上干货。
中心区域蓝色正方形左上角的「Gradient Generator」翻译过来是「梯度发生器」的意思，但是这个翻译太生硬，毕竟是机翻。大家可以理解为「渐变样式生成器」。
点开它之后，会跳转到渐变设置的操作面板中，以功能来理解的话，可以分为上图所示一样的两大版块。左边是颜色设置版块，它的数值将影响其右边的代码；而右边是代码生成结果区域，生成的代码不可修改，也就是说我们只需要操作左边颜色相关内容去形成结果即可。
左侧颜色面板中可以进行对默认色的快速选择，颜色设置卡的右侧按钮，是「快速变换渐变方向」的快捷按钮。这部分操作跟PS、XD、AI这种常用的软件没有差别。
色卡下面有各种可设置项：「Opacit（不透明度）」、「Color（颜色）」、「Location（位置）」、「Hue（色调）」、「Lightness（亮度）」、「Saturation（饱和度）」。都是跟平常用的软件一样的操作方式和效果。「Lightness（亮度）」下面有个「Reset（复位）」按钮，点击后是返回默认状态的。
2、Border Radius（边界半径）
点分页Tab上的Order Radius，可以跳转到下图这个面板：
操作面板分为两块：左侧设置、右侧预览+代码生成。其实叫它「边界半径」有点儿笼统，不便于理解，我更喜欢把它形容成「盒子生成器」，至于原因，看完下面这个演示视频大家就能明白了：
3、Noise Texture（噪点纹理）
网站中噪点纹理的概念跟平常我们认知里的噪点一样，只不过在PS里它叫「杂色」。
操作面板同样也是左右两侧。噪点的数值相对来说就简单一点了，通过控制Noise Opacity（噪点不透明度）、Noise Density（噪点密度）来控制纹理效果。
通过Background Color（背景色）、Noise Color（噪点颜色）来实现色彩的变化。
不过噪点与上面的渐变、边界不同，它生成后是一个图片概念的素材。相当于我们用PS做了个杂色素材，所以可以进行Export noise transparent（导出支持不透明度）、Dimensions（大小）的设置。另外，打开Export noise transparent（导出支持不透明度）的话，能导出形同PNG图片一样的效果图。
设置好各项数值以后，如果你需要URL地址，则直接选中生成后的代码，然后Ctrl/Command+C即可。如果还需要导出图片的话，那就点一下灰色按钮Download Noise Texture（下载噪点纹理）即可自动下载到本地。
4、Box Shadow（盒子阴影）
用「矩形投影」来形容它对设计师同学来讲应该会更便于理解。
