Percentage to PX Converter
Live Preview
Width = 50%
How to convert percentage to pixels in CSS?
the percentage unit in CSS is relative to the size of the parent element. So, to calculate percentage to pixels you just have to multiply the percentage value you want to convert to the corresponding size of the parent element and divide it by 100.
Formula to convert percentage to pixel
Pixel (px) = Percentage (%) x Size of the parent element (in px) ÷ 100
Common Percentage to Pixel Conversions table if base size is 1200px
Pixels | Percentage |
1% | 12px |
2% | 24px |
3% | 36px |
4% | 48px |
5% | 60px |
6% | 72px |
7% | 84px |
8% | 96px |
9% | 108px |
10% | 120px |
11% | 132px |
12% | 144px |
13% | 156px |
14% | 168px |
15% | 180px |
16% | 192px |
17% | 204px |
18% | 216px |
19% | 228px |
20% | 240px |
21% | 252px |
22% | 264px |
Pixels | Percentage |
23% | 276px |
24% | 288px |
25% | 300px |
30% | 360px |
35% | 420px |
40% | 480px |
45% | 540px |
50% | 600px |
55% | 660px |
60% | 720px |
65% | 780px |
70% | 840px |
75% | 900px |
80% | 960px |
85% | 1020px |
90% | 1080px |
95% | 1140px |
100% | 1200px |
110% | 1320px |
120% | 1440px |
150% | 1800px |
200% | 2400px |