CSS Effects Library

/* Container needs a colorful bg */
.glass-card {
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  padding: 1.5rem;
}

.neon-btn {
  padding: .75rem 2rem;
  background: transparent;
  color: #6aefc4;
  border: 2px solid #6aefc4;
  border-radius: 8px;
  transition: all .3s;
}
.neon-btn:hover {
  background: #6aefc4;
  box-shadow: 0 0 15px rgba(106,239,196,.4),
              0 0 45px rgba(106,239,196,.15);
}

.fancy-link {
  text-decoration: none;
  color: #7c6aef;
  position: relative;
}
.fancy-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, #7c6aef, #ef6ac0);
  transition: width .4s cubic-bezier(.22,.61,.36,1);
}
.fancy-link:hover::after {
  width: 100%;
}

.spinner {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #7c6aef;
  border-right-color: #ef6ac0;
  animation: spin 1.2s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.shimmer-bar {
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    #2a2a3a 25%,
    rgba(124,106,239,.15) 50%,
    #2a2a3a 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.ring {
  position: absolute; inset: 0;
  border: 2px solid #7c6aef;
  border-radius: 50%;
  animation: pulse 2s cubic-bezier(.215,.61,.355,1) infinite;
}
.ring:nth-child(3) { animation-delay: .5s; }
.ring:nth-child(4) { animation-delay: 1s; }
@keyframes pulse {
  0%   { transform: scale(1);  opacity: .6; }
  100% { transform: scale(2.5); opacity: 0; }
}

.lift-card {
  padding: 1.5rem;
  background: #22222f;
  border-radius: 12px;
  transition: transform .35s cubic-bezier(.22,.61,.36,1),
            box-shadow .35s;
}
.lift-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0,0,0,.4),
              0 0 0 1px rgba(124,106,239,.2);
}

.flip-container {
  perspective: 800px;
}
.flipper {
  transform-style: preserve-3d;
  transition: transform .6s;
}
.flip-container:hover .flipper {
  transform: rotateY(180deg);
}
.flip-front, .flip-back {
  backface-visibility: hidden;
}
.flip-back {
  transform: rotateY(180deg);
}

/* CSS — uses CSS custom properties */
.tilt-card::before {
  background: radial-gradient(
    circle at var(--mx) var(--my),
    rgba(124,106,239,.35), transparent 60%);
}
/* JS — track mouse position */
card.addEventListener('mousemove', e => {
  const r = card.getBoundingClientRect();
  card.style.setProperty('--mx',
    ((e.clientX - r.left) / r.width * 100) + '%');
  card.style.setProperty('--my',
    ((e.clientY - r.top) / r.height * 100) + '%');
});

.stack-demo:hover .s-card:nth-child(1) {
  transform: rotate(-6deg) translateX(-20px);
}
.stack-demo:hover .s-card:nth-child(2) {
  transform: rotate(-3deg) translateX(-10px);
}
.s-card {
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
}

.gradient-text {
  font-size: 2rem; font-weight: 800;
  background: linear-gradient(90deg,
    #7c6aef, #ef6ac0, #6aefc4, #7c6aef);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 4s ease infinite;
}
@keyframes gradient-shift {
  50% { background-position: 100% 50%; }
}

.typing-text {
  font-family: monospace;
  border-right: 2px solid #7c6aef;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  animation:
    type 3.5s steps(22) infinite,
    blink .65s step-end infinite alternate;
}
@keyframes type {
  50%, 80% { width: 22ch; }
}
@keyframes blink {
  50% { border-color: transparent; }
}

.blob {
  width: 100px; height: 100px;
  background: linear-gradient(135deg, #7c6aef, #ef6ac0);
  border-radius:
    60% 40% 30% 70% / 60% 30% 70% 40%;
  animation: morph 8s ease-in-out infinite;
}
@keyframes morph {
  0%   { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50%  { border-radius: 50% 60% 30% 60% / 40% 70% 60% 30%; }
  100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

.float-el {
  animation: float-y 3s ease-in-out infinite;
}
/* Stagger with animation-delay */
.float-el:nth-child(2) { animation-delay: .5s; }
.float-el:nth-child(3) { animation-delay: 1s; }

@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

.stagger-item {
  transition: transform .3s, box-shadow .3s;
}
.stagger-item:hover {
  transform: translateX(8px);
  background: rgba(124,106,239,.12);
  box-shadow: -4px 0 0 #7c6aef;
}

.toggle {
  width: 52px; height: 28px;
  background: #2a2a3a;
  border-radius: 14px;
  transition: background .3s;
}
.toggle.on { background: #7c6aef; }
.knob {
  transition: transform .3s cubic-bezier(.68,-.55,.27,1.55);
}
.toggle.on .knob {
  transform: translateX(24px);
}