免费注册

CSS 渐变生成器

实时预览线性、径向或锥形渐变,调好后复制 CSS。

关于CSS 渐变生成器

CSS 渐变生成器让你看着效果调背景,不用对着数字盲改:首屏横幅从一个品牌色过渡到另一个,商品图后面一圈柔和的径向光晕,按钮上淡淡的光泽,或者用锥形渐变做饼图式的进度环。可以从预设开始,也可以从零开始,每改一处,预览都会马上更新,满意了再复制代码。

渐变类型有线性、径向和锥形三种,按类型调整角度、形状和位置。色标可以添加、删除和移动,控制每种颜色从哪里开始、到哪里结束。复制的 CSS 第一行是用第一个色标颜色写的纯色背景,即使渐变显示不出来,元素也有背景色,不会一片空白。颜色要精确到色值,可以先用颜色代码转换换算好。全部在浏览器里完成,不上传,也不限次数。

CSS 渐变生成器怎么用

  1. 1
    选渐变类型

    选线性、径向或锥形,或者从预设开始。

  2. 2
    调角度、形状和位置

    边调边看实时预览。

  3. 3
    编辑色标

    添加、删除、移动色标,直到过渡效果满意。

  4. 4
    复制 CSS

    把带后备颜色的代码复制到样式表里。

为什么用熊仔工匠

  • 三种渐变

    线性、径向、锥形,各有各的设置。

  • 色标随意改

    色标可以添加、删除,也能沿渐变移动位置。

  • 实时预览

    每一处改动马上看到效果。

  • 带后备颜色

    CSS 先写一行第一个颜色的纯色背景,渐变显示不了时也不会空白。

常见问题

CSS 渐变生成器常见问题

CSS 渐变背景怎么写?
选好类型,设置颜色和色标,把生成的 CSS 复制到样式表里即可,代码里已经带上纯色后备颜色。样式表准备上线时,可以用CSS 压缩再压小一点。
线性、径向、锥形渐变有什么区别?
线性沿一条直线按角度过渡,径向从中心点以圆形或椭圆向外扩散,锥形像钟表指针一样绕着中心点旋转过渡。
为什么 CSS 里多了一个纯色?
这是后备颜色:第一行用渐变的第一个颜色设置纯色背景,浏览器或邮件客户端画不出渐变时会显示这个颜色,不会是空白。
有现成的渐变可以用吗?
有。选一个预设,再改类型、角度和颜色,就成了你自己的渐变。
CSS 渐变生成器要收费吗?
免费。在浏览器里运行,不用注册,不限次数。
把CSS 渐变生成器分享给朋友打开浏览器就能用,对方不注册也能先试。

相关工具

HTML HTML 格式化把杂乱的 HTML 按层级缩进,一目了然。
JS JS 格式化美化压缩过或排版混乱的 JavaScript。
HEX 颜色代码转换颜色在 HEX、RGB、HSL、CMYK 之间互转,并检查对比度。
CRON Cron 表达式生成与解析生成 Cron 表达式,用大白话说明含义并列出接下来的执行时间。
CSS CSS 格式化把压缩过的 CSS 还原成整齐易读的样式。
CSS CSS 压缩压缩 CSS,让网页加载更快。
HTML HTML 压缩去掉注释和多余空白,压缩 HTML。
HTTP 在线 HTTP 请求测试向公开的接口发送 GET、POST 等请求,查看返回结果。