CSS Units
- Free forever
- No sign-up
- Instant results
PX to Percentage Converter
Convert a pixel value to a percentage of its parent container. Enter both dimensions and get the CSS percentage back, ready to drop straight into a fluid layout.
Percentage value
—
When would you use this?
Percentage values in CSS are always relative to something, usually the parent container's width. This comes up all the time when you're translating a fixed-pixel design into a fluid layout. You know the element should be 240px wide inside a 960px container but what percentage is that? This calculator does the division for you and spits out the number ready to drop into your stylesheet.
Common PX → % values (16px base)
| Pixels | Percent | Common use |
|---|---|---|
| 1px | 6.25% | Hairline / tiny offset |
| 2px | 12.5% | Fine border / subtle detail |
| 4px | 25% | Small spacing unit |
| 6px | 37.5% | Tight spacing |
| 8px | 50% | Half base unit |
| 10px | 62.5% | Useful for 10px scaling trick |
| 12px | 75% | Smaller text / compact spacing |
| 16px | 100% | Browser default base |
| 18px | 112.5% | Slightly larger base size |
| 20px | 125% | Larger root size |
| 24px | 150% | Large accessibility base |
| 32px | 200% | Double base size |