HTML / CSS tools
Beautify, minify, generate. kodilo has 21 free HTML / CSS tools, including HTML Formatter, CSS Formatter & Minifier, SVG to JSX, TSX & Vue and Box Shadow Generator, and more. Every tool runs entirely in your browser, with no sign-up and no data sent to a server.
- HTML FormatterBeautify and format HTML code.
- CSS Formatter & MinifierFormat and minify CSS stylesheets.
- SVG to JSX, TSX & VueTurn an SVG into a React or Vue component with size and color props.
- Box Shadow GeneratorGenerate CSS box-shadow values with a live preview.
- Gradient GeneratorGenerate CSS gradients with a live preview.
- CSS Grid GeneratorBuild a CSS grid layout visually and copy the code.
- Flexbox GeneratorBuild a CSS flexbox layout visually and copy the code.
- XML FormatterPretty-print or minify XML and catch well-formedness errors.
- Code MinifierMinify JavaScript, CSS or HTML and see how many bytes you saved.
- CSS clip-path EditorDrag handles to shape a polygon, circle, ellipse or inset clip-path and copy the CSS.
- CSS Keyframes GeneratorBuild @keyframes animations step by step with timing, iteration and a live preview.
- Media Query TesterSee which media queries match at any width, orientation, color scheme or pointer, with a live resizable preview.
- Fluid Clamp GeneratorMin and max sizes between two viewports turned into CSS clamp() values.
- Text Shadow GeneratorLayered text-shadow for soft, neon, retro or outline type.
- CSS Filter Generatorfilter and backdrop-filter functions tuned on a sample image.
- Border Radius GeneratorAll 8 border-radius values with drag handles for organic shapes.
- Scrollbar Stylerscrollbar-color and scrollbar-width with a ::-webkit-scrollbar fallback.
- CSS Triangle GeneratorTriangles in 8 directions with borders or clip-path.
- CSS Specificity Calculator(a, b, c) specificity for a list of selectors, sorted and explained.
- CSS Selector TesterPaste HTML, type a selector, see every match highlighted.
- Tailwind CSS ConverterCommon Tailwind utilities to plain CSS and back.