For Squarespace custom code
Paste a Squarespace custom code block or a plain CSS snippet and see it rendered before you
touch anything. The tool reads both: an HTML section with its markup, or CSS on its own, which
is what most Squarespace edits are. Then copy the finished code straight back.
- Built for Squarespace custom code blocks
- Reads plain CSS and builds a preview from your class names
- Every declaration editable, including colours and !important
- Scaffold stays out of the code you copy
- Desktop, tablet and mobile preview
Edit Custom CSS
Add clean canvas space around an image and prepare square, portrait or landscape layouts
without stretching the original image.
- Exact output canvas size
- Common ratios plus your own sizes
- Colour or image backdrop
- Batch export as one ZIP
Open Image Padder
Resize images to exact pixel dimensions directly in your browser while preserving proportions
when needed.
- Target width, target height or both
- Lock aspect ratio
- Output format and quality
Resize an Image
Calculate matching image and layout dimensions while preserving an aspect ratio. Free browser
tool for designers and website creators.
- Simplify any dimension to a ratio
- Ratio plus width gives the height
- Ratio plus height gives the width
Calculate a Ratio
Clean, format and inspect HTML snippets before pasting them back into a website or template.
- Consistent indentation
- Remove empty lines and repeated whitespace
- Optional comment removal and minify
Clean HTML