- Free forever
- No sign-up
The calculator
toolkit built
for developers.
Quick tools for CSS units, colors, typography, and layout math — all in one place.
Basic Calculator
Basic Math Calculator
Result
—
PX → REM
Pixels to root em units
REM value
—
REM → PX
Root em back to pixels
Pixel value
—
PX → EM
Pixels to parent-relative em
EM value
—
EM → PX
Parent em back to pixels
Pixel value
—
PX → %
Pixels as percentage of parent
Percentage value
—
% → PX
Percentage of parent to pixels
Pixel value
—
VW / VH → PX
Viewport units to pixel values
Pixel value
—
PX → Tailwind
Pixels to Tailwind spacing unit
Tailwind spacing unit
—
Tailwind → PX
Tailwind unit back to pixels
Pixel value
—
HEX → RGB / HSL
Full hex color conversion
RGB
—
HSL
—
RGB → HEX
RGB values to hex code
HEX value
—
Contrast Ratio
WCAG accessibility checker
Contrast ratio
—
WCAG grade
—
Opacity → HEX Alpha
% opacity to two-digit hex suffix
HEX alpha
—
Usage example
—
Tint / Shade
Lighten or darken a hex colour
Result
—
Positive = tint (lighter) · Negative = shade (darker)
CSS Gradient Generator
Linear & radial gradient builder
CSS output
—
Color Blindness Simulator
How your color looks to others
Normal vision
—
Deuteranopia (red-green)
—
Protanopia (red blind)
—
Tritanopia (blue blind)
—
Color Harmony
Complementary, triadic & analogous
Complementary (180°)
—
Triadic (120° / 240°)
—
—
Analogous (±30°)
—
—
Fluid Type — clamp()
Generate CSS clamp() for fluid type
CSS clamp()
—
Modular Type Scale
Generate a size scale with a ratio
| Step | px | rem | CSS var |
|---|
Line Height
px to unitless ratio + readability advice
Unitless ratio
—
Letter Spacing
Figma tracking ‰ to CSS em
letter-spacing
—
Easing Reference
cubic-bezier cheat sheet
| Name | Value |
|---|---|
| ease-out-expo | cubic-bezier(0.19, 1, 0.22, 1) |
| ease-in-out-quad | cubic-bezier(0.455, 0.03, 0.515, 0.955) |
| ease-in-cubic | cubic-bezier(0.55, 0.055, 0.675, 0.19) |
| ease-out-back | cubic-bezier(0.34, 1.56, 0.64, 1) |
| ease-in-out-back | cubic-bezier(0.68, -0.55, 0.265, 1.55) |
| spring-like | cubic-bezier(0.175, 0.885, 0.32, 1.275) |
Golden Ratio
Calculate φ counterpart of a value
Result
—
Aspect Ratio
Simplify ratio + get padding-top trick
Simplified ratio
—
CSS Grid Generator
grid-template-columns shorthand
grid-template-columns
—
Z-Index Scale
Sensible stacking layer reference
| Layer | Value | CSS var |
|---|---|---|
| Base | 0 |
--z-base: 0
|
| Raised | 10 |
--z-raised: 10
|
| Dropdown | 100 |
--z-dropdown: 100
|
| Sticky | 200 |
--z-sticky: 200
|
| Modal | 400 |
--z-modal: 400
|
| Toast | 500 |
--z-toast: 500
|
| Tooltip | 600 |
--z-tooltip: 600
|
nth-child Builder
Visual an+b expression builder
CSS expression
—
Preview (highlighted = selected)
Border Radius → %
px border-radius as % of element
As percentage
—
Image Size Estimator
Estimate raw / compressed file size
Raw uncompressed size
—
Load Time Estimator
File size to estimated download time
Estimated load time
—
CSS Specificity
Calculate the score of a CSS selector
Specificity score (IDs, classes, elements)
—
Breakpoint Reference
Tailwind, Bootstrap & common breakpoints
| Name | Tailwind | Bootstrap | Width |
|---|---|---|---|
| xs / mobile | — | < 576px | max 575px |
| sm | 640px | ≥ 576px | min 640px |
| md | 768px | ≥ 768px | min 768px |
| lg | 1024px | ≥ 992px | min 1024px |
| xl | 1280px | ≥ 1200px | min 1280px |
| 2xl | 1536px | ≥ 1400px | min 1536px |
HTTP Status Codes
Quick lookup — click any code to copy
| Code | Name | Docs |
|---|
Transition Duration Guide
Right duration for every interaction type
| Interaction | Duration | Easing |
|---|---|---|
| Hover state (button, link) | 100–150ms | ease |
| Tooltip / popover appear | 150–200ms | ease |
| Dropdown / menu open | 200–250ms | ease-out-expo |
| Modal / drawer open | 250–350ms | ease-out-back |
| Page transition | 300–500ms | ease |
| Skeleton / loading pulse | 1000–1500ms | infinite |
| Scroll-triggered reveal | 400–600ms | ease-out-expo |
💡 Rule of thumb: anything faster than 100ms feels instant. Anything slower than 500ms feels sluggish. Stay in that window.
Optimal Line Length
Ideal container width for readability
Recommended CSS
—
Approximate equivalent: —
The 45–75 character rule is the gold standard for body text readability.
VAT Calculator
Add or remove VAT from a price
Total
—
Base64 Encode / Decode
Encode or decode a string
Output
—
URL Encode / Decode
Percent-encode or decode a URL
Output
—
Unix Timestamp
Convert epoch ↔ human readable date
Text Counter
Characters, words, sentences, read time
Characters
0
Words
0
Lines
0