CSS Tools
CSS Tools
Format CSS; convert between px/rem/em/vw units; build gradients, box shadows, flexbox and grid layouts, border radii, transitions, and CSS filters — all with live preview.
Paste CSS containing --custom-property declarations to extract them.
Enter a CSS selector to calculate its specificity
cubic-bezier(0.4, 0, 0.2, 1)Use in CSS: transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
clamp(1rem, calc(1.6667vw + 0.6667rem), 2rem)Edits in either pane automatically convert to the other. When multiple CSS values map to the same class (e.g. border-radius: 50% and border-radius: 9999px both → rounded-full), converting back from Tailwind picks one canonical CSS value (9999px).
Compile mode: run LESS/SCSS/SASS/Stylus code and get CSS output. Convert mode: convert CSS to another preprocessor format (CSS is valid LESS/SCSS; Stylus uses indented syntax).
container-type element, and the @container rules on the left apply live as it resizes.<div#main.card.featured>Scrollable line 1 — resize or scroll this box to see the styled scrollbar.
Scrollable line 2 — resize or scroll this box to see the styled scrollbar.
Scrollable line 3 — resize or scroll this box to see the styled scrollbar.
Scrollable line 4 — resize or scroll this box to see the styled scrollbar.
Scrollable line 5 — resize or scroll this box to see the styled scrollbar.
Scrollable line 6 — resize or scroll this box to see the styled scrollbar.
Scrollable line 7 — resize or scroll this box to see the styled scrollbar.
Scrollable line 8 — resize or scroll this box to see the styled scrollbar.
Scrollable line 9 — resize or scroll this box to see the styled scrollbar.
Scrollable line 10 — resize or scroll this box to see the styled scrollbar.
Scrollable line 11 — resize or scroll this box to see the styled scrollbar.
Scrollable line 12 — resize or scroll this box to see the styled scrollbar.
Scrollable line 13 — resize or scroll this box to see the styled scrollbar.
Scrollable line 14 — resize or scroll this box to see the styled scrollbar.
Scrollable line 15 — resize or scroll this box to see the styled scrollbar.
Scrollable line 16 — resize or scroll this box to see the styled scrollbar.
Scrollable line 18 — resize or scroll this box to see the styled scrollbar.
Scrollable line 19 — resize or scroll this box to see the styled scrollbar.
Scrollable line 20 — resize or scroll this box to see the styled scrollbar.
Scrollable line 21 — resize or scroll this box to see the styled scrollbar.
Scrollable line 22 — resize or scroll this box to see the styled scrollbar.
Scrollable line 23 — resize or scroll this box to see the styled scrollbar.
Scrollable line 24 — resize or scroll this box to see the styled scrollbar.
Scrollable line 25 — resize or scroll this box to see the styled scrollbar.
Scrollable line 26 — resize or scroll this box to see the styled scrollbar.
Scrollable line 27 — resize or scroll this box to see the styled scrollbar.
Scrollable line 28 — resize or scroll this box to see the styled scrollbar.
Scrollable line 29 — resize or scroll this box to see the styled scrollbar.
Scrollable line 30 — resize or scroll this box to see the styled scrollbar.
animation-timeline yet — this is a newer CSS feature (Scroll-Driven Animations spec) with limited/recent browser support. The generated CSS below is still valid and will animate in supporting browsers (recent Chrome/Edge). No CSS yet
Paste CSS (or load the example) to check for duplicate selectors, !important overuse, empty rules, and overly-specific selectors.
Static pattern checks on the pasted CSS text — flags duplicate selectors (with the properties they conflict on), any use of !important, empty rule blocks, and selectors past a reasonable specificity threshold (ID + 2+ classes, or more than 4 combinator levels).
CSS Tools
Format CSS; convert between px/rem/em/vw units; build gradients, box shadows, flexbox and grid layouts, border radii, transitions, and CSS filters — all with live preview.
Common uses
- Build a linear gradient background
- Calculate a CSS specificity score
- Generate fluid typography with clamp()
Frequently asked questions
Can I use CSS Tools to build a linear gradient background?
Yes. CSS Tools can build a linear gradient background, directly in your browser.
Can I use CSS Tools to calculate a CSS specificity score?
Yes. CSS Tools can calculate a CSS specificity score, directly in your browser.
Can I use CSS Tools to generate fluid typography with clamp()?
Yes. CSS Tools can generate fluid typography with clamp(), directly in your browser.
Is my data uploaded to a server?
No. This tool runs entirely in your browser — your input is processed locally on your device and is never uploaded or stored on a server.