CSS Toolkit

Visual generators for box-shadow, gradients, border-radius, cubic-bezier easing, text-shadow, transforms, clip-path shapes, filters, glassmorphism, and triangles, plus calculators for CSS unit conversion, fluid clamp() values, and modular type scales — tweak it, see it live, and copy the CSS.

box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.25);
background: linear-gradient(135deg, #3f51b5, #9c27b0);
border-radius: 24px 24px 24px 24px;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Ag

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.35);
transform: translate(0px, 0px) rotate(15deg) scale(1) skew(0deg, 0deg);
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
filter: blur(0px) brightness(100%) contrast(100%) grayscale(0%) hue-rotate(0deg) invert(0%) saturate(100%) sepia(0%);
background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
width: 0; height: 0; border-left: 60px solid transparent; border-right: 60px solid transparent; border-bottom: 60px solid #3f51b5;

rem is relative to the root font size; em and % are relative to the parent (context) font size. pt uses the CSS definition (1pt = 1/72in, 1px = 1/96in).

  • px 24px
  • rem 1.5rem
  • em 1.5em
  • pt 18pt
  • % 150%

The size grows linearly from the min to the max as the viewport widens between the two widths, then stays clamped outside that range. Output uses rem + vw so it respects user zoom.

font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);
Min
1rem
Preferred
0.8333rem + 0.8333vw
Max
1.5rem
  • The quick brown fox +5 48.83px 3.052 rem
  • The quick brown fox +4 39.06px 2.441 rem
  • The quick brown fox +3 31.25px 1.953 rem
  • The quick brown fox +2 25px 1.563 rem
  • The quick brown fox +1 20px 1.25 rem
  • The quick brown fox +0 16px 1 rem
  • The quick brown fox -1 12.8px 0.8 rem
  • The quick brown fox -2 10.24px 0.64 rem