Shader library

Animated shaders, ready to paste.

Original WebGL backgrounds. Tune one live, then copy it as React, JavaScript or GLSL.

Browse shaders Read the docs

Interactive shaders

Each one responds to your cursor. Open one to tune it and copy the code.

Pick, tune, copy.

Pick
Find a look in the gallery and open it full size.
Tune
Change colours, speed, scale and seed. Presets give you a starting point.
Copy
Take it as a React component, plain JavaScript or raw GLSL. There is no package to install.

Speed1.00

<Lodestone
  className="absolute inset-0"
/>

Fast for the page, kind to the visitor.

Light on the page

No dependencies. Each export is one self-contained file.
One WebGL context draws every card in the gallery.
Shaders stop when they scroll out of view or the tab is hidden.

Considerate by default

Reduced motion is respected with a single still frame.
Resolution steps down by itself if frames start to drop.
Without WebGL, a static gradient takes its place.

Measuring this page.

Built something with Shadeon?

Shadeon is new. Projects and notes from developers who use it will be shown here.

Show us your project

Start with one background.

Browse shaders

Shader library

Animated shaders, ready to paste.

Original WebGL backgrounds. Tune one live, then copy it as React, JavaScript or GLSL.

Browse shaders Read the docs

Interactive shaders

Each one responds to your cursor. Open one to tune it and copy the code.

Event Horizon

Code

Fog Veil

Code

Ink Bloom

Code

Browse shaders

Pick, tune, copy.

Pick
Find a look in the gallery and open it full size.
Tune
Change colours, speed, scale and seed. Presets give you a starting point.
Copy
Take it as a React component, plain JavaScript or raw GLSL. There is no package to install.

Speed1.00

<Lodestone
  className="absolute inset-0"
/>

Fast for the page, kind to the visitor.

Light on the page

No dependencies. Each export is one self-contained file.
One WebGL context draws every card in the gallery.
Shaders stop when they scroll out of view or the tab is hidden.

Considerate by default

Reduced motion is respected with a single still frame.
Resolution steps down by itself if frames start to drop.
Without WebGL, a static gradient takes its place.

Measuring this page.

Built something with Shadeon?

Shadeon is new. Projects and notes from developers who use it will be shown here.

Show us your project

Start with one background.

Browse shaders

Animated shaders, ready to paste.

Interactive shaders

Event Horizon

Fog Veil

Ink Bloom

Pick, tune, copy.

Pick

Tune

Copy

Fast for the page, kind to the visitor.

Light on the page

Considerate by default

Built something with Shadeon?

Start with one background.

Animated shaders, ready to paste.

Interactive shaders

Event Horizon

Fog Veil

Ink Bloom

Pick, tune, copy.

Pick

Tune

Copy

Fast for the page, kind to the visitor.

Light on the page

Considerate by default

Built something with Shadeon?

Start with one background.