Mesh Gradient Lab

This page previews the new CSS mesh gradient (left) against the existing Figma-exported SVG (right). Tweak values in src/styles/mesh-gradient.css under .mesh-gradient--solutions.

Tokens used: --pulse-400, --prism-400, --blueprint-400.

Controls

Blueprint 1 alpha

1.00

Blueprint 2 alpha

1.00

Prism 1 alpha

1.00

Prism 2 alpha

1.00

Highlight alpha

1.00

Blueprint 1 X

50%

Blueprint 1 Y

-4%

Blueprint 1 size X

300%

Blueprint 1 size Y

189%

Blueprint 1 stop

40%

Blueprint 2 X

50%

Blueprint 2 Y

11%

Blueprint 2 size X

300%

Blueprint 2 size Y

189%

Blueprint 2 stop

40%

Prism 1 X

Prism 1 Y

93%

Prism 1 size X

83%

Prism 1 size Y

231%

Prism 1 stop

41%

Prism 2 X

62%

Prism 2 Y

87%

Prism 2 size X

63%

Prism 2 size Y

300%

Prism 2 stop

48%

Highlight X

95%

Highlight Y

15%

Highlight size X

29%

Highlight size Y

29%

Highlight stop

97%

CSS (mesh-gradient--solutions)

SVG reference (/public/mesh-gradient-solutions.svg)

Hero-sized preview

This matches the Solutions hero sizing in src/app/(public)/solutions/page.tsx.