# Shading

> GPU shaders in Pyzed: build them by wiring nodes in Pyzed Design, load .pzshad shader graphs from Python, or write WGSL by hand, and paint any widget with them.

Source: https://albakore.github.io/pyzed/shading/

A **shader** is a tiny program that decides the color of every pixel of a widget, many times per second, on the
graphics card. It is how Pyzed draws animated backgrounds, glowing effects, radar screens and game visuals without
slowing your app down. If you have used Godot's visual shaders or Unreal Engine's material editor, Pyzed's shader
graphs will feel familiar.

examples/showcase/shaders</code>." size="wide" />

```mermaid
flowchart LR
    nodes["Nodes in the Shader view"] --> file[".pzshad file"]
    code["pyzed.shading in Python"] --> file
    file --> wgsl["WGSL"]
    hand["WGSL written by hand"] --> widget
    wgsl --> widget["pz.shader widget"] --> gpu["GPU"]
```

## Start here

## Every node

The [node catalog](https://albakore.github.io/pyzed/shading/nodes/) describes all the nodes of a graph, by category, with their ports,
settings and an example each.

## Three ways to make one

| Way | For | Page |
| --- | --- | --- |
| **Nodes in the Shader view** | Everyone: wire boxes with the mouse and see the result on every node. | [The Shader view](https://albakore.github.io/pyzed/shading/shader-designer/) |
| **`pyzed.shading` in Python** | Generating or editing graphs from code, tests, tools. | [Shader graphs](https://albakore.github.io/pyzed/shading/shader-graphs/) |
| **WGSL by hand** | Full control, porting shaders from elsewhere. | [WGSL shaders](https://albakore.github.io/pyzed/shading/shaders/) |

All three end up as the same WGSL code on the GPU, so they are equally fast, and a `.pzshad` made with the mouse
can be changed from Python (and the other way round).

**Shaders need a GPU:**

On a machine without a usable graphics card, a shader widget draws its `fallback` color or gradient instead. Give
every shader a sensible fallback so your interface still reads well there.

## See them in action

pz.shader</code> in the component library.', href: '/pyzed/library/shader/', icon: 'puzzle' },
{ title: 'pyzed.shading API', text: 'Every class and function to load, build and edit graphs in code.', href: '/pyzed/reference/shading/', icon: 'list-format' },
]}
/>

**Status of this section:**

Shader graphs are new in Pyzed. Every page here describes what works today, and the node catalog is generated from
the code, so it always matches your version, with a capture of every node. Most recipes show their graph in the
Shader view; the rest can be built in a minute from their steps.