Workbench 03 · 7 tools
CSS & Design Tools
Unit converters, ratio calculators and generators for front-end work.
- Tools
- 7
- Runs
- In your browser
- Uploads
- None
- Price
- Free, no sign-up
The tools
7 toolspx to rem
Turn pixel values from a design file into rem units for your CSS, at the root font size your site actually uses.
rem to px
Find out how many pixels a rem value really is, at the root font size your page uses.
Aspect ratio
Resize an image, a video or a layout box without stretching it: enter a ratio and one side, get the other.
16:9 calculator
Size a video, a thumbnail or a screen layout at 16:9: type one side and get the other.
4:3 calculator
Work out 4:3 sizes for slides, tablet layouts, photos and retro game captures in one step.
video bitrate
Pick a bitrate for your export settings, or work out how big a video will be and what bitrate fits a size limit.
box shadow
Design a box shadow by eye, stack as many as ten layers, and copy CSS you can paste straight into your stylesheet.
About this workbench
Front-end and video work is full of small sums that are easy to get slightly wrong: a pixel value in rem at a non-default root size, the height that keeps an image at 16:9, the bitrate that fits a video into a size limit. These calculators do the arithmetic instantly and give you values you can paste straight into your stylesheet or export settings. Everything runs locally in your browser, with no sign-up, and what you type is never uploaded. A few calculators keep their settings in the page address so you can share a result; the privacy policy explains what that address carries.
What is in the set:
- px to rem and rem to px converters with a configurable root font size, plus a reference table of common values.
- An aspect ratio calculator that solves for the missing width or height and reduces any size to its simplest ratio.
- Dedicated 16:9 and 4:3 calculators, each with the standard resolutions for that ratio: video and streaming for 16:9, presentations, photography and retro displays for 4:3.
- A video bitrate calculator that suggests a bitrate range for your resolution, frame rate and codec, and, for a given duration, turns a bitrate into a file size, or a size limit into a bitrate.
- A box-shadow generator with a live preview and copy-ready CSS.
Each page explains the formula behind its numbers, so you can check the result or work it out yourself next time. The output is plain CSS or plain numbers, with no framework or build step required.