Configure CSS multi-column layouts with column count, gap, rule, and span properties with live preview.
This tool exposes the CSS multi-column properties (column-count, column-gap, column-rule, column-span) as form controls and rewrites both a CSS text block and a live rendered preview as you adjust them. The preview uses the browser's own column layout engine rather than a static mockup, so wrapping and rule placement match what you'd see in production. The part people get wrong most often: column-rule only draws the line between columns, not a border around the whole box, and column-span only affects block-level elements like headings or pull-quotes - applying it to inline text has no visible effect.
A concrete input and expected output from the current implementation.
Input
column-count: 3, column-gap: 2em, column-rule: 2px dashed #999
Expected output
.multicol {
column-count: 3;
column-gap: 2em;
column-rule: 2px dashed #999;
} Each control maps one-to-one onto its CSS property, and the rule width, style, and color fields combine into the column-rule shorthand, so the generated block is a direct translation of the form inputs.
Each field - column-count, column-gap, and the column-rule width/style/color trio - maps directly to a single CSS multi-column property. Adjusting any control immediately updates a generated CSS block and a preview pane that uses the browser's own column layout engine, so line-breaking and rule placement in the preview match what the same CSS would produce on a live page.
column-span is applied as a per-block toggle - typically to a heading or pull-quote - and only accepts none or all, forcing that element to break across every column. Because the browser balances content across the configured column-count by default, content that's too short to fill every column renders in fewer columns than the number set in the tool, even though the generated CSS still specifies the full column-count value.
This tool only sets column-count - it doesn't expose a column-width control - but the browser still balances content by default: if the text in the container is short, it renders in fewer columns than the configured column-count because there isn't enough content to fill every one. Adding more content brings the rendered count up to match what you configured.
Yes - the output is plain CSS multi-column properties (column-count, column-gap, column-rule, column-span) with no framework dependency. Paste the generated rule block onto your own container class or element selector; it works in any modern browser without extra markup, JavaScript, or a build step.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.