CSS Toolkit
How to use
What it does
Gathers a few practical but fiddly CSS tasks: converting HTML into equivalent JSX (saving you from renaming classes and self-closing tags by hand), generating a clip-path by dragging points visually, and producing complete style code for the popular glassmorphism and neumorphism looks. It also folds in interactive layout playgrounds (Flexbox, CSS Grid), a live box-shadow composer, and a CSS snippet generator, so the most common visual tweaks live in one place. Useful for getting a workable snippet quickly while building components.
How to use it
Modules share the top of the page. Paste markup into the HTML-to-JSX panel and copy the result from the right; the clip-path module offers a visual polygon editor with shape presets where dragging a vertex updates the preview live; the glassmorphism and neumorphism modules use sliders for blur, transparency, shadow and highlight, with the code box emitting CSS and the matching HTML structure in step. The Flexbox and CSS Grid playgrounds let you toggle properties and watch a live preview, the box-shadow composer stacks layered shadows with a copy-ready result, and the CSS generator emits snippets for common patterns.
FAQ
What differences does the HTML-to-JSX conversion handle for me?
The mechanical ones — class becoming className and self-closing tags being normalised. Paste markup on the left and the converted JSX appears on the right, ready to copy.
Is the generated glassmorphism and neumorphism code usable as is?
Yes — the sliders for blur, transparency, shadow and highlight feed a code box that emits the CSS with matching HTML, and you can fine-tune after pasting it into your project.
Related articles
More tools
Cheat sheets for shell, vim, tmux, systemd, Docker, K8s, nginx, git and more.
JSON formatter, LOC counter, TODO extractor, JSDoc comment generator, complexity estimator and code card, plus key-code, Unicode, URL-params, favicon and OG-image helpers.
Lot drawing, I Ching coin casting, daily tarot draw, Guandi lots, coin-flip decisions, dream dictionary and a fun fortune teller.
Flashcards, kana chart, stroke counts, idiom chain, poem fill-in and brain teasers.
Love match, horoscope, coin decision, habit/water/ledger/todo trackers, vCard/iCal, username/avatar/placeholder generators and more.
Charset/encoding viewer, HTML entity, JS sandbox, CSS unit converter, selector tester, markdown table, TOC, JSON query and viewport inspector.