CSS tools
Beautify and minify CSS, compile SCSS, LESS and Stylus, and convert between them.
- CSS Background Color Generator Choose a fill colour and opacity, then copy a background rule that already tells you whether white or black text will read on it.
- CSS Background Image Generator Build a gradient or a repeating pattern out of two colours, preview it on a real box, and copy the background declarations.
- CSS Border Generator Dial in width, style, colour and which edges get a border, then copy a rule that has already been checked against a live box.
- CSS Border Radius Generator Round each corner independently and copy a border-radius rule that is already collapsed to its shortest legal form.
- CSS Box Shadow Generator Adjust offset, blur, spread and colour, watch the shadow land on a real element, then copy the finished rule.
- CSS Button Generator Compose a button from padding, radius, type and colour, hover it in the preview, and copy the CSS with matching markup.
- CSS Color Extractor List every colour used in a stylesheet, deduplicated and sorted by how often it appears.
- CSS Formatter Unminify and reindent CSS so every rule has one declaration per line, with syntax errors reported by line and column.
- CSS Minifier Compress CSS with csso, which removes whitespace, shortens values and merges duplicate rules without changing what the styles do.
- CSS Resize Generator Produce the rules that let a visitor drag a box bigger or smaller, complete with size limits and a preview you can actually drag.
- CSS to JavaScript Object Convert CSS rules into camelCased JavaScript objects for React inline styles and CSS-in-JS libraries.
- CSS to LESS Convert flat CSS into nested LESS, grouping child selectors under their parents with the & selector.
- CSS to SASS Converter Turn a plain stylesheet into the indented .sass syntax, with descendant rules nested and repeated colours pulled into variables.
- CSS to SCSS Turn flat CSS into nested SCSS by grouping selectors under their common parent.
- CSS to Stylus Converter Turn a plain stylesheet into Stylus, dropping the braces and semicolons and folding descendant rules into their parents.
- CSS Validator Find the syntax mistakes that make browsers silently drop CSS rules, each with a line and column.
- Cubic Bezier Generator Shape an easing curve from its two control points, watch a box move with it, and copy the timing function.
- Glassmorphism Generator Build a frosted glass panel from backdrop blur, a translucent tint and a hairline border, previewed over real colour.
- JavaScript Object to CSS Convert a React style object or CSS-in-JS map back into a plain stylesheet.
- LESS Beautifier Expand compressed or inconsistent LESS into indented blocks while leaving mixins, guards and operations exactly as written.
- LESS Compiler Compile LESS to CSS in the page, with the math mode exposed so old and new sources both build.
- LESS to CSS Compiler Compile LESS to CSS with the official less.js compiler, running locally with full support for variables, mixins and functions.
- LESS to SASS Converter Move a LESS stylesheet to the indented Sass syntax, with at-variables, dot mixins and nesting all translated.
- LESS to SCSS Converter Convert a LESS file to SCSS, keeping the braces and semicolons so the diff stays easy to review.
- LESS to Stylus Converter Rewrite a LESS stylesheet as Stylus, where variables need no sigil and structure comes from indentation alone.
- SASS Compiler Compile the brace free indented Sass dialect to CSS, with indentation errors reported by line.
- Sass to CSS Compiler Compile the indented Sass syntax, where blocks are defined by indentation instead of braces, to plain CSS.
- SASS to LESS Converter Take an indented .sass file and produce LESS with braces, semicolons and at-prefixed variables put back.
- SASS to SCSS Converter Convert an indented .sass file into .scss, adding the braces and semicolons back without changing a single value.
- SASS to Stylus Converter Convert indented Sass to Stylus, which keeps the same whitespace driven shape but spells variables and mixins differently.
- SCSS Beautifier Reindent tangled SCSS into readable nested blocks without touching your variables, mixins or selector order.
- SCSS Compiler Run Dart Sass on a snippet of SCSS and get plain CSS back, without installing a build chain first.
- SCSS to CSS Compiler Compile SCSS to CSS with the real Dart Sass compiler running in your browser, errors included.
- SCSS to LESS Converter Convert a braced SCSS file into LESS, translating variables, mixin definitions and include calls as it goes.
- SCSS to SASS Converter Strip the braces and semicolons out of an SCSS file and get the indented .sass form of exactly the same styles.
- SCSS to Stylus Converter Convert braced SCSS into indentation driven Stylus, with variables, mixins and nesting all carried across.
- Stylus Compiler Paste Stylus and get compiled CSS back, in either an expanded layout for reading or a compressed one for shipping.
- Stylus to CSS Converter Flatten a Stylus stylesheet into ordinary CSS so it can be dropped into a project with no preprocessor at all.
- Stylus to LESS Converter Rewrite a Stylus file as LESS, adding braces and semicolons back and putting the at sign in front of every variable.
- Stylus to SASS Converter Convert Stylus to the indented .sass syntax, which keeps the brace free look while moving you onto a maintained toolchain.
- Stylus to SCSS Converter Turn a Stylus stylesheet into SCSS, adding the punctuation back and renaming variables and mixin calls as it goes.
Other categories
- JSON tools
- XML tools
- YAML tools
- CSV and TSV tools
- HTML tools
- JavaScript tools
- SQL tools
- Code formatters
- Minifiers
- Validators
- Data converters
- Encoders and decoders
- Escape and unescape
- Hash and cryptography
- String and text tools
- Number tools
- Color tools
- Unit converters
- Date and time tools
- Generators
- Random data generators
- Image tools
- Compress and decompress
- Network and DNS tools
- Web and developer tools
- Chart makers
- Cheat sheets
- Fun text tools
- Calculators