Utilities Tools
Useful CSS utility generators.
CSS Variables Generator
Create and organize CSS custom properties for your design system.
Media Query Generator
Generate responsive media queries for all device sizes.
Z-Index Visualizer
Visualize and manage z-index stacking contexts.
Container Query Generator
Create container queries for component-based responsive design.
CSS Reset Generator
Generate customized CSS reset or normalize stylesheets.
Specificity Calculator
Calculate and understand CSS selector specificity scores.
Minify & Beautify
Compress or format your CSS code for production and readability.
px to rem Converter
Convert between px and rem with a configurable base font size and a full 1–100px conversion table.
SCSS to CSS Compiler
Compile SCSS to CSS in the browser. Supports variables, nesting, & selector, and line comments.
LESS to CSS Compiler
Compile LESS to CSS in the browser. Supports @variables, nesting, & selector, and arithmetic.
HEX to RGB Converter
Convert HEX colors to RGB, RGBA, HSL, and CSS custom properties — with a bulk converter.
Image to Base64
Convert images (jpg, png, gif, svg, webp) to Base64 strings and CSS background-image snippets.
CSS Validator
Validate CSS in the browser — catch missing semicolons, unknown properties, and vendor prefixes.
CSS Cursor Viewer
Preview all 35 CSS cursor values on hover. Click any cursor to copy the CSS snippet.
nth-child Tester
Test :nth-child, :nth-of-type, and related selectors with a live visual grid.
Unused CSS Finder
Paste HTML and CSS to find and remove unused CSS rules. Shows byte savings.
Dark Mode Generator
Auto-generate dark mode CSS custom properties by inverting lightness. Manual overrides supported.
CSS to SCSS Converter
Convert flat CSS to nested SCSS with optional variable extraction and mixin detection.
SVG to CSS Converter
Convert SVG markup to CSS data URIs for background-image, mask, cursor, and list-style.
CSS to Tailwind Converter
Convert CSS declarations to Tailwind CSS utility classes with 200+ property mappings.
CSS Length Units Reference
Compare all CSS length units (px, em, rem, vw, vh, cqw…) with live pixel conversion.
Counter Style Preview
Preview CSS @counter-style systems — decimal, roman, alpha, emoji — with prefix/suffix controls.
Color Variable Generator
Generate CSS custom property color palettes in HEX, RGB, HSL, or raw formats for alpha support.