Mesh gradients and shape dividers

Find examples at Mshr or generate your own with their web app.

Mesh gradients

Animated css mesh gradients for stylish backgrounds. This uses css @property, which is relatively new so provide a fallback for older browsers.

Shape dividers

Use Shape Divider app to create custom shapes to divide different sections of the page.

A mesh gradient and a shape divider

Komoptan!

The yada yada

No, I don't have a square to spare. I can't spare a square. No, I don't have a square to spare. I can't spare a square. Six years I've had this t-shirt. It's my best one. I call him: Golden Boy. Why do they call it Ovaltine? The mug is round. The jar is round. They should call it Roundtine. No, I don't have a square to spare. I can't spare a square. Why do they call it Ovaltine? The mug is round. The jar is round. They should call it Roundtine. Six years I've had this t-shirt. It's my best one. I call him: Golden Boy. Seinfeld Ipsum is a thing.

A mesh gradient and a shape divider

But now with clip-paths. Which is better because the divider-versions above are white polygons but with clip-path we remove the areas and see the page background.

to add an ugly background color to the page to see the difference between the two.