@ cssints/ 渐变-2d

mesh-gradient() 财务报告和审定财务报表 freeform-gradient() 页:1 点缀作为样式 cssints/plugin scope()。 。 。 . 在浏览器具有CSS功能的地方,样式使用. 如果没有,则运行时间会在画布上绘制梯度 将绘图设为背景. 还没有浏览器的功能,所以今天运行时间绘制出每个梯度 第一种颜料是freeform的堆叠光圈梯度或网状平均颜色.

现状(2026-10-17). CSSWG在2026-10-14日采用网格和自由成型梯度为cs-images-5,作为解释者 (单位:千美元)css-images-5/ 解释者/2d- 梯级数) (中文(简体) ). 这不是一个语法草案:语法仍然可以改变。 自由格式可以重新命名 diffusion-gradient(),也没有 函数的渲染规则是公开的,所以这里的图画都是 此软件包的算法,而不是浏览器或 以通通论者.

import { cn, color } from "cssints" with { type: "cssints" };
import { freeformGradient, meshGradient } from "@cssints/gradient-2d" with { type: "cssints" };

export const hero = cn(meshGradient("red, blue; green, yellow"), color("white"));
export const panel = freeformGradient("red top left, gold 4 60% 40%, yellow bottom right");

@layer _.k {
  ._gradient2d-core {
    background-image: var(--gradient2d-fallback);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  /* only where the browser parses the function */
  @supports (background-image: mesh-gradient(red, blue; green, yellow)) {
    ._gradient2d-core {
      background-image: var(--gradient2d-native);
    }
  }
  ._gradient2d-ff {
    background-image: var(--gradient2d-ff-fallback);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  @supports (background-image: freeform-gradient(red top left, blue bottom right)) {
    ._gradient2d-ff {
      background-image: var(--gradient2d-ff-native);
    }
  }
}
@layer _.a {
  ._1gxhgq5 {
    --gradient2d-native: mesh-gradient(red, blue; green, yellow);
    --gradient2d-fallback: linear-gradient(#918d78, #918d78);
    --gradient2d-data: '{"space":"oklab","rows":[[[1,0,0,1],[0,0,1,1]],[[0,0.502,0,1],[1,1,0,1]]]}';
  }
  ._1ps31mi {
    --gradient2d-ff-native: freeform-gradient(red top left, gold 4 60% 40%, yellow bottom right);
    --gradient2d-ff-fallback:
      radial-gradient(circle at 0% 0%, #ff0000, transparent),
      radial-gradient(circle at 60% 40%, #ffd700, transparent),
      radial-gradient(circle at 100% 100%, #ffff00, transparent);
    --gradient2d-ff-data: '{"space":"oklab","points":[[0,0,1,[1,0,0,1]],[0.6,0.4,4,[1,0.8431,0,1]],[1,1,1,[1,1,0,1]]]}';
  }
}

原生值是 spec 的文本,按所写. 数据是作为 sRGB 数字的站点或点,用于运行时间. 网络 倒回是它的站点的平均颜色,在oklab中;freeform's是一个光圈层每点.

语法

meshGradient(mesh)

• meshGradient(mesh),一个字符串: 站行,行相隔 ; 从盒子顶上往下, 停下来 , 从左边。 站为颜色 : red, (中文(简体) ), #888, (中文(简体) ), oklch(...),或 var(--token)。 。 。 .
• in oklab 或者说 in srgb 可能打开文本, 如规格所示: meshGradient("in oklab, red, blue; green, yellow")。 。 。 . 之后的颜色( A)in oklab red, ...)是网格外的颜色. 检查并保持原生价值,但 从未绘制 : 网格覆盖整个框 .
• 构建错误,在调用时:长度不同的行,少于2行的2站,这种颜色不解析, 另一种颜色的空间 比oklab或srgb, 和一个站台的位置, by 或者说 with。 。 。 .
• 尚未支持 : 职位(red 0% 0%控制点(by, (中文(简体) ), with) (中文(简体) ). 网格是固定的:角 坐在盒子的角落 其他站点的间隔均匀 位置需要网格扭曲 运行时间还没有完成 。 两者都是构建错误,而不是忽略.
• var(--token) 停下来 工作时 浏览器解决了它们: 绘图等待运行时间, 而第一个油漆没有 倒计时( e)--gradient2d-fallback: none) (中文(简体) ).

freeformGradient(points)

• freeformGradient(points),一个字符串:由 ,,每个 <color> <number>? <position>数字是 重点 传播以物配主, 位置是关键词 (单位:千美元)top left, (中文(简体) ), bottom right, (中文(简体) ), center)或一个或两个百分比,如: background-position 读出来 (单位:千美元)gold 4 60% 40%, (中文(简体) ), blue right 10% 百分之九十跨度).
• in oklab 或者说 in srgb 可能打开文本, 如规格所示: freeformGradient("in srgb, red 20% 30%, blue")。 。 。 . 该函数在点外没有颜色,因此方法后的一个颜色是构建错误.
• 构建错误,在调用时:一个没有位置的点,不到2分,两个点在同一位置(他们 重量都是无限的,一种不解析的颜色,一个长度(10px 框),行(与 多个位置,spec的未来工作)和外形.
• 尚未支持 : 线条、形状和长度,如上。 A 类 var(--token) 点工作:浏览器解决了它, 在 倒计时.

浏览器

• 土著: 任何浏览器中都没有任何功能. 已安装的 Chrome 中 test:browser 报告没有支持,所以 运行时间绘图 。 这个 @supports 测试是光谱最简单的例子: mesh-gradient(red, blue; green, yellow) 财务报告和审定财务报表 freeform-gradient(red top left, blue bottom right)。两者是分开决定的,所以一个有网点的浏览器,没有 freeform 只取网状树枝(_gradient2d-ff 这是它自己的一个阶级.
• 运行时间 位于每个浏览器列表目标包括BCD跟踪的浏览器的构建中. 表格在 @cssints/css-grammar 说每个这样的浏览器都缺少 css.types.gradient.mesh-gradient 财务报告和审定财务报表 css.types.gradient.freeform-gradient (碱性催化分解没有条目。) 当BCD或表格有一个带有其中之一的浏览器时 他们,运行时间的舰只 到没有它的目标.
• 运行时间需求 ResizeObserver,画布和 MutationObserver (如果页面有, 绘图工作).

运行时间

• 算法是这个包的,不是光谱,也不是Illustrator的. 网格是一个双子体(Catmull-Rom),穿过 4 × 4 相接点; 光谱插出一个有 Bézier 控制点的 收发器补丁, 此套件 没有模型。 自由格式为 反相相加权:一个点的颜色是站点的加权平均值, 车站的重量 spread / d²{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}在奥克莱布 光谱暗示了Delaunay三角形;freeform的渲染规则是 不公开(Josh Tumath, 2026-06-25),所以还没有浏览器或编辑同意. IDW被选在Delaunay上是因为 盒子的每个像素都有重量: 三角形只画出点状凸起的船体,留下其余部分 未定义的框(插入 docs/research/2d-gradients.md 正好看到了硬壳的边缘 这包是自己的 读取IDW渲染为柔软圆形blobs,一站一站,可分辨出传播. 画是近亲 显示浏览器的平面,而不是相同的表面。 以眼相较.
• 决议. 画布是盒子的四分之一(至少64px),浏览器将画布伸到盒子上. 一个大盒子 是柔软的,不是尖锐的。 在Chrome(安装的1,1000×600,6个缩放在800-1000px之间的中位数),帆布 250×150,新背景的时间,布局和PNG编码包括: 网格重绘为49ms,freeform in 34分钟。 自由形的相距在盒子的像素(高度/宽度)中被测量出,如同倒回的光圈层是, 所以一点的影响是屏幕上的一圈而不是椭圆.
• 尺寸. 3.9 kB 精密化,1.9 kB gziped for both rules(用滚倒的精密度测量 dist/runtime.mjs 联 合 国 vp pack 没有修改)。 单网格为 2.9 kB / 1.6 kB,与加入freeform 之前一样; @cssints/balance是因为 脚本为552字节.
• 数据与征兆. 运行时间读 --gradient2d-data 或者说 --gradient2d-ff-data (JSON在CSS字符串中). A 类 var() stop通过元素的隐藏子读取,从而继承元素的自定义属性,以及1×1画布 将计算出的颜色转换为 SRGB .
• 雷德劳. 在大小变化时,当一个元素得到标记类时(加入到页面中或稍后给予该类). 两种规则都有一个 ResizeObserver 和一个 MutationObserver (src/canvas.ts) (英语). 新画时已经过时 一个完成被放弃。 前一个 blob URL 已被取消 .
• 第一次涂料没有JS. Freeform的倒背是一叠光圈梯度,每点一层:它的颜色在 指向盒子最远一角的透明 它与自己的混合物(α,在 浏览器的空间, 不 spread / d² 在木板里,没有铺垫 var() 点,网点的 平均颜色不能.
• CSP. (中文(简体) ). 后退是一个 blob: URL (中文(简体) ). 页面需要 img-src blob: (或 img-src 与 blob: 用来画画.
• 苏维埃社会主义共和国. 跑步时间没有结果 document. 第一种涂料是内核倒置.

限制

• Freeform的倒置及其画作不同意像素的像素. 光线梯度的堆叠是一个低可靠性 首先涂料,而不是IDW规则:其混合在相距和浏览器的色彩空间中是线性的.
• 一个条件可以改变数据,运行时间在平分时读取. hover(meshGradient(...)) 输入数据 下级 :hover (已选中: 引擎打印它; 绘图在悬浮时不会改变, 只在下一个调整大小时才会改变 .
• 从页面上移除的元素保留了它的观察者和其blob URL 直到页面卸下。 页面罚款,不 用于一个长一页的应用软件,该应用将显示梯度;一个固定将观测清除.
• 打印 带光栅后退。 浏览器freeform的 PDF 是补丁阴影,不是位图,freeform是 大型在 PDF 中.
• 语法可以改变 直到光谱草稿, 和freeform的名字与它(diffusion-gradient()); 构建错误 信件指定他们拒绝的部分.

cd packages/gradient-2d && bun run test           # the maths in Node, the engine (kernels, data, errors, the runtime by targets)
cd packages/gradient-2d && bun run typecheck      # and the type tests
cd packages/gradient-2d && bun run test:browser   # Chrome (installed): both first paints, the pixels against the maths, resize, an added element