CSS

CSS Tricks

Snippet hay dùng — copy-paste đỡ Google.

Custom scrollbar

css
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: #888; }
/* Firefox */
* { scrollbar-width: thin; scrollbar-color: #ccc transparent; }

Hide scrollbar mà vẫn scroll được

css
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }

Gradient text

css
.gradient-text {
  background: linear-gradient(90deg, #4f46e5, #10b981);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Glassmorphism

css
.glass {
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 1rem;
}

Stripe loading bar

css
.bar {
  height: 4px;
  background: linear-gradient(90deg, #4f46e5 0%, #4f46e5 50%, transparent 50%);
  background-size: 200% 100%;
  animation: slide 1s linear infinite;
}
@keyframes slide { to { background-position: -200% 0; } }

Triangle bằng border

css
.triangle {
  width: 0; height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 16px solid #4f46e5;
}

Skeleton loader

css
.skeleton {
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer { 0% { background-position: 100% 0 } 100% { background-position: -100% 0 } }

Disable text selection

css
.no-select { user-select: none; }

CSS-Tricks (live)