CSS Tools
Calcula especificidad CSS y transpila CSS a Tailwind. Herramientas CSS en el navegador.
CSS accent-color Form Previewer | Public Internet
Preview the CSS accent-color property on real checkboxes, radios, range sliders, and progress bars in light and dark schemes at once, then copy the one-line CSS.
Animate Height Auto Previewer | Public Internet
Animate any element to height: auto with native CSS. Toggle a live panel, compare interpolate-size and calc-size(), set the timing, and copy the working CSS.
CSS @property Generator | Public Internet
Generate a CSS @property rule (syntax, initial-value, inherits) and watch a registered property animate live, the one thing plain custom properties cannot do.
CSS Specificity Calculator | Public Internet
Calculate CSS selector specificity scores, compare rules, and debug cascade conflicts. Solve styling issues like unexpected overrides and priority puzzles.
CSS to Tailwind Converter | Public Internet
Paste CSS declarations and get a best-effort Tailwind class list. Supports spacing, colors, borders, and more with optional arbitrary values. Client-side.
CSS field-sizing Auto-Grow Previewer | Public Internet
See CSS field-sizing: content auto-grow a textarea and input with no JavaScript. Toggle it on and off, set min and max height, and copy the CSS.
Focus Ring (:focus-visible) Generator | Public Internet
Design accessible CSS focus rings with live previews on buttons, inputs, and links. Checks the WCAG 3:1 non-text contrast and outputs :focus-visible CSS.
CSS light-dark() Previewer & Generator | Public Internet
Define light and dark values for your color tokens and preview both schemes from one set of declarations. Toggle the scheme live and copy ready light-dark() CSS.
WCAG Target Size Checker (24px) | Public Internet
Check WCAG 2.5.8 target size: set button size, gap, and count and see the 24px circles WCAG draws, with a pass/fail that respects the spacing exception.
CSS :user-valid Form Previewer | Public Internet
Style the new :user-valid and :user-invalid pseudo-classes on a live form that only flags errors after a field is touched. Pick state colors and copy the CSS.