Modern CSS: calc(), clamp() & Filters

Math functions

CSS can do arithmetic. calc() mixes units; clamp(min, ideal, max) gives fluid-but-bounded sizing — fantastic for responsive typography.

<style>
  .fluid { font-size: clamp(18px, 4vw, 36px); color:#4338ca; font-weight:700; }
  .bar { width: calc(100% - 40px); background:#06b6d4; color:#fff; padding:12px; margin:20px; border-radius:8px; }
</style>
<p class="fluid">I scale with the screen, but never too small or too big.</p>
<div class="bar">width: calc(100% - 40px)</div>

Two functions that let CSS do math:

• clamp(18px, 4vw, 36px) on .fluid reads as min, ideal, max: the heading wants to be 4vw (4% of the screen width) so it scales with the window, but it can never go below 18px or above 36px. Fluid, but never too small or too huge — no media queries needed.
• calc(100% - 40px) on .bar mixes units: take the full width and subtract 40px. This is something no single unit can express, which is exactly what calc() is for.

Filters

The filter property applies Photoshop-style effects: blur, grayscale, brightness, contrast, and more.

<style>
  img { width:120px; border-radius:10px; margin:6px; }
  .gray { filter: grayscale(100%); }
  .blur { filter: blur(2px); }
  .bright { filter: brightness(1.3) saturate(1.4); }
</style>
<img src="https://picsum.photos/120" alt="normal">
<img class="gray" src="https://picsum.photos/120" alt="grayscale">
<img class="blur" src="https://picsum.photos/120" alt="blur">
<img class="bright" src="https://picsum.photos/120" alt="bright">

The same photo appears four times, each with a different filter — Photoshop-style effects applied with one line. grayscale(100%) drains all colour to black-and-white, blur(2px) softens it out of focus, and brightness(1.3) saturate(1.4) stacks two effects to make it lighter and more vivid (you can chain several in one filter value). The first image has no filter, as a reference. Filters are great for hover effects — for example, grey out an image normally and remove the filter on :hover.