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()
Also searched as
- css formatter online
- css gradient generator
- css box shadow generator
- css flexbox generator
- css grid generator
- px to rem converter
- css clamp generator fluid typography
- css specificity calculator
- cubic bezier easing generator
- css clip path generator
- css glassmorphism generator
- css media query builder
Frequently asked questions
How do I generate fluid typography with CSS clamp()?
Use the Clamp tab to enter minimum and maximum sizes and viewport widths, and it produces a clamp() value you can paste into your stylesheet.
How do I calculate CSS specificity?
Paste a selector into the Specificity tab to see its specificity score. The Cascade Visualizer tab helps with understanding which rule wins.
How do I convert px to rem in CSS?
The Unit Converter tab converts between px, rem, em and vw with a configurable base size.
Can I preview gradients, shadows and filters while I build them?
Yes, the gradient, box shadow, text shadow, filter, border radius, flexbox and grid builders all show a live preview next to the generated CSS.
Can I convert CSS to Tailwind classes?
The CSS ↔ Tailwind tab converts CSS declarations to Tailwind utility classes and back. Not every property has an exact equivalent, so check the result.
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.