✨Effect Lab
Read the full guide完整技术长文 The one canvas setting that makes everything glow一个 canvas 设置,让所有东西都发光
🌈

Holographic Gradient 全息渐变

A four-stop linear gradient whose angle simply keeps counting up. 一个四色线性渐变,角度只是不停地往上加。

CSSlinear-gradientHue rotation
Live demo实时演示

Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。

How it works原理拆解

t increases by 0.5 every frame and is interpolated straight into the gradient angle. Nothing recalculates colours — the stops stay fixed while the whole band rotates, which is why the motion is smooth and costs almost nothing. It is the cheapest convincing holographic effect you can write. t 每帧加 0.5,直接插进渐变的 angle 里。颜色并没有重算——四个色标是固定的,转的是整条渐变带,所以既平滑又几乎不吃性能。这是最省性能、又最像全息的写法。

What to change可以改的地方

  • 1Slow t to 0.15 for a subtle sheen, or speed it to 2 for a psychedelic wash.
  • 2Add a second gradient layer with a different speed for interference.
  • 1t 降到 0.15 是低调的金属反光,提到 2 就成了迷幻水洗。
  • 2叠第二层速度不同的渐变,会产生干涉感。

Source code源码

Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑,不需要任何库。

holo.html