WebToolsPlanet
Converter Tools

Percent to PX Converter

Enter CSS percentage values and get the equivalent pixel values instantly. Set the parent element size — default is 16px — and convert single values or a bulk list at once.

Last updated: May 21, 2026

Client-Side Processing
Input Data Stays on Device
Instant Local Execution
Something wrong with this tool? Report it

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is Percent to PX Converter?

CSS percentage values are relative to a parent element's size. Converting from percent back to pixels is useful when you need the actual rendered pixel size of an element, or when working with design tools that work in absolute px values.

The formula is: **px = (% ÷ 100) × base**. So 150% at a 16px base = 24px. For font sizes, the base is the parent's font size. For widths, the base is the parent's width.

How to Use Percent to PX Converter

1

Enter one or more percent values in the input box (comma or newline separated)

2

Set the parent element size to match your context

3

Copy individual results or the full output

4

Use the reference table for common percent to px lookups

Common Use Cases

  • Developers converting percentage-based font sizes to px for design review.
  • Front-end engineers debugging computed pixel sizes from percent-based CSS.
  • Teams auditing responsive stylesheets to understand actual pixel rendering.
  • Designers receiving percent values from CSS and converting them to px measurements.
  • Students learning how percent values translate to fixed pixel sizes.
  • Developers migrating from percent to rem for more consistent CSS unit usage.

Example Input and Output

Convert common CSS percent font sizes to px at the default 16px base.

Percent values
75
100
125
150
PX output
75% → 12px
100% → 16px
125% → 20px
150% → 24px

Privacy

All conversions run in your browser. No data is sent to any server.

Frequently Asked Questions

What base should I enter?

For font sizes, use the parent element's font size. If the body or html has a 16px font size, use 16. For widths, use the parent container's width in px.

Is 100% always equal to the base value?

Yes — 100% always equals the base you enter. 50% is half the base, 200% is double, and so on.

What is the difference between percent and EM for font sizes?

For font-size, percent and EM are equivalent: 100% = 1em, 50% = 0.5em. Both are relative to the parent element's font size. For other CSS properties, % and em behave differently.

Related Tools

Part of a Collection