Percentage to PX Converter
Result: 500px
Calculation based on a base size of 1000 pixels.
How to Use the Converter?
Set the parent size (the length the % refers to)
Type a percentage to get pixels
Or type pixels to get the percentage
Percentage to PX: What the Percentage Is Relative To
A CSS percentage is never a fixed size on its own. It's a fraction of another length, and which length depends on the property. To convert a percentage to pixels you need that reference value: PX = percentage ÷ 100 × reference size.
For width, padding and margin, the reference is the width of the containing block. Even padding-top and margin-top use the container's width, not its height. For height, the reference is the containing block's height, and only when that height is set explicitly.
For font-size, the percentage is relative to the parent element's font size: font-size: 150% inside a 16px parent is 24px. line-height percentages use the element's own font size, and transform: translate() percentages use the element's own box size.
Enter the reference size in the parent size field above. It defaults to 1000px so the numbers are easy to read (50% = 500px, 12.5% = 125px). Set it to your real container width, for example 1280px, to get exact values for your layout.
What Each Percentage Is Relative To
The same percentage resolves to different pixel values depending on the property it's used on.
| Property | Percentage is relative to |
|---|---|
width, max-width, min-width | Width of the containing block |
padding, margin (all four sides) | Width of the containing block |
height, max-height, min-height | Height of the containing block (only if it is set explicitly) |
top / bottom, left / right | Height / width of the containing block |
font-size | Parent element's font size |
line-height | The element's own font size |
transform: translate() | The element's own border box |
border-radius | The element's own border box (width for horizontal, height for vertical radii) |
Percentage to PX at Common Container Widths
Pixel widths for a width, padding or margin percentage inside containers of typical breakpoint sizes.
| % | 320px | 768px | 1024px | 1280px | 1440px |
|---|---|---|---|---|---|
| 10% | 32px | 76.8px | 102.4px | 128px | 144px |
| 25% | 80px | 192px | 256px | 320px | 360px |
| 33.333% | 106.67px | 256px | 341.33px | 426.66px | 480px |
| 50% | 160px | 384px | 512px | 640px | 720px |
| 66.667% | 213.33px | 512px | 682.67px | 853.34px | 960px |
| 75% | 240px | 576px | 768px | 960px | 1080px |
| 100% | 320px | 768px | 1024px | 1280px | 1440px |
Common Percentages of a 1280px Container
5%
64px
10%
128px
20%
256px
25%
320px
33.333%
426.66px
50%
640px
75%
960px
100%
1280px
Quick Conversion Tips
Converting % to PX
Multiply the reference size by the percentage, then divide by 100. Example: 1280px × 25 ÷ 100 = 320px
Converting PX to %
Divide the pixel value by the reference size, then multiply by 100. Example: 320px ÷ 1280px × 100 = 25%
Learn More About CSS Units
Modern CSS Layout Techniques
Grid, Flexbox and relative units in practice: when percentages, fr units and REM each make a layout easier to maintain.
Read the guide →Related Converters
Percentage to PX: Frequently Asked Questions
How do I convert a percentage to pixels?
Multiply the reference size by the percentage and divide by 100. 25% of a 1200px container is 1200 × 25 ÷ 100 = 300px.
What is 100% in pixels?
100% equals the full reference size: the containing block's width for width, padding and margin, or the parent's font size for font-size. There's no single pixel value for 100% without knowing that reference.
Why is padding-top: 10% based on the width?
The CSS specification resolves percentage padding and margin on all four sides against the containing block's width. That's what makes the classic padding-top aspect-ratio trick work.
Why doesn't height: 50% do anything?
Percentage heights only resolve when the parent has an explicit height. If the parent's height depends on its content, the percentage behaves like auto.
How do I convert pixels to a percentage?
Divide the pixel value by the reference size and multiply by 100. 300px inside a 1200px container is 25%. Type into the Pixels field above to convert in that direction.