5 CSS generators that beat asking ChatGPT

Five Tools for Generating CSS and Design Assets

The video showcases five web tools for creating CSS and design assets that can be difficult to describe in a prompt or write by hand.

1. mshr

Creates mesh gradients using layered radial gradients, since CSS doesn’t natively provide mesh gradients as a single feature. Gradients can include noise or animation. Built-in color pickers make them easy to adjust, and the finished code can be exported.

2. fffuel

Offers generators for SVG effects and textures, including grainy gradients, noise, wavy patterns, and holographic designs. It can add texture and visual detail to a mesh gradient or other design.

3. CSS Generators

A collection of CSS generators for elements such as ribbons, zigzag frames, scalloped edges, gradient shadows, speech bubbles, and torn-paper frames. This tool is attributed to Temani Afif.

4. Easing Wizard

Generates animation easing curves, including spring, bounce, damping, glide, and elastic effects. Its spring and bounce curves use CSS’s linear() function, so you don’t have to build those complex values manually.

5. DiceBear

Generates SVG avatars from a seed string. The same seed produces the same avatar, and multiple styles are available to suit different site designs.

Format and Source

This is a brief tool guide and demonstration, not a set of formal reviews or step-by-step tutorials. The presenter is Kevin Powell.