Transforms, Shadows & Visual Effects

Transforms

Move, scale, and rotate without affecting layout (neighbours don’t shift):

transform: translateY(-4px);          /* the hover-lift */
transform: translate(-50%, -50%);     /* the centering trick */
transform: scale(1.05);
transform: rotate(45deg);
transform: translateY(-4px) scale(1.02);   /* combine — order matters */

transform-origin: top left;           /* pivot point for scale/rotate */

box-shadow — Depth Done Right

/*          x  y  blur spread color */
box-shadow: 0 1px 3px rgba(0,0,0,0.12);              /* subtle card */
box-shadow: 0 20px 48px rgba(0,0,0,0.4);             /* floating modal */
box-shadow: 0 8px 24px rgba(99,102,241,0.35);        /* colored glow */
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);         /* pressed/inset */

/* realistic depth = multiple layered shadows */
.card {
  box-shadow:
    0 1px 2px rgba(0,0,0,0.07),
    0 4px 8px rgba(0,0,0,0.07),
    0 16px 32px rgba(0,0,0,0.07);
}

For irregular shapes (transparent PNGs, SVGs), use filter: drop-shadow() — it follows the visible pixels, not the bounding box.

Gradients

background: linear-gradient(135deg, #6366F1, #8B5CF6);
background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7));  /* image overlay */
background: radial-gradient(circle at top right, #312E81, #0A0A14);
background: conic-gradient(from 0deg, #6366F1, #EC4899, #6366F1);      /* pie/ring charts */

/* gradient text */
.gradient-text {
  background: linear-gradient(90deg, #6366F1, #EC4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Filters

filter: blur(8px);
filter: brightness(1.1) contrast(1.05);
filter: grayscale(100%);              /* + transition = nice hover reveal */
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));

backdrop-filter — the Glass Effect

Filters what’s behind the element — the frosted-glass navbar every modern site uses:

.navbar {
  background: rgba(10, 10, 20, 0.7);
  backdrop-filter: blur(14px);
}

clip-path & Shapes

clip-path: circle(50%);
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);   /* slanted section divider */
border-radius: 50%;                                   /* avatar circle */

object-fit for Images

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* fill the box, crop overflow — never distort */
  object-position: center;
}

Combine: aspect-ratio on the container + object-fit: cover on the image = perfectly uniform card thumbnails regardless of source dimensions.