Guides›CSS gradients

CSS gradients

Glass reads CSS gradients on its own. Put an element with a gradient behind it, and there is nothing else to do.

.scene { background: linear-gradient(90deg, #e54d33, #2244cc); }

What to know

Glass takes a picture of the gradient and updates it when the element changes. For a gradient that animates, draw it on a canvas and call invalidate(). Safari can refuse to read this picture, and then a canvas or an image is the way to go.