Sol — Animated gradients

Sol allows you to create animated gradients, interactive backgrounds and custom shapes straight in Framer, and customize the details later. No more boring visuals!

What's included

Interactive:

🪟 Dot grids - interactive grids that respond to hover (or press on mobile). Customizable properties include rotation, color, offset, corner radius and more;

🌈 Gradients - several kinds of animated gradients (with some grain sprinkled on top). It's possible to use up to 16 colors;

🏁 Tiles - Grids that randomly animate. Perfect for backgrounds.

Shapes:

🫧 Blobs - organic shapes with infinite amount of variations;

🟧 Squircles - rounded rectangles, but smoother;

🌸 Supershapes - based on superformula, this generator allows you to generate stars, flowers, droplets and more using just 5 parameters;

🔶 Polygons -polygons with any number of sides. Sides can be bent inwards or outwards, creating a rounded or star-like shapes.

All the components are highly customizable, from color to shape, to easings. All the shapes support unlimited inner and outer shadows.

Dependency-free

Sol does not add any extra dependencies or JavaScript libraries to your Framer project, meaning that your website size will stay small. It is built using standard web technologies.

Pricing

The lifetime license for Sol costs 49 EUR.

FYI

Animated gradients and dot grids are based on WebGL. While it allows them to be highly performant, it also comes with one limitation: the maximum amount of those on a single canvas or website page should not exceed 8. Use them for hero moments, and have fun!