Omatsuri is a progressive web application with 12 open source frontend-focused tools. Omatsuri translates to «festival» from Japanese (お祭り) and here we have a small festival of applications.

Vitaly Rtishchev

Omatsuri

A visual tool that provides naming-suggestions for CSS classes using BEM naming convention.

Nils Binder

BEM Cheat Sheet

Flowgator takes your Webflow design and makes a commit to previously created repository. This way, you can track what changes have been done to the code and quickly copy/paste it into your project.

Export Webflow project to Github repository on autopilot. Just hit publish in Webflow Dashboard and HTML, CSS, JS, and images will be exported to Github.

Erbert

Flowgator

Hundreds of beautiful and responsive UI components, premade and ready to use for your next ReactJS project.

Made with Chakra UI and Framer Motion.

Saša Šijak

React UI Boutique

Cubic-bezier is a small web app that lets preview and compare different cubic-bezier CSS animations.

Lea Verou

Cubic-bezier

Tiny Tools is a huge list of CSS animation tools.

John Meguerian

Tiny Tools

Keyframes help you write better CSS. Create basic or complex CSS keyframe animations with a visual timeline editor similar to video-editing software, single or multi-layer box shadows just by moving some sliders, convert between hex and RGB, and save palettes.

Mitch Samuels

Keyframes

Test common easing curves on a range of interfaces. Or generate your own custom bezier curve.

Paul Macgregor

Easings

Animista is a tool that lets you play with a collection of pre-made CSS animations. Tweak them and get only those you will actually use.

Ana Travas

Animista

A tool that helps you determine the correct react-spring config for your animations.

Joost Kiens

React Spring visualizer

VS Code to Prism Themes is a small web tool that helps you convert your VS Code theme to Prism CSS or React components.

Sara Vieira

VS Code to Prism Themes

No matter if you are using TailwindCSS or just plain CSS, Gradient Designer helps you make beautiful gradients.

Jens Törnell

Gradient Designer

Create and configure an animated 3D book in CSS.

Sébastien Castiel

3D Book

Web Code Tools is a collection of useful tools for web developers, including CSS, HTML, microdata, JSON-LD, meta-tags, open graph, and more.

Jason Macfarlane

Web Code Tools

Embedded Google Fonts allows you to embed base64 encoded google fonts into CSS.

Amio Jin

Embedded Google Fonts

Shape Divider is a free tool to make it easier for designers and developers to export beautiful SVG shape dividers for their projects.

Gaurav Padia

Karam Sihra

Shape Divider

Box Shadows allows you to interactively create box shadows and get the CSS to generate them.

Mike McBride

David Leininger

Box Shadows

Click on an animation card to copy the CSS code.

Emil Kowalski

CSS Effects

Patternico is a web application that allows you to generate beautiful background patterns.

Patternico

Single out email clients and platforms using crowdsourced email development techniques.

Dylan Smith

How to Target Email Clients

CSS Layout is a collection of popular layouts and patterns made with CSS.

Phuoc Nguyen

CSS Layout

CSS 2 JS helps you transform between CSS, JavaScript objects, and JSX props.

CSS 2 JS

A CSS selector to plain English translator.

 Kitty Giraudel

Selectors Explained

Ratio Buddy helps you calculate CSS aspect ratio's.

Tristam Goch

Ratio Buddy

Create and export CSS code for a custom box with an arrow extending out from the side.

CSS Tools