Best Dev Tools for Designers in 2025

CSS generators, animation tools, and component libraries

19 tools

All tools

CSS Gradient logo

CSS Gradient

The ultimate CSS gradient generator.

Dev Tools
Free
Haikei logo

Haikei

Generate unique SVG design assets for your projects.

Dev Tools
Freemium
Animista logo

Animista

CSS animation library you can configure and copy.

Dev Tools
Free
Neumorphism.io logo

Neumorphism.io

Generate soft UI CSS code for neumorphic designs.

Dev Tools
Free
GSAP logo

GSAP

The professional animation library for the modern web.

Dev Tools
Freemium
Framer Motion logo

Framer Motion

Production-ready React animation library.

Dev Tools
Open Source
Lenis logo

Lenis

Smooth scroll library for buttery-fluid page experiences.

Dev Tools
Open Source
Whirl logo

Whirl

CSS loading animations ready to copy and paste.

Dev Tools
Free
Super logo

Super

Turn Notion pages into fast, customizable websites.

Dev Tools
Paid
Tailwind CSS logo

Tailwind CSS

A utility-first CSS framework for rapidly building UIs.

Dev Tools
Open Source
CSS Grid Generator logo

CSS Grid Generator

Visual CSS Grid layout builder by Sarah Drasner.

Dev Tools
Free
Ray.so logo

Ray.so

Create beautiful images of your code snippets.

Dev Tools
Free
Squircley logo

Squircley

SVG squircle generator for smooth-cornered shapes.

Dev Tools
Free
Panda CSS logo

Panda CSS

Type-safe, zero-runtime CSS-in-JS framework.

Dev Tools
Open Source
Codeimage logo

Codeimage

Open-source code screenshot tool with rich customization.

Dev Tools
Open Source
Flexbox Froggy logo

Flexbox Froggy

Learn CSS Flexbox by playing a game.

Dev Tools
Free
Webflow logo

Webflow

Build production websites visually, without writing code.

Dev Tools
Freemium
Flowbase logo

Flowbase

The largest Webflow components and template library.

Dev Tools
Freemium
SmoothShadow logo

SmoothShadow

Craft perfect CSS box shadows with easing curves.

Dev Tools
Free