Percentage・PX Calculator
Convert percentage and PX based on parent size
Conversion Settings
Common Conversion Table
Parent Size: 1000px
| Percentage | PX Value |
|---|---|
5.0% | 50.0px |
10.0% | 100.0px |
20.0% | 200.0px |
25.0% | 250.0px |
33.3% | 333.3px |
50.0% | 500.0px |
66.7% | 666.7px |
75.0% | 750.0px |
80.0% | 800.0px |
90.0% | 900.0px |
100.0% | 1000.0px |
What is Percentage・PX Calculator?
A tool that converts between percentage (%) and pixels (px) in CSS. Based on a parent element's width, you can calculate how many pixels a percentage equals, or what percentage a pixel value represents. Useful when translating pixel values from design tools like Figma into code.
Key Features
- Bidirectional conversion: Percentage→PX and PX→Percentage
- Adjustable parent size: Change to any size
- Size presets: One-click selection of common breakpoints (320px, 768px, 1440px, etc.)
- Formula display: See the calculation process
- Copy function: One-click copy to clipboard
- Decimal precision: Choose 0–2 decimal places
- Preset table: Common percentage conversions at a glance
How to Use
- Enter parent element size or select from presets (default is 1000px)
- Input either percentage or pixel value
- The other value calculates automatically
- Click copy button to save result to clipboard
Examples
Converting a 720px element from your design tool to a percentage for a 1200px container. Enter 720px and you'll get 60%.
Finding the actual pixel width of a 33.33% column in a responsive grid. With a 1000px parent, that's 333.3px.
Changing a sidebar from 25% to a fixed width. For a 1440px container, that's 360px.
Formulas
Percentage to Pixels conversion:
px = (Percentage ÷ 100) × Parent Size
Example: 50% → (50 ÷ 100) × 1000px = 500px
Pixels to Percentage conversion:
% = (Pixels ÷ Parent Size) × 100
Example: 500px → (500 ÷ 1000px) × 100 = 50%
Preset Conversion Table
Check common percentage conversions at a glance.
| Percentage | When Parent is 1000px |
|---|---|
| 5% | 50px |
| 10% | 100px |
| 25% | 250px |
| 33.33% | 333.3px |
| 50% | 500px |
| 66.67% | 666.7px |
| 75% | 750px |
| 100% | 1000px |
Table values update automatically when you change the parent size.
FAQ
How should I choose decimal precision?
For layout work, 1 or 2 decimal places is enough. Pick 0 if you want clean integers, or 2 for finer adjustments.
What should I use for parent element size?
The actual container or viewport width. Try common breakpoints (320px, 768px, 1024px, 1440px) to visualize dimensions across different devices.