Say Hi

UI Recipe

Card Effects

Interactive card effects using CSS transitions, transforms, and pseudo-elements. Hover over each card to see the effect.

Lift

Translates the card up with enhanced shadow.

translateY

Lift

Card rises on hover with deeper shadow.

.card {
  transition: all 300ms ease;
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(66, 18, 128, 0.5);
}

Glow Border

An animated gradient border appears on hover using a pseudo-element with background-size animation.

::before gradient

Glow Border

Animated gradient border on hover.

.card::before {
  content: '';
  position: absolute; inset: -2px;
  border-radius: calc(var(--radius) + 2px);
  background: linear-gradient(135deg, #b06dff, #7a2fff, #d2a9ff);
  background-size: 300% 300%;
  opacity: 0;
  z-index: -1;
}
.card:hover::before {
  opacity: 1;
  animation: borderRotate 2s linear infinite;
}

More Hover Effects

scale(1.04)

Scale

Gentle zoom on hover.

brightness(1.25)

Brightness

Lightens on hover.

shimmer slide

Shimmer

Light sweep across the card.

/* Scale */
.card.scale:hover { transform: scale(1.04); }

/* Brightness */
.card.bright:hover { filter: brightness(1.25); }

/* Shimmer — pseudo-element slides across */
.card.shimmer::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  left: -100%; width: 100%; height: 100%;
  transition: left 500ms ease;
}
.card.shimmer:hover::after { left: 100%; }