No Login Data Private Local Save

CSS pow(), sqrt(), hypot() Demo - Online Trigonometric Functions

23
0
0
0

CSS pow(), sqrt(), hypot() Demo

Interactive playground for CSS mathematical functions — explore powers, square roots, hypotenuse calculations & their trigonometric connections

Chrome 111+ Firefox 118+ Safari 15.4+ CSS Math Functions
pow(base, exponent)

Returns baseexponent. Ideal for fluid type scales, exponential spacing, and dynamic sizing systems.

sqrt(value)

Returns the square root. Perfect for calculating diagonal lengths, normalizing values, and area-to-side conversions.

hypot(a, b, …)

Returns √(a² + b² + …). The Pythagorean theorem in CSS — crucial for distance, shadow offsets, and trigonometric layouts.

0.18
0.15
pow(2, 3) =
8.00
23 = 2 × 2 × 2 = 8
8.00
Live CSS pow() — box size = pow(base, exponent) × 15px
:root { --base: 2; --exponent: 3; } .box { width: calc(pow(var(--base), var(--exponent)) * 15px); height: calc(pow(var(--base), var(--exponent)) * 15px); /* = 8 × 15px = 120px */ }
0.1200
sqrt(64) =
8.00
√64 = 8 (since 8 × 8 = 64)
Area = 64
64
Side = 8
8
Area → Side: side = sqrt(area)
:root { --area: 64; } .side { width: calc(sqrt(var(--area)) * 10px); height: calc(sqrt(var(--area)) * 10px); /* = 8 × 10px = 80px */ }
1120
1120
hypot(30, 40) =
50.00
√(30² + 40²) = √(2500) = 50
🧮 Trigonometric values: sin(θ) = 0.800 | cos(θ) = 0.600 | tan(θ) = 1.333
θ = angle opposite side B ≈ 53.13°
Side A Side B Hypotenuse C
Right Triangle — C = hypot(A, B)
:root { --offset-x: 30; --offset-y: 40; } .shadow-distance { --dist: hypot(var(--offset-x), var(--offset-y)); box-shadow: 0 0 calc(var(--dist) * 1px) rgba(0,0,0,0.25); /* = 50px blur radius */ } /* Also useful for: */ .diagonal-length { width: calc(hypot(300, 400) * 1px); /* = 500px */ }

Frequently Asked Questions

What are CSS pow(), sqrt(), and hypot() functions?
These are CSS mathematical functions introduced in the CSS Values and Units Module Level 4. pow(base, exponent) calculates base raised to the exponent power. sqrt(value) returns the square root. hypot(a, b, …) computes the square root of the sum of squares — essentially the Pythagorean hypotenuse. They return numeric values usable anywhere CSS accepts numbers (calc(), custom properties, etc.).
How do these relate to CSS trigonometric functions like sin(), cos(), tan()?
They're part of the same CSS math function family. While sin(), cos(), and tan() handle angular trigonometry, hypot() directly implements the Pythagorean theorem (c² = a² + b²), which is foundational to trigonometry. Together, they enable complex geometric calculations in pure CSS — for example, hypot() gives you the hypotenuse, while atan2(y, x) gives you the angle. They complement each other for positioning, rotation, and distance calculations.
Which browsers support CSS pow(), sqrt(), and hypot()?
Chrome 111+ (March 2023), Firefox 118+ (September 2023), Safari 15.4+ (March 2022), and Edge 111+. As of 2025, global support exceeds 92%. For older browsers, provide fallback values using @supports queries or pre-calculate values with a CSS preprocessor. Always test with @supports (width: calc(pow(2, 3) * 1px)) before relying on these functions.
What are practical use cases for pow() in CSS?
Fluid typography scales (e.g., Modular Scale: pow(1.25, var(--step))), exponential spacing systems, dynamic animation curves, and non-linear size relationships. For example, you can create a type scale where each heading is 1.25× the previous: font-size: calc(pow(1.25, var(--level)) * 1rem).
When should I use sqrt() in real CSS projects?
Use sqrt() when you need to normalize values, calculate diagonal lengths of elements (width² + height² under a square root), convert area to side length, or implement inverse-square law effects (like realistic lighting/shadows where intensity falls with distance²). It's also handy for creating circular progress indicators and radial layouts.
What's the advantage of hypot() over manual calculation?
hypot() is more concise than sqrt(pow(a, 2) + pow(b, 2)), less error-prone, and more readable. It also handles edge cases better — it's numerically stable for very large or very small values, avoiding overflow/underflow that can occur when squaring numbers manually. Plus, it accepts multiple arguments: hypot(3, 4, 5) computes √(3²+4²+5²) = √50 ≈ 7.07.
Can I use negative values with these CSS functions?
pow(): The base must be non-negative (≥ 0), though the exponent can be any real number. sqrt(): The input must be non-negative (≥ 0); negative values are invalid. hypot(): Arguments can be any real numbers (positive, negative, or zero) — the result is always non-negative since it's the square root of a sum of squares. Always validate inputs when using CSS custom properties with these functions.
How do I provide fallbacks for unsupported browsers?
Use @supports feature queries:
@supports (width: calc(hypot(3, 4) * 1px)) { /* modern code */ }
Or set fallback custom properties:
--distance: 50px; /* fallback */
--distance: calc(hypot(var(--x), var(--y)) * 1px);
Browsers ignore invalid values and use the last valid one. For critical layouts, pre-calculate values server-side or with a build-time PostCSS plugin.
Do these CSS functions affect performance?
Negligible impact. These functions are implemented natively in browser engines (Blink, Gecko, WebKit) and execute at C++ speed. They're far more performant than JavaScript-based calculations that trigger layout recalculations. CSS math functions are evaluated during the computed style phase and cached efficiently. You can use hundreds of these functions without measurable performance degradation.
Can I combine pow(), sqrt(), and hypot() with other CSS functions?
Absolutely! They compose seamlessly inside calc(), clamp(), min(), and max(). Example: font-size: clamp(1rem, calc(sqrt(var(--viewport-width)) * 0.5rem), 4rem); You can also nest them: pow(sqrt(var(--x)), 3) = x1.5. This composability is what makes CSS math functions so powerful for creating flexible, responsive designs without JavaScript.
🔧 Related Tools