Free Resource

CSS Snippets Library

40+ production-ready CSS snippets. Live previews, one-click copy. No signup needed.

20 snippets

Glow Button

Buttons

.btn-glow{
  background:#6366f1;color:#fff;
  border:none;padding:10px 24px;
  box-shadow:0 0 20px rgba(99,102,241,.4);
  transition:all .3s;
}
.btn-glow:hover{
  box-shadow:0 0 40px rgba(99,102,241,.9);
  transform:translateY(-2px);
}

Ghost Button

Buttons

.btn-ghost{
  background:transparent;
  border:2px solid #6366f1;
  color:#818cf8;
  transition:all .25s;
}
.btn-ghost:hover{
  background:#6366f1;color:#fff;
}

3D Press Button

Buttons

.btn-3d{
  border:none;
  border-bottom:4px solid #4c1d95;
  border-radius:4px;
  transition:all .1s;
}
.btn-3d:hover{
  border-bottom-width:2px;
  transform:translateY(2px);
}

Shine Sweep Button

Buttons

.btn-shine{
  position:relative;overflow:hidden;
}
.btn-shine::after{
  content:'';
  position:absolute;top:-50%;left:-60%;
  width:30%;height:200%;
  background:rgba(255,255,255,.25);
  transform:skewX(-20deg);
  transition:left .4s;
}
.btn-shine:hover::after{left:130%}

Animated Border

Buttons

.btn{position:relative;}
.btn::before{
  content:'';position:absolute;inset:-2px;
  background:linear-gradient(90deg,#6366f1,#ec4899,#8b5cf6,#6366f1);
  background-size:300% 100%;
  animation:gb 3s linear infinite;z-index:-1;
}
@keyframes gb{0%{background-position:0%}100%{background-position:300%}}

Glassmorphism Card

Cards

Glass Card

Backdrop blur

.glass{
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.15);
  border-radius:12px;
}

Hover Lift Card

Cards

Hover me

Lifts on hover

.card-lift{
  transition:all .3s;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.card-lift:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 20px 40px rgba(0,0,0,.5);
}

Spin Loader

Loaders

.loader{
  width:34px;height:34px;
  border:3px solid rgba(99,102,241,.15);
  border-top-color:#6366f1;
  border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

Bouncing Dots

Loaders

.dots span{
  width:10px;height:10px;
  border-radius:50%;background:#6366f1;
  animation:bounce 1.2s ease-in-out infinite;
}
.dots span:nth-child(2){animation-delay:.2s}
.dots span:nth-child(3){animation-delay:.4s}
@keyframes bounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-14px)}
}

Progress Bar

Loaders

.progress{
  height:4px;background:rgba(99,102,241,.15);
  border-radius:2px;overflow:hidden;
}
.progress-inner{
  height:100%;
  background:linear-gradient(90deg,#6366f1,#8b5cf6);
  animation:bar 1.5s ease-in-out infinite;
}
@keyframes bar{0%{transform:translateX(-100%)}100%{transform:translateX(200%)}}

Pulse Loader

Loaders

.pulse{
  width:34px;height:34px;
  border-radius:50%;background:#ec4899;
  animation:pulse 1.5s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.4);opacity:.4}
}

Double Ring

Loaders

.ring{width:36px;height:36px;position:relative}
.ring::before,.ring::after{
  content:'';position:absolute;inset:0;
  border-radius:50%;border:3px solid transparent;
  border-top-color:#6366f1;animation:spin .8s linear infinite;
}
.ring::after{inset:5px;border-top-color:#ec4899;animation-duration:1.2s;animation-direction:reverse}

Fade In Up

Animations

Fading in ✨

.fade-in{animation:fadeUp .6s ease both}
@keyframes fadeUp{
from{opacity:0;transform:translateY(16px)}
to{opacity:1;transform:translateY(0)}
}

Text Gradient Anim

Animations

Hello World

.text-grad{
  background:linear-gradient(90deg,#6366f1,#8b5cf6,#ec4899,#6366f1);
  background-size:300% 100%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:tg 3s linear infinite;
}
@keyframes tg{0%{background-position:0%}100%{background-position:300%}}

Typewriter Effect

Animations

Hello World

.typewriter{
  overflow:hidden;white-space:nowrap;
  border-right:2px solid currentColor;
  width:0;
  animation:tw 2.5s steps(20,end) forwards,blink .7s step-end infinite;
}
@keyframes tw{to{width:100%}}
@keyframes blink{50%{border-color:transparent}}

Float Animation

Animations

🚀

.float{
  animation:floatY 3s ease-in-out infinite;
  display:inline-block;
}
@keyframes floatY{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
}

Floating Label Input

Inputs

Your name

.wrap{position:relative}
.wrap input{padding:16px 12px 6px}
.wrap label{
  position:absolute;left:12px;top:50%;
  transform:translateY(-50%);transition:all .2s;pointer-events:none;
}
.wrap input:focus~label,.wrap input:not(:placeholder-shown)~label{
  top:8px;font-size:.6rem;color:#6366f1;transform:none;
}

Focus Ring Input

Inputs

.input{
  border:2px solid var(--border);
  outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.input:focus{
  border-color:#6366f1;
  box-shadow:0 0 0 4px rgba(99,102,241,.2);
}

Status Badges

Utils

Active Pending Error Info

.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600}
.badge-ok{background:rgba(52,211,153,.12);color:#34d399}
.badge-warn{background:rgba(251,191,36,.12);color:#fbbf24}
.badge-err{background:rgba(248,113,113,.12);color:#f87171}
.badge-info{background:rgba(99,102,241,.12);color:#818cf8}

Gradient Divider

Utils

/* gradient hr */
.divider{height:1px;background:linear-gradient(90deg,transparent,#6366f1,transparent)}

/* text divider */
.divider-text{display:flex;align-items:center;gap:10px}
.divider-text::before,.divider-text::after{content:'';flex:1;height:1px;background:var(--border)}

Text Selection Style

Utils

Try selecting this text to see custom highlight colour

::selection{
  background:rgba(99,102,241,.35);
  color:#fff;
}
::-moz-selection{
  background:rgba(99,102,241,.35);
  color:#fff;
}

CSS-Only Tooltip

Tooltips

Tooltip text!

.tooltip{position:relative;display:inline-block}
.tooltip .tip{
  visibility:hidden;opacity:0;
  position:absolute;bottom:calc(100%+8px);
  left:50%;transform:translateX(-50%);
  background:var(--card);border:1px solid var(--border);
  padding:5px 11px;border-radius:6px;
  transition:opacity .2s;white-space:nowrap;
}
.tooltip:hover .tip{visibility:visible;opacity:1}

How to Use the CSS Snippets Library

Each snippet includes a live preview and the complete CSS code. Click Copy on any card to copy the CSS to your clipboard. All snippets are self-contained — just paste into your stylesheet and adjust the colours and sizing to match your project.

About These Snippets

Every snippet in this library is production-tested and works in all modern browsers. Animations use GPU-accelerated properties (transform, opacity) for smooth 60fps performance. No JavaScript dependencies required for any snippet — pure CSS throughout.