CSS, HTML & JS Tools

Generators, minifiers and beautifiers. · २४ tools

Border Radius GeneratorIndependently adjust all four corner radii for a uniform rounded rectangle, or an organic, asymmetric blob shape.Box Shadow GeneratorBuild a multi-layer CSS box-shadow with live preview, stacking as many independently editable shadow layers as you need.Clip Path GeneratorBuild a CSS clip-path from preset shapes (triangle, hexagon, star, arrow and more) or a custom inset, with live preview.CSS Animation GeneratorBuild a @keyframes animation from common motion presets (fade, slide, bounce, spin and more), with live preview and full CSS.CSS BeautifierReformat minified or messy CSS with consistent indentation, entirely in your browser using the js-beautify library.CSS Button GeneratorDesign a styled button (colours, radius, padding, shadow, hover and press states), with ready-to-use HTML + CSS output.CSS Filter GeneratorA playground for the full set of CSS filter functions (blur, brightness, contrast, grayscale and more), stacked and live-previewed.CSS Gradient GeneratorVisually build a linear, radial or conic gradient with any number of colour stops and copy the ready-to-use CSS.CSS Grid GeneratorAn interactive playground for grid-template-columns, rows and gap, with a live visual preview of grid items.CSS MinifierStrip comments and non-essential whitespace from CSS with a lightweight, dependency-free minifier, entirely in your browser.CSS Triangle GeneratorBuild a pure-CSS triangle using the classic border trick, adjustable direction, size and colour, no clip-path required.Cubic Bezier GeneratorA visual timing-function curve editor with live animation preview, outputting the exact CSS cubic-bezier() value.Flexbox GeneratorAn interactive playground for the full set of flex container properties, with a live visual preview of flex items.Glassmorphism GeneratorBuild a frosted-glass card effect (backdrop blur + translucent tint) with a live preview over a colourful background.HTML BeautifierReformat minified or messy HTML with consistent indentation, entirely in your browser using the js-beautify library.HTML Live EditorA minimal HTML/CSS/JS playground with an instantly updating sandboxed preview, like a lightweight CodePen in your browser.HTML MinifierStrip comments, whitespace and optional attribute quotes from HTML, entirely in your browser using html-minifier-terser.HTML Table GeneratorVisually build a simple HTML table (rows, columns, header, editable cells) and copy the clean, semantic markup.HTML to JSX ConverterConvert plain HTML markup to equivalent JSX: class to className, inline style strings to objects, void elements self-closed.JavaScript BeautifierReformat minified or messy JavaScript with consistent indentation, entirely in your browser using the js-beautify library.JavaScript MinifierMinify JavaScript using Terser, the same minifier most modern bundlers use internally, entirely in your browser.PX to REM ConverterBatch-convert between px and rem/em against a chosen root font size, with a quick multi-value converter.SVG OptimizerShrink an SVG’s file size by stripping metadata, comments and editor cruft using SVGO, entirely in your browser.Text Shadow GeneratorBuild a CSS text-shadow with live preview on your own text, adjusting offset, blur and colour visually.

Build gradients, shadows, glass effects, grids and animations visually and copy production-ready CSS. Minify or beautify HTML, CSS and JavaScript using the same engines professional build tools use.

Live previews update as you change settings, so you can see the result before pasting it into your project.

Categories

Your privacy choices