设计神器CSS_Matic！在线快速免费生成图层样式CSS代码网站

admin

作为⽹⻚设计师，是需要对⼀些前端代码有⼀定程度的了解的，⾄少需要知道⾃⼰设计出来的样式，能不能被前端⼯程师⽤代码实现出来，否则显得⾃⼰⻘⽠蛋⼦不说，还可能拖慢项⽬进度被前端怼。

但也不是每位设计师都有时间有精⼒去学习、了解开发那些事的。不过下⾯要介绍的这款神器就可以解决以上的问题，再也不⽤为⾃⼰的设计是否能实现⽽迷茫。

神器介绍

CSS Matic 是由 Freepik 与 Thumit 联合开发的⼀款快速⽣成 CSS 样式的免费⽹站。可以针对渐变、矩形、噪点、投影这四种设计样式⽣成相应代码。只要在对应⾯板中设置各种数值，即可实时⽣成代码。并且这些功能都是免费且⽆需登录的哦～

01.Gradient Generator渐变样式⽣成器

中⼼区域蓝⾊正⽅形左上⻆的「Gradient Generator」翻译过来是「梯度发⽣器」的意思，但是这个翻译太⽣硬，毕竟是机翻。⼤家可以理解为「渐变样式⽣成器」。

点开它之后，会跳转到渐变设置的操作⾯板中，以功能来理解的话，可以分为上图所示⼀样的两⼤版块。左边是颜⾊设置版块，它的数值将影响其右边的代码；⽽右边是代码⽣成结果区域，⽣成的代码不可修改，也就是说我们只需要操作左边颜⾊相关内容去形成结果即可。

左侧颜⾊⾯板中可以进⾏对默认⾊的快速选择，颜⾊设置卡的右侧按钮，是「快速变换渐变⽅ 向」的快捷按钮。这部分操作跟 PS、XD、AI 这种常⽤的软件没有差别。

⾊卡下⾯有各种可设置项：「Opacit（不透明度）」、「Color（颜⾊）」、「Location（位 置）」、「Hue（⾊调）」、「Lightness（亮度）」、「Saturation（饱和度）」。 都是跟平常⽤的软件⼀样的操作⽅式和效果。「Lightness（亮度）」下⾯有个「Reset（复 位）」按钮，点击后是返回默认状态的，慎点。

除了左侧⾯板可以控制渐变⽅向以外，在右侧代码区域的上⽅：颜⾊预览区的右边有五个⽅向按钮，分别可以实现：向左、向下、向右下⻆、向右上⻆、中⼼向外五种⽅向定义。

细⼼的⼩伙伴可能已经发现了，右侧代码区域在我们每次操作之后，都会变化。也就是说，代码⽣成是实时的。效率极⾼。

代码在采集之前，可以对代码的规则做调整。CSS 可变换为 SASS、⾊值可以以 Hex、RGB、 RGBa、HSL、HSLa 格式来写、可以加 Comments（注释）以及⽣成 IE9 ⽀持规则。

当然了，SASS、注释和 IE9 ⽀持这种是更专业的开发⼈员关⼼的东⻄，设计师来讲可以不⽤太过在意。

采集代码的⽅式是：直接选中⽣成后的代码，然后 Ctrl/Command+C 即可。

Border Radius边界半径

点分⻚ Tab 上的 Order Radius，可以跳转到下图这个⾯板：

操作⾯板分为两块：左侧设置、右侧预览+代码⽣成。其实叫它「边界半径」有点⼉笼统，不便于理解，我更喜欢把它形容成「盒⼦⽣成器」，⾄于原因，看完下⾯这个演示GIF⼤家就能明⽩了：

它其实就是⼀个盒⼦，可以对盒⼦做圆⻆定义、描边⻛格变换以及⾊彩的变化。 圆⻆可统⼀修改，通过 All Corners 拖动滑块/键⼊数值。也可进⾏单⼀边⻆的设置，通过 Top Left、Top Right、Bottom Left、Bottom Right 四项即可。

描边的设置叫 Border Width（描边宽度），数值越⼤描边越粗。其下⽅的三项设置分别就是： Border Style（描边⻛格）、Border Color（描边颜⾊）、Background Color（背景⾊）。可 以根据实际需要去设置它们从⽽实现我们想要的样⼦。 采集代码的⽅式同样也是：直接选中⽣成后的代码，然后 Ctrl/Command+C 即可。

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（下载噪点纹理）即可⾃动下载到本地。

Box Shadow盒⼦阴影

⽤「矩形投影」来形容它对设计师同学来讲应该会更便于理解。

我们可以对这个矩形进⾏ Horizontal Length（⽔平⻓度）、Vertical Length（垂直⻓度）、 Blur Radius（模糊半径）、Spread Radius（扩散半径）、Shadow Color（阴影颜⾊）、 Background Color（背景⾊）、Box Color（盒⼦颜⾊）、Opacity（不透明度）、 Outline/Inset（外投影/内阴影切换）这九项设置。

结语

CSS Matic 不仅可以服务于⽹⻚设计师，刚⼊⾏或者想⼊⾏前端的同学也可以⽤它来熟悉代码。 其实这类⼯具的对有蓝湖的我们来说，更直观的意义在于：了解代码，从⽽减少沟通成本。相信⼤家在以后的⼯作中会⽤到它，所以赶快来试试吧～

神器地址：CSS Matic

https://cssmatic.com/