Interactively visualize margin, border, padding and content.
Free · Runs in your browser · Last updated
Adjust margin, border, padding and content size with sliders and watch the CSS box model update live. Copy generated CSS instantly.
All processing for Box Model happens locally inside your browser using JavaScript. Your input is never uploaded to a server, logged, or shared with third parties.
Yes. Box Model is completely free for both personal and commercial projects. There are no usage limits, no sign-up, and no premium tier.
All processing happens locally in your browser using JavaScript. Your input is never uploaded to our servers, logged, or shared with any third party.
Once the page has loaded, the tool runs entirely client-side. You can disconnect from the internet and it will keep working in the same browser tab.
Box Model works in all modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, Brave, and Opera, on desktop and mobile.
No. Box Model runs in any modern web browser with no installation, browser extension, or account required.