Free Online CSS Generators and HTML Tools
Generators for the CSS people usually write by trial and error: gradients, box shadows, grid and flexbox layouts, keyframe animations, clamp values for fluid type, triangles made out of borders. Each shows a live preview beside the rule it produces, which beats saving and reloading to move a shadow two pixels. Formatters and minifiers for HTML and CSS sit here too, for tidying up whatever you paste back in.
Tools in this category
- HTML Formatter Beautify and minify HTML with proper indentation in your browser.
- CSS Formatter Beautify and minify CSS with clean indentation right in your browser.
- JavaScript Formatter Beautify and pretty-print JavaScript with clean, consistent indentation right in your browser.
- Prettier Playground Format JavaScript, TypeScript, CSS, JSON, HTML, and Markdown with Prettier right in your browser, and tweak Prettier options live.
- CSS Grid Generator Visually build a CSS Grid layout with live preview and copy the generated grid CSS — set columns, rows, track sizes, gaps, and alignment.
- Flexbox Generator Visually build a CSS Flexbox layout with live preview and copy the generated flex CSS — set flex-direction, flex-wrap, justify-content, align-items, align-content, gap, and the number of items.
- CSS Triangle Generator Generate a CSS triangle with the classic border trick — pick a direction, set the size, choose a color, see a live preview, and copy the width:0; height:0; border CSS.
- CSS Transform Generator Build CSS transforms visually — translate, rotate, scale, skew, plus perspective and transform-origin. Drag the sliders, watch the live preview, and copy the ready transform CSS.
- CSS Animation Generator Build CSS keyframe animations visually. Pick a preset like fade, slide, bounce, pulse, spin, or shake, tune the duration, timing function, delay, iteration count, and direction, watch a live preview run the animation, and copy the full @keyframes and animation CSS.
- SVG to CSS Convert raw SVG markup into a CSS-ready data URI. Get both the base64 form and the more compact URL-encoded form, a copy-ready background-image declaration for each, the byte size of each encoding so you can pick the smaller one, and a live preview of your SVG.
- SVG Optimizer Paste SVG markup and optimize it with SVGO to strip comments, editor metadata, and redundant data. See the byte savings before and after, the percentage reduction, the minified SVG code, and a live preview, all in your browser.
- SVG Viewer Paste SVG markup or upload an SVG file to view it in a large preview with zoom, a switchable checkered, light, or dark background, and a readout of the intrinsic width, height, and viewBox. Download the SVG or export it as a PNG, all in your browser.
- SVG to Data URI Convert SVG markup into a bare data URI you can drop straight into an img src, an HTML attribute, a JavaScript string, or your browser address bar. Choose URL-encoded or Base64, copy the ready-to-use data URI or a complete img tag, and see a live preview, all in your browser.