Design 8
Colors, gradients, shadows and image/SVG optimization
Diagrams, colour values and markup previews. Work that is visual by nature and benefits from seeing the result as you type it.
// Tools in this category
Color Converter
Convert a colour between HEX, RGB and HSL, with alpha support and sliders for hue, saturation and lightness. Everything updates live in your browser.
CSS Gradient Generator
Build a CSS gradient visually: linear, radial or conic, with as many colour stops as you need and a live preview. Copy the rule with one click.
Box Shadow Generator
Build a CSS box-shadow visually with offset, blur, spread, colour, alpha and inset, stacking multiple layers. Copy the rule with one click.
HTML Live Preview
Write HTML, CSS and JavaScript and see the result render as you type. No account, no saving, no setup — just a scratchpad that runs in your browser.
Markdown Preview
Write Markdown and see the rendered result as you type, including GFM tables, fenced code blocks, quotes and lists. Copy the HTML with one click.
Mermaid Preview
Write Mermaid code and preview flowcharts, sequence, class, state, ER, Gantt and pie diagrams live. Export SVG or PNG. Runs entirely in your browser.
SVG Optimizer
Remove the metadata Illustrator and Inkscape leave behind, strip comments and empty groups, and see the size saved, with a live preview of the result.
Image Optimizer
Compress and resize JPEG, PNG and WebP images entirely in your browser. Adjust quality, set dimensions with aspect ratio lock, and see the size saved.
// Diagrams that live next to the code
A diagram maintained as text is a diagram that survives. Mermaid syntax sits in a Markdown file, reviews like code, and renders on GitHub, in many wikis and in most documentation generators. The trade-off is that the syntax is easy to get subtly wrong, which is what a live preview solves: you see the rendered result and the parser error at the same time.
// Confidential architecture stays confidential
Internal system diagrams, database schemas and unreleased product flows are the kind of thing people hesitate to paste into an online renderer, and rightly so. Rendering here happens entirely in your browser with Mermaid strict security level, so nothing you type is transmitted. Drafts are kept in local storage on your own machine so a reload does not lose your work.
// What to reach for
The Mermaid Preview renders flowcharts, sequence, class, state, ER and Gantt diagrams as you type and exports SVG or PNG. The Color Converter moves between HEX, RGB and HSL with live sliders. The Gradient and Box Shadow generators build the CSS visually. The HTML and Markdown previews render as you type. The SVG Optimizer strips editor metadata, and the Image Optimizer compresses and resizes without uploading anything.
// Design: frequently asked questions
- Is my diagram source sent anywhere?
- No. The Mermaid library runs in your browser and produces the SVG locally. The editor content is kept in your browser local storage and nowhere else.
- Which Mermaid diagram types are supported?
- Flowchart, sequence, class, state, entity relationship, Gantt, pie and journey diagrams, following the syntax of the bundled Mermaid version.
// Other categories
Looking for something that is not here yet? The Japanese edition of this category lists 8 tools. The tools themselves work the same way regardless of the language of the surrounding page.