Skip to content

PX to REM Converter (and REM to PX)

Convert px to rem and rem to px with any root font size, turn every px value in a CSS snippet into rem at once, and look up a px to rem table with Tailwind spacing values.

px
rem

Convert CSS: px to rem

PX to REM table

pxremTailwind spacing

How to convert px to rem

Divide the pixel value by the root font size: rem = px ÷ root font size. With the browser default of 16px, 24px is 1.5rem and 8px is 0.5rem. To go back, multiply: px = rem × root font size.

  1. Set the root font size. Keep 16 unless your stylesheet changes the font-size of the html element.
  2. Type a value in Pixels or REM; the other field updates as you type.
  3. To convert a whole stylesheet, paste the CSS into the converter. Every px value becomes rem, and 1px hairline borders can stay in pixels.

Why use rem instead of px?

  • Accessibility: rem values follow the font size people choose in their browser settings. Text and spacing set in px ignore that preference.
  • Consistent scaling: change the root font size once and the whole layout scales with it.
  • Design systems: Bootstrap and Tailwind CSS both size their spacing and type in rem, so rem values fit right in.

rem vs em

rem is relative to the root (html) font size and means the same everywhere on the page. em is relative to the font size of the current element, so it compounds when elements are nested. Use rem for most sizes and em for things that should scale with their own text, such as the padding of a button or the size of an icon next to a label.

The 62.5% trick

Some projects set html { font-size: 62.5%; } so that 1rem equals 10px and the math becomes easy. It works, but every component then needs its font size reset, and third-party CSS built for 16px renders too small. Keeping the default 16px and using this converter is usually simpler.

Tailwind spacing

Tailwind's spacing scale uses steps of 0.25rem (4px), so p-4 is 1rem and gap-6 is 1.5rem. The table shows the matching number for each common pixel value. Try the converted sizes in our UI components.

More CSS tools

CSS Gradient Generator: Linear, Radial & Conic
Create linear, radial and conic CSS gradients with multiple color stops, a live preview and ready-made presets, then copy the background CSS with a solid color fallback.
CSS Box Shadow Generator with Layers
Design CSS box shadows with multiple layers, inset shadows, blur, spread and opacity, preview them on any background and copy the box-shadow CSS or a Tailwind class.
CSS Border Radius Generator & Blob Shape Maker
Generate CSS border-radius values for all corners, each corner or 8-value elliptical blob shapes in px, % or rem, with a live preview, presets and Tailwind output.
CSS Grid Generator: Visual Layout Builder
Build CSS Grid layouts visually: set columns, rows and gaps, drag across cells to create items that span tracks, then copy the CSS, HTML or Tailwind classes.
CSS Flexbox Generator & Playground
Learn and generate CSS flexbox layouts: try flex-direction, wrap, justify-content, align-items and gap on live items, edit grow, shrink and order, and copy CSS, Tailwind or Bootstrap classes.
Glassmorphism CSS Generator (Frosted Glass)
Create a frosted glass effect with CSS: adjust blur, transparency, saturation, border and radius over colorful backgrounds and copy backdrop-filter CSS that works in every modern browser.
CSS Text Shadow Generator: Neon, 3D & Outline
Generate CSS text-shadow effects with multiple layers: soft shadows, neon glow, 3D, outline, retro and fire presets with a live preview of your own text and colors.
CSS Button Generator with Hover Effects
Design a custom CSS button: colors, font, padding, border radius, border, shadow, hover color and lift effect, with ready-made presets and copy-ready HTML and CSS including focus styles.
CSS Clip-path Generator: Polygon Shape Maker
Create CSS clip-path shapes: triangles, hexagons, stars, arrows, chevrons and more. Drag the polygon points to customize any shape and copy the clip-path CSS.
Cubic Bezier Generator: CSS Easing Functions
Design custom CSS easing with cubic-bezier(): drag the control points, try presets like easeOutCubic and easeOutBack, and compare your curve with ease in a live animation.
CSS Triangle Generator (Border & Clip-path)
Generate CSS triangles in eight directions with any width, height and color, using either clip-path or the classic border trick, for arrows, tooltips and decorative shapes.