مكتبة كيرليون تأثيرات HTML باستخدام CSS

KERLION

عالم خدمات احترافية VIP

عالم الأدوات المجانية اتصل بنا

طلب تصميم

COPY-READY CSS EFFECTS FOR

Effect CSS KERLION

اكتشف مكتبة KERLION التي تضم أكثر من 100 تأثير CSS احترافي، مع معاينات مباشرة وأكواد نظيفة وجاهزة للنسخ بضغطة واحدة. صُممت لمساعدة المطورين والمصممين على إنشاء واجهات عصرية بسرعة وسهولة.

Effect CSS

80+ 🟢PREMIUM EFFECTS🟢 handcrafted CSS animations

1-CLICK 🟠COPY - USE🟠 ready for any web project

LIVE 🔵REAL-TIME PREVIEW🔵 test every effect instantly

100% 🟣RESPONSIVE🟣 optimized for all devices

Showing 63 effects Sort: Default Sort: A → Z Sort: Z → A Sort: Category

🔴🔴⇩⇧to navigate

#01

Neon Glow Button

A vivid emerald button with a soft pulsing neon halo that intensifies on hover.

Buttons

<button class="krl-neon-btn">
  <span class="krl-neon-btn__text">Explore Now</span>
</button>

.krl-neon-btn{
  position:relative;
  padding:16px 44px;
  font-family:'Poppins',sans-serif;
  font-size:15px;font-weight:600;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:#04130c;
  background:#00ffa3;
  border:none;border-radius:10px;
  cursor:pointer;
  box-shadow:0 0 18px rgba(0,255,163,.55),0 0 42px rgba(0,255,163,.3);
  transition:transform .25s ease,box-shadow .25s ease;
}
.krl-neon-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 0 28px rgba(0,255,163,.85),0 0 60px rgba(0,255,163,.5);
}
.krl-neon-btn:active{transform:translateY(0);}
.krl-neon-btn__text{position:relative;z-index:2;}

<button class="krl-neon-btn">
  <span class="krl-neon-btn__text">Explore Now</span>
</button>

hoverglowcta

#02

Gradient Shine Button

A pill button with an animated multi-color gradient and a light sweep on hover.

Buttons

<button class="krl-shine-btn">
  <span class="krl-shine-btn__text">Get Started</span>
</button>

.krl-shine-btn{
  position:relative;padding:16px 40px;
  font-family:'Poppins',sans-serif;font-size:15px;font-weight:600;
  letter-spacing:1px;color:#fff;
  background:linear-gradient(110deg,#00ffa3,#00d4a8,#f5a623,#00ffa3);
  background-size:300% 100%;border:none;border-radius:50px;cursor:pointer;
  overflow:hidden;transition:background-position .6s ease;
}
.krl-shine-btn:hover{background-position:100% 0;}
.krl-shine-btn::before{
  content:"";position:absolute;top:0;left:-120%;width:80%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);transition:left .6s ease;
}
.krl-shine-btn:hover::before{left:140%;}
.krl-shine-btn__text{position:relative;z-index:2;}

<button class="krl-shine-btn">
  <span class="krl-shine-btn__text">Get Started</span>
</button>

gradientshinepill

#03

Ripple Wave Button

An outlined button that fills with a circular ripple emanating from the center on hover.

Buttons

<button class="krl-ripple-btn">
  <span class="krl-ripple-btn__text">Click Me</span>
</button>

.krl-ripple-btn{
  position:relative;padding:16px 40px;
  font-family:'Poppins',sans-serif;font-size:15px;font-weight:600;
  color:#00ffa3;background:transparent;
  border:2px solid #00ffa3;border-radius:10px;cursor:pointer;
  overflow:hidden;transition:color .35s ease;
}
.krl-ripple-btn:hover{color:#04130c;}
.krl-ripple-btn::before{
  content:"";position:absolute;top:50%;left:50%;
  width:0;height:0;background:#00ffa3;border-radius:50%;
  transform:translate(-50%,-50%);
  transition:width .5s ease,height .5s ease;z-index:1;
}
.krl-ripple-btn:hover::before{width:420px;height:420px;}
.krl-ripple-btn__text{position:relative;z-index:2;}

<button class="krl-ripple-btn">
  <span class="krl-ripple-btn__text">Click Me</span>
</button>

rippleoutlinefill

#04

3D Push Button

A chunky tactile button with a solid base that depresses on click for a physical feel.

Buttons

<button class="krl-push-btn">
  <span class="krl-push-btn__text">Press Me</span>
</button>

.krl-push-btn{
  position:relative;padding:16px 40px;
  font-family:'Poppins',sans-serif;font-size:15px;font-weight:700;
  letter-spacing:1px;color:#fff;background:#f5a623;border:none;
  border-radius:12px;cursor:pointer;
  box-shadow:0 7px 0 #b87a12,0 10px 18px rgba(0,0,0,.4);
  transition:transform .12s ease,box-shadow .12s ease,background .2s ease;
}
.krl-push-btn:hover{background:#ffb733;}
.krl-push-btn:active{
  transform:translateY(7px);
  box-shadow:0 0 0 #b87a12,0 2px 8px rgba(0,0,0,.4);
}
.krl-push-btn__text{position:relative;z-index:2;}

<button class="krl-push-btn">
  <span class="krl-push-btn__text">Press Me</span>
</button>

3dpresstactile

#05

Glassmorphism Card

A frosted-glass card with backdrop blur and a translucent border over a vibrant scene.

Cards

★

Premium Plan

Frosted glass with blur and a soft border glow.

<div class="krl-glass-scene">
  <div class="krl-glass-card">
    <div class="krl-glass-card__icon">★</div>
    <div class="krl-glass-card__title">Premium Plan</div>
    <div class="krl-glass-card__text">Frosted glass with blur.</div>
  </div>
</div>

.krl-glass-scene{
  display:flex;align-items:center;justify-content:center;
  padding:28px;border-radius:18px;
  background:linear-gradient(135deg,#00ffa3,#0a3d2e,#f5a623);
}
.krl-glass-card{
  width:230px;padding:28px 24px;border-radius:18px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 12px 40px rgba(0,0,0,.35);
  color:#fff;font-family:'Poppins',sans-serif;text-align:center;
}
.krl-glass-card__icon{width:54px;height:54px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-size:26px;border-radius:14px;background:linear-gradient(135deg,#00ffa3,#f5a623);color:#04130c;}
.krl-glass-card__title{font-size:20px;font-weight:700;margin-bottom:6px;}
.krl-glass-card__text{font-size:13px;line-height:1.6;color:rgba(255,255,255,.8);}

<div class="krl-glass-scene">
  <div class="krl-glass-card">
    <div class="krl-glass-card__icon">★</div>
    <div class="krl-glass-card__title">Premium Plan</div>
    <div class="krl-glass-card__text">Frosted glass with blur.</div>
  </div>
</div>

glassblurfrosted

#06

3D Flip Card

A card that rotates 180 degrees in 3D space on hover to reveal a hidden back face.

Cards

Hover Me

Surprise!

<div class="krl-flip-card">
  <div class="krl-flip-card__inner">
    <div class="krl-flip-card__face krl-flip-card__front">
      <span class="krl-flip-card__label">Hover Me</span>
    </div>
    <div class="krl-flip-card__face krl-flip-card__back">
      <span class="krl-flip-card__label">Surprise!</span>
    </div>
  </div>
</div>

.krl-flip-card{width:220px;height:140px;perspective:900px;font-family:'Poppins',sans-serif;}
.krl-flip-card__inner{position:relative;width:100%;height:100%;transition:transform .7s ease;transform-style:preserve-3d;}
.krl-flip-card:hover .krl-flip-card__inner{transform:rotateY(180deg);}
.krl-flip-card__face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:16px;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.krl-flip-card__front{background:linear-gradient(135deg,#00ffa3,#00b377);color:#04130c;}
.krl-flip-card__back{background:linear-gradient(135deg,#f5a623,#d97706);color:#1a1206;transform:rotateY(180deg);}
.krl-flip-card__label{font-size:20px;font-weight:700;letter-spacing:1px;}

<div class="krl-flip-card">
  <div class="krl-flip-card__inner">
    <div class="krl-flip-card__face krl-flip-card__front">
      <span class="krl-flip-card__label">Hover Me</span>
    </div>
    <div class="krl-flip-card__face krl-flip-card__back">
      <span class="krl-flip-card__label">Surprise!</span>
    </div>
  </div>
</div>

3dfliphover

#07

Neon Border Card

A dark card wrapped in a continuously rotating emerald-amber gradient border.

Cards

Animated Border

A glowing gradient border that rotates around the card.

<div class="krl-neon-card">
  <div class="krl-neon-card__body">
    <div class="krl-neon-card__title">Animated Border</div>
    <div class="krl-neon-card__text">Rotating gradient border.</div>
  </div>
</div>

.krl-neon-card{position:relative;width:260px;padding:2px;border-radius:18px;background:linear-gradient(45deg,#00ffa3,#f5a623,#00ffa3,#f5a623);background-size:400% 400%;animation:krl-neon-card-rotate 6s linear infinite;}
@keyframes krl-neon-card-rotate{0%{background-position:0% 50%;}100%{background-position:400% 50%;}}
.krl-neon-card__body{background:#0d1117;border-radius:16px;padding:24px;color:#fff;font-family:'Poppins',sans-serif;text-align:center;}
.krl-neon-card__title{font-size:18px;font-weight:700;margin-bottom:6px;color:#00ffa3;}
.krl-neon-card__text{font-size:13px;line-height:1.6;color:rgba(255,255,255,.7);}

<div class="krl-neon-card">
  <div class="krl-neon-card__body">
    <div class="krl-neon-card__title">Animated Border</div>
    <div class="krl-neon-card__text">Rotating gradient border.</div>
  </div>
</div>

bordergradientanimated

#08

Shine Sweep Card

A dark content card where a soft light sweep travels across the surface on hover.

Cards

NEW

Shine Effect

A light sweep travels across the card on hover.

<div class="krl-shine-card">
  <div class="krl-shine-card__badge">NEW</div>
  <div class="krl-shine-card__title">Shine Effect</div>
  <div class="krl-shine-card__text">Light sweep on hover.</div>
</div>

.krl-shine-card{position:relative;width:240px;padding:24px;border-radius:16px;background:linear-gradient(135deg,#14191f,#0d1117);border:1px solid #1f2630;color:#fff;font-family:'Poppins',sans-serif;overflow:hidden;transition:transform .3s ease,border-color .3s ease;}
.krl-shine-card:hover{transform:translateY(-4px);border-color:#00ffa3;}
.krl-shine-card::before{content:"";position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(120deg,transparent,rgba(0,255,163,.28),transparent);transform:skewX(-20deg);transition:left .7s ease;}
.krl-shine-card:hover::before{left:160%;}
.krl-shine-card__badge{display:inline-block;padding:4px 12px;font-size:11px;font-weight:700;letter-spacing:1px;color:#04130c;background:#00ffa3;border-radius:20px;margin-bottom:12px;}
.krl-shine-card__title{font-size:18px;font-weight:700;margin-bottom:6px;}
.krl-shine-card__text{font-size:13px;line-height:1.6;color:rgba(255,255,255,.7);}

<div class="krl-shine-card">
  <div class="krl-shine-card__badge">NEW</div>
  <div class="krl-shine-card__title">Shine Effect</div>
  <div class="krl-shine-card__text">Light sweep on hover.</div>
</div>

shinehovercontent

#09

Gradient Animated Text

Bold text filled with a flowing emerald-amber gradient that animates seamlessly.

Text

KERLION.CSS

<div class="krl-gradient-text">KERLION.CSS</div>

.krl-gradient-text{
  font-family:'Poppins',sans-serif;font-size:44px;font-weight:800;
  letter-spacing:2px;
  background:linear-gradient(90deg,#00ffa3,#f5a623,#00ffa3,#f5a623);
  background-size:300% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:krl-gradient-text-flow 4s linear infinite;
}
@keyframes krl-gradient-text-flow{to{background-position:300% center;}}

<div class="krl-gradient-text">KERLION.CSS</div>

gradienttextflow

#10

Neon Sign Text

Glowing neon-tube text with layered shadows and an occasional flicker, like a real sign.

Text

OPEN

<div class="krl-neon-text">OPEN</div>

.krl-neon-text{
  font-family:'Poppins',sans-serif;font-size:56px;font-weight:800;
  letter-spacing:4px;color:#fff;
  text-shadow:0 0 6px #fff,0 0 14px #00ffa3,0 0 28px #00ffa3,0 0 46px #00ffa3,0 0 70px #00ffa3;
  animation:krl-neon-text-flicker 3s infinite alternate;
}
@keyframes krl-neon-text-flicker{
  0%,18%,22%,25%,53%,57%,100%{opacity:1;}
  20%,24%,55%{opacity:.65;}
}

<div class="krl-neon-text">OPEN</div>

neonglowflicker

#11

Typewriter Text

Pure-CSS typewriter effect that types and deletes text with a blinking cursor — no JavaScript.

Text

KERLION.CSS

<div class="krl-typewriter">KERLION</div>

.krl-typewriter{
  font-family:'JetBrains Mono',monospace;font-size:30px;font-weight:700;
  letter-spacing:2px;color:#00ffa3;overflow:hidden;white-space:nowrap;
  border-right:3px solid #00ffa3;width:0;
  animation:krl-typewriter-type 4s steps(11) infinite alternate,
           krl-typewriter-cursor .7s step-end infinite;
}
@keyframes krl-typewriter-type{0%{width:0;}60%,100%{width:11ch;}}
@keyframes krl-typewriter-cursor{50%{border-color:transparent;}}

<div class="krl-typewriter">KERLION</div>

typewritercursorpure-css

#12

Orbit Spinner

A clean ring loader with a glowing accent dot that orbits the perimeter while spinning.

Loaders

<div class="krl-orbit">
  <div class="krl-orbit__dot"></div>
</div>

.krl-orbit{position:relative;width:64px;height:64px;border:3px solid rgba(0,255,163,.18);border-top-color:#00ffa3;border-radius:50%;animation:krl-orbit-spin 1s linear infinite;}
.krl-orbit__dot{position:absolute;top:-6px;left:50%;width:10px;height:10px;margin-left:-5px;background:#f5a623;border-radius:50%;box-shadow:0 0 12px #f5a623;}
@keyframes krl-orbit-spin{to{transform:rotate(360deg);}}

<div class="krl-orbit">
  <div class="krl-orbit__dot"></div>
</div>

loaderspinnerorbit

#13

Dot Wave Loader

Five bouncing dots ripple in a wave with a smooth color transition across the row.

Loaders

<div class="krl-wave">
  <span class="krl-wave__dot"></span>
  <span class="krl-wave__dot"></span>
  <span class="krl-wave__dot"></span>
  <span class="krl-wave__dot"></span>
  <span class="krl-wave__dot"></span>
</div>

.krl-wave{display:flex;gap:8px;align-items:center;}
.krl-wave__dot{width:12px;height:12px;background:#00ffa3;border-radius:50%;animation:krl-wave-bounce 1.2s ease-in-out infinite;}
.krl-wave__dot:nth-child(2){animation-delay:.15s;background:#33ffb5;}
.krl-wave__dot:nth-child(3){animation-delay:.3s;background:#66ffcc;}
.krl-wave__dot:nth-child(4){animation-delay:.45s;background:#f5a623;}
.krl-wave__dot:nth-child(5){animation-delay:.6s;background:#ffb733;}
@keyframes krl-wave-bounce{0%,40%,100%{transform:translateY(0);opacity:.6;}20%{transform:translateY(-16px);opacity:1;}}

<div class="krl-wave">
  <span class="krl-wave__dot"></span>
  <span class="krl-wave__dot"></span>
  <span class="krl-wave__dot"></span>
  <span class="krl-wave__dot"></span>
  <span class="krl-wave__dot"></span>
</div>

loaderwavebounce

#14

Pulse Ring Loader

Two concentric rings expand and fade in sequence, creating a calming radar pulse.

Loaders

<div class="krl-pulse">
  <span></span>
  <span></span>
</div>

.krl-pulse{position:relative;width:60px;height:60px;}
.krl-pulse span{position:absolute;inset:0;border:3px solid #00ffa3;border-radius:50%;animation:krl-pulse-ring 1.6s ease-out infinite;}
.krl-pulse span:nth-child(2){animation-delay:.5s;border-color:#f5a623;}
@keyframes krl-pulse-ring{0%{transform:scale(.4);opacity:1;}100%{transform:scale(1.3);opacity:0;}}

<div class="krl-pulse">
  <span></span>
  <span></span>
</div>

loaderpulseradar

#15

Aurora Gradient Background

A slowly shifting multi-stop gradient panel that flows like the aurora borealis.

Backgrounds

Animated Background

<div class="krl-aurora-bg">
  <div class="krl-aurora-bg__label">Animated Background</div>
</div>

.krl-aurora-bg{position:relative;width:280px;height:160px;border-radius:18px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(-45deg,#0d1117,#0a3d2e,#3d2a0a,#0d1117);background-size:400% 400%;animation:krl-aurora-bg-flow 10s ease infinite;}
@keyframes krl-aurora-bg-flow{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
.krl-aurora-bg__label{font-family:'Poppins',sans-serif;font-size:18px;font-weight:700;letter-spacing:1px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.5);}

<div class="krl-aurora-bg">
  <div class="krl-aurora-bg__label">Animated Background</div>
</div>

backgroundgradientanimated

#16

Floating Orbs

Glowing blurred orbs that drift gently around a dark stage — perfect for hero backdrops.

Backgrounds

<div class="krl-orbs">
  <span class="krl-orbs__orb"></span>
  <span class="krl-orbs__orb"></span>
  <span class="krl-orbs__orb"></span>
  <span class="krl-orbs__orb"></span>
</div>

.krl-orbs{position:relative;width:280px;height:160px;border-radius:18px;overflow:hidden;background:#0a0d12;border:1px solid #1f2630;}
.krl-orbs__orb{position:absolute;border-radius:50%;filter:blur(8px);opacity:.7;animation:krl-orbs-float 6s ease-in-out infinite;}
.krl-orbs__orb:nth-child(1){width:70px;height:70px;background:#00ffa3;top:10px;left:20px;}
.krl-orbs__orb:nth-child(2){width:54px;height:54px;background:#f5a623;bottom:16px;right:30px;animation-delay:1.2s;}
.krl-orbs__orb:nth-child(3){width:40px;height:40px;background:#33ffb5;top:50px;right:70px;animation-delay:2.4s;}
.krl-orbs__orb:nth-child(4){width:48px;height:48px;background:#ffb733;bottom:30px;left:80px;animation-delay:3.6s;}
@keyframes krl-orbs-float{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(14px,-18px) scale(1.12);}}

<div class="krl-orbs">
  <span class="krl-orbs__orb"></span>
  <span class="krl-orbs__orb"></span>
  <span class="krl-orbs__orb"></span>
  <span class="krl-orbs__orb"></span>
</div>

backgroundorbsglow

#17

Scale Lift

A card-style element that scales up with a deepening shadow on hover for a tactile lift effect.

Hover

<button class="krl-hover-lift">
  Explore <svg ...></svg>
</button>

.krl-hover-lift{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 28px;border-radius:12px;
  background:#14191f;border:1px solid #1f2630;
  color:#fff;font-family:'Poppins',sans-serif;
  font-size:14px;font-weight:600;cursor:pointer;
  transition:transform .3s,box-shadow .3s,border-color .3s;
}
.krl-hover-lift:hover{
  transform:translateY(-6px) scale(1.03);
  box-shadow:0 16px 40px rgba(0,0,0,.4);
  border-color:#00ffa3;
}

<button class="krl-hover-lift">Explore</button>

hoverscaleshadow

#18

Underline Slide

An animated underline that slides in from left to right on hover, perfect for links and navigation.

Hover

Hover to reveal

<span class="krl-hover-underline">Hover to reveal</span>

.krl-hover-underline{
  position:relative;display:inline;
  font-family:'Poppins',sans-serif;
  font-size:16px;font-weight:600;color:#fff;
  text-decoration:none;cursor:pointer;
}
.krl-hover-underline::after{
  content:"";position:absolute;
  bottom:-2px;left:0;width:0;height:2px;
  background:linear-gradient(90deg,#00ffa3,#f5a623);
  transition:width .4s ease;border-radius:1px;
}
.krl-hover-underline:hover::after{width:100%;}

<span class="krl-hover-underline">Hover to reveal</span>

hoverunderlinelink

#19

Icon Bounce

An icon that bounces up and down on hover with a smooth spring-like animation.

Hover

Upload

<div class="krl-hover-bounce">
  <div class="krl-hover-bounce__icon">
    <svg ...>...</svg>
  </div>
  <span class="krl-hover-bounce__label">Upload</span>
</div>

.krl-hover-bounce{display:inline-flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;font-family:'Poppins',sans-serif;}
.krl-hover-bounce__icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(0,255,163,.1);border:1px solid rgba(0,255,163,.2);transition:transform .3s;}
.krl-hover-bounce:hover .krl-hover-bounce__icon{transform:translateY(-6px);animation:krl-bounce-icon .5s ease;}
@keyframes krl-bounce-icon{0%,100%{transform:translateY(-6px);}50%{transform:translateY(-12px);}}
.krl-hover-bounce__label{font-size:12px;color:rgba(255,255,255,.5);}

<div class="krl-hover-bounce">
  <div class="krl-hover-bounce__icon">↑</div>
  <span class="krl-hover-bounce__label">Upload</span>
</div>

hovericonbounce

#20

Color Morph

A button that morphs its background to a gradient and rounds its corners on hover.

Hover

<button class="krl-hover-morph">Transform Me</button>

.krl-hover-morph{
  padding:14px 28px;border-radius:12px;
  font-family:'Poppins',sans-serif;font-size:14px;font-weight:600;
  color:#fff;cursor:pointer;border:2px solid transparent;
  background:#14191f;transition:all .4s ease;
}
.krl-hover-morph:hover{
  background:linear-gradient(135deg,#00ffa3,#f5a623);
  color:#04130c;border-color:transparent;
  border-radius:50px;box-shadow:0 0 24px rgba(0,255,163,.3);
}

<button class="krl-hover-morph">Transform Me</button>

hovermorphcolor

#21

Gradient Spinner Border

A card wrapped in a rotating conic gradient border that spins continuously.

Borders

Conic Spin

Rotating gradient border

<div class="krl-border-gradient">
  <div class="krl-border-gradient__title">Conic Spin</div>
  <div class="krl-border-gradient__text">Rotating border</div>
</div>

.krl-border-gradient{position:relative;width:200px;padding:20px;border-radius:16px;background:#0d1117;}
.krl-border-gradient::before{content:"";position:absolute;inset:-3px;border-radius:18px;background:conic-gradient(#00ffa3,#f5a623,#33ffb5,#ffb733,#00ffa3);animation:krl-border-conic 4s linear infinite;z-index:-1;}
@keyframes krl-border-conic{to{transform:rotate(360deg);}}
.krl-border-gradient__title{font-family:'Poppins',sans-serif;font-size:16px;font-weight:700;color:#fff;}
.krl-border-gradient__text{font-family:'Poppins',sans-serif;font-size:12px;color:rgba(255,255,255,.6);}

<div class="krl-border-gradient">
  <div class="krl-border-gradient__title">Conic Spin</div>
  <div class="krl-border-gradient__text">Rotating border</div>
</div>

borderconicgradient

#22

Dashed Rotate Border

A card with a dashed border that rotates around the element continuously.

Borders

Dashed Spin

Rotating dashed border

<div class="krl-border-dashed">
  <div class="krl-border-dashed__title">Dashed Spin</div>
  <div class="krl-border-dashed__text">Rotating dashed border</div>
</div>

.krl-border-dashed{position:relative;width:200px;padding:20px;border-radius:16px;background:#0d1117;overflow:hidden;}
.krl-border-dashed::before{content:"";position:absolute;inset:-3px;border-radius:18px;border:3px dashed #00ffa3;animation:krl-border-dash-rotate 8s linear infinite;}
@keyframes krl-border-dash-rotate{to{transform:rotate(360deg);}}

<div class="krl-border-dashed">
  <div class="krl-border-dashed__title">Dashed Spin</div>
  <div class="krl-border-dashed__text">Rotating dashed border</div>
</div>

borderdashedrotate

#23

Glow Pulse Border

A card with a border that pulses with a glowing emerald light effect.

Borders

Pulse Glow

Breathing glow border

<div class="krl-border-glow">
  <div class="krl-border-glow__title">Pulse Glow</div>
  <div class="krl-border-glow__text">Breathing glow border</div>
</div>

.krl-border-glow{
  position:relative;width:200px;padding:20px;border-radius:16px;
  background:#0d1117;border:2px solid rgba(0,255,163,.3);
  animation:krl-border-glow-pulse 2s ease-in-out infinite;
}
@keyframes krl-border-glow-pulse{
  0%,100%{border-color:rgba(0,255,163,.3);box-shadow:0 0 8px rgba(0,255,163,.1);}
  50%{border-color:rgba(0,255,163,.7);box-shadow:0 0 20px rgba(0,255,163,.25);}
}

<div class="krl-border-glow">
  <div class="krl-border-glow__title">Pulse Glow</div>
  <div class="krl-border-glow__text">Breathing glow border</div>
</div>

borderglowpulse

#24

Floating Label Input

An input field where the label floats up and shrinks when the field is focused or has content.

Forms

Your Name

<div class="krl-float-group">
  <input class="krl-float-input" type="text" placeholder=" " />
  <label class="krl-float-label">Your Name</label>
</div>

.krl-float-group{position:relative;width:240px;font-family:'Poppins',sans-serif;}
.krl-float-input{width:100%;padding:14px 12px 6px;border-radius:10px;border:1px solid #1f2630;background:#0a0d12;color:#fff;font-size:14px;outline:none;transition:border-color .2s;}
.krl-float-input:focus{border-color:#00ffa3;}
.krl-float-label{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:14px;color:rgba(255,255,255,.4);pointer-events:none;transition:all .2s ease;}
.krl-float-input:focus+.krl-float-label,
.krl-float-input:not(:placeholder-shown)+.krl-float-label{top:10px;transform:translateY(0);font-size:10px;color:#00ffa3;font-weight:600;}

<div class="krl-float-group">
  <input class="krl-float-input" type="text" placeholder=" " />
  <label class="krl-float-label">Your Name</label>
</div>

forminputfloat

#25

Glow Focus Input

An input field that glows with a soft emerald aura when focused.

Forms

<div class="krl-glow-input-wrap">
  <input class="krl-glow-input" type="text" placeholder="Focus me..." />
</div>

.krl-glow-input{width:100%;padding:12px 14px;border-radius:10px;border:2px solid #1f2630;background:#0a0d12;color:#fff;font-size:14px;outline:none;transition:border-color .3s,box-shadow .3s;}
.krl-glow-input:focus{border-color:#00ffa3;box-shadow:0 0 0 4px rgba(0,255,163,.15),0 0 20px rgba(0,255,163,.1);}
.krl-glow-input::placeholder{color:rgba(255,255,255,.3);}

<input class="krl-glow-input" type="text" placeholder="Focus me..." />

forminputglow

#26

Tooltip

A custom CSS tooltip that appears with a smooth animation on hover — no JavaScript needed.

Misc

I'm a pure CSS tooltip!

<div class="krl-tooltip-wrap">
  <button class="krl-tooltip-trigger">Hover me</button>
  <div class="krl-tooltip-box">I'm a tooltip!</div>
</div>

.krl-tooltip-wrap{position:relative;display:inline-block;}
.krl-tooltip-trigger{padding:10px 24px;border-radius:8px;border:1px solid #1f2630;background:#14191f;color:#fff;font-size:13px;cursor:pointer;transition:border-color .2s;}
.krl-tooltip-trigger:hover{border-color:#00ffa3;}
.krl-tooltip-box{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(6px);padding:8px 14px;border-radius:8px;background:#1a2229;border:1px solid #2c3540;color:#fff;font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:all .25s ease;box-shadow:0 8px 20px rgba(0,0,0,.3);}
.krl-tooltip-box::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:#1a2229;}
.krl-tooltip-wrap:hover .krl-tooltip-box{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;}

<div class="krl-tooltip-wrap">
  <button class="krl-tooltip-trigger">Hover me</button>
  <div class="krl-tooltip-box">I'm a tooltip!</div>
</div>

tooltiphoverpopup

#27

Accordion

A CSS-only accordion that expands and collapses with smooth max-height transitions.

Misc

Content for section one goes here.

Content for section two goes here.

<div class="krl-accordion">
  <div class="krl-accordion-item">
    <button class="krl-accordion-trigger">Section <svg ...></button>
    <div class="krl-accordion-body">...</div>
  </div>
</div>

.krl-accordion{width:260px;border:1px solid #1f2630;border-radius:12px;overflow:hidden;font-family:'Poppins',sans-serif;}
.krl-accordion-item{border-bottom:1px solid #1f2630;}
.krl-accordion-trigger{width:100%;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;background:transparent;border:none;color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:background .2s;}
.krl-accordion-trigger:hover{background:rgba(255,255,255,.03);}
.krl-accordion-body{max-height:0;overflow:hidden;transition:max-height .4s ease;}
.krl-accordion-body__inner{padding:0 16px 12px;font-size:12px;color:rgba(255,255,255,.6);}
.krl-accordion-trigger--open+.krl-accordion-body{max-height:100px;}

<div class="krl-accordion">
  <div class="krl-accordion-item">
    <button class="krl-accordion-trigger">Section</button>
    <div class="krl-accordion-body">Content</div>
  </div>
</div>

accordionexpandcollapse

#28

Glitch Text

A cyberpunk glitch effect with color channel splitting — pure CSS.

Text

GLITCH

<div class="krl-glitch" data-text="GLITCH">GLITCH</div>

.krl-glitch{font-family:'Poppins',sans-serif;font-size:40px;font-weight:800;color:#fff;position:relative;display:inline-block;}
.krl-glitch::before,.krl-glitch::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;}
.krl-glitch::before{color:#00ffa3;z-index:-1;animation:krl-glitch-1 3s infinite linear alternate-reverse;}
.krl-glitch::after{color:#f5a623;z-index:-2;animation:krl-glitch-2 3s infinite linear alternate-reverse;}
@keyframes krl-glitch-1{0%,88%,92%,95%,100%{clip-path:inset(0);transform:translate(0);}89%{clip-path:inset(20% 0 60% 0);transform:translate(-4px,0);}93%{clip-path:inset(60% 0 10% 0);transform:translate(4px,0);}}
@keyframes krl-glitch-2{0%,85%,90%,94%,100%{clip-path:inset(0);transform:translate(0);}86%{clip-path:inset(50% 0 20% 0);transform:translate(4px,0);}91%{clip-path:inset(10% 0 70% 0);transform:translate(-4px,0);}}

glitchtextcyberpunk

#29

Elastic Button

A rubber-band elastic bounce button using cubic-bezier spring physics.

Buttons

<button class="krl-elastic-btn">Hover Me</button>

.krl-elastic-btn{padding:14px 40px;font-family:'Poppins',sans-serif;font-size:14px;font-weight:600;color:#fff;background:linear-gradient(135deg,#ff6b9d,#c44dff);border:none;border-radius:12px;cursor:pointer;transition:transform .5s cubic-bezier(.68,-.55,.27,1.55),box-shadow .3s;box-shadow:0 4px 15px rgba(196,77,255,.3);}
.krl-elastic-btn:hover{transform:scale(1.1);box-shadow:0 8px 30px rgba(196,77,255,.5);}
.krl-elastic-btn:active{transform:scale(.92);transition-duration:.1s;}

elasticrubberscale

#30

3D Tilt Card

A card with 3D perspective tilt on hover — depth via transform-style and dynamic shadows.

Cards

✦

3D Tilt

Hover to see the perspective tilt effect with dynamic lighting shadows.

<div class="krl-tilt-card">
  <div class="krl-tilt-card__icon">✦</div>
  <div class="krl-tilt-card__title">3D Tilt</div>
  <div class="krl-tilt-card__text">Hover me</div>
</div>

.krl-tilt-card{width:220px;padding:24px 20px;border-radius:18px;background:linear-gradient(145deg,#14191f,#0d1117);border:1px solid #1f2630;color:#fff;font-family:'Poppins',sans-serif;text-align:center;transition:transform .5s ease,box-shadow .5s ease;transform-style:preserve-3d;}
.krl-tilt-card:hover{transform:rotateY(-8deg) rotateX(5deg) translateZ(10px);box-shadow:-10px 10px 40px rgba(0,255,163,.12),10px -5px 30px rgba(245,166,35,.08);}

3dtiltperspective

#31

Morphing Blob

An organic blob that continuously morphs — great for hero backgrounds.

Backgrounds

MORPH

<div class="krl-blob-scene">
  <div class="krl-blob"></div>
  <div class="krl-blob"></div>
  <span class="krl-blob-text">MORPH</span>
</div>

.krl-blob-scene{width:180px;height:180px;position:relative;display:flex;align-items:center;justify-content:center;}
.krl-blob{position:absolute;width:120px;height:120px;background:linear-gradient(135deg,#00ffa3,#f5a623,#ff6b9d);border-radius:60% 40% 30% 70%/60% 30% 70% 40%;animation:krl-blob-morph 8s ease-in-out infinite;opacity:.85;}
.krl-blob:nth-child(2){width:100px;height:100px;background:linear-gradient(135deg,#c44dff,#00ffa3,#f5a623);border-radius:30% 70% 70% 30%/30% 30% 70% 70%;animation:krl-blob-morph 10s ease-in-out infinite reverse;opacity:.6;}
@keyframes krl-blob-morph{0%,100%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%;}25%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%;}50%{border-radius:50% 60% 30% 60%/40% 70% 50% 50%;}75%{border-radius:40% 30% 60% 50%/60% 40% 60% 40%;}}

blobmorphorganic

#32

Conic Gradient Border

A spinning conic gradient border — eye-catching animated frame.

Borders

Rotating Border

<div class="krl-conic-wrap">
  <div class="krl-conic-inner">Rotating Border</div>
</div>

.krl-conic-wrap{position:relative;width:200px;height:120px;border-radius:16px;padding:2px;overflow:hidden;}
.krl-conic-wrap::before{content:'';position:absolute;inset:-50%;background:conic-gradient(from 0deg,#00ffa3,#f5a623,#ff6b9d,#c44dff,#00ffa3);animation:krl-conic-spin 3s linear infinite;}
.krl-conic-inner{position:relative;z-index:1;width:100%;height:100%;border-radius:14px;background:#0d1117;display:flex;align-items:center;justify-content:center;font-family:'Poppins',sans-serif;color:#fff;font-size:14px;font-weight:600;}
@keyframes krl-conic-spin{to{transform:rotate(360deg);}}

conicgradientrotating

#33

Custom Toggle Switch

A smooth animated toggle switch with multiple style variants.

Forms

Enabled

Disabled

Small

Accent

<label class="krl-toggle-item">
  <input type="checkbox" />
  <div class="krl-toggle-track"></div>
  Toggle me
</label>

.krl-toggle-item{display:flex;align-items:center;gap:10px;cursor:pointer;font-family:'Poppins',sans-serif;font-size:13px;color:rgba(255,255,255,.7);}
.krl-toggle-item input{display:none;}
.krl-toggle-track{position:relative;width:48px;height:26px;border-radius:13px;background:#1f2630;transition:background .3s;flex-shrink:0;}
.krl-toggle-track::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s;box-shadow:0 2px 4px rgba(0,0,0,.3);}
.krl-toggle-item input:checked+.krl-toggle-track{background:#00ffa3;}
.krl-toggle-item input:checked+.krl-toggle-track::after{transform:translateX(22px);box-shadow:0 2px 8px rgba(0,255,163,.4);}

toggleswitchform

#34

Shimmer Skeleton

A shimmer skeleton loader mimicking content layout — perfect for loading states.

Loaders

<div class="krl-skeleton">
  <div class="krl-skeleton__avatar"></div>
  <div class="krl-skeleton__line"></div>
  <div class="krl-skeleton__block"></div>
</div>

.krl-skeleton{display:flex;flex-direction:column;gap:12px;}
.krl-skeleton__avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(90deg,#1a2229 25%,#242d38 50%,#1a2229 75%);background-size:200% 100%;animation:krl-shimmer 1.8s ease-in-out infinite;}
.krl-skeleton__line{height:12px;border-radius:6px;background:linear-gradient(90deg,#1a2229 25%,#242d38 50%,#1a2229 75%);background-size:200% 100%;animation:krl-shimmer 1.8s ease-in-out infinite;}
.krl-skeleton__block{height:80px;border-radius:10px;background:linear-gradient(90deg,#1a2229 25%,#242d38 50%,#1a2229 75%);background-size:200% 100%;animation:krl-shimmer 1.8s ease-in-out infinite;}
@keyframes krl-shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

shimmerskeletonloading

#35

Animated Underline

Smooth gradient underline that animates on hover — clean and modern.

Hover

Hover for underlineAnother link

<span class="krl-underline-link">Hover for underline</span>

.krl-underline-link{font-family:'Poppins',sans-serif;font-size:18px;font-weight:600;color:#fff;text-decoration:none;position:relative;display:inline-block;cursor:pointer;}
.krl-underline-link::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:3px;background:linear-gradient(90deg,#00ffa3,#f5a623);border-radius:2px;transition:width .4s cubic-bezier(.4,0,.2,1);}
.krl-underline-link:hover::after{width:100%;}

underlinehoverlink

#36

Pulse Notification

A notification bell with a pulsing badge dot — continuous ripple attention effect.

Misc

3

<div class="krl-notif-wrap">
  <svg viewBox="0 0 24 24">...bell icon...</svg>
  <div class="krl-notif-dot">3</div>
</div>

.krl-notif-wrap{position:relative;display:inline-flex;width:48px;height:48px;border-radius:12px;border:1px solid #1f2630;background:#14191f;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s;}
.krl-notif-wrap:hover{border-color:#00ffa3;}
.krl-notif-dot{position:absolute;top:-4px;right:-4px;width:18px;height:18px;border-radius:50%;background:#ff4757;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 0 rgba(255,71,87,.6);animation:krl-notif-pulse 2s ease-out infinite;}
@keyframes krl-notif-pulse{0%{box-shadow:0 0 0 0 rgba(255,71,87,.6);}70%{box-shadow:0 0 0 12px rgba(255,71,87,0);}100%{box-shadow:0 0 0 0 rgba(255,71,87,0);}}

notificationpulsebadge

#37

Text Reveal

Text reveals from stroke outline to gradient fill using clip-path animation.

Text

KERLION

<div class="krl-text-reveal">KERLION</div>

.krl-text-reveal{font-family:'Poppins',sans-serif;font-size:36px;font-weight:800;color:transparent;-webkit-text-stroke:2px #00ffa3;position:relative;display:inline-block;animation:krl-text-reveal-anim 4s ease-in-out infinite;}
.krl-text-reveal::after{content:'KERLION';position:absolute;top:0;left:0;background:linear-gradient(90deg,#00ffa3,#f5a623);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;clip-path:inset(0 100% 0 0);animation:krl-text-reveal-fill 4s ease-in-out infinite;}
@keyframes krl-text-reveal-fill{0%,30%{clip-path:inset(0 100% 0 0);}60%,100%{clip-path:inset(0 0 0 0);}}

revealclip-pathstroke

#38

Spotlight Card

A card with a radial spotlight that illuminates on hover — premium feel.

Cards

NEW

Spotlight

Hover to reveal the light effect that follows your cursor position.

<div class="krl-spotlight-card">
  <span class="krl-spotlight-card__badge">NEW</span>
  <div class="krl-spotlight-card__title">Spotlight</div>
  <div class="krl-spotlight-card__text">Hover me</div>
</div>

.krl-spotlight-card{position:relative;width:220px;padding:24px 20px;border-radius:18px;background:#0d1117;border:1px solid #1f2630;color:#fff;overflow:hidden;transition:border-color .3s;}
.krl-spotlight-card::before{content:'';position:absolute;width:200px;height:200px;background:radial-gradient(circle,rgba(0,255,163,.15) 0%,transparent 70%);border-radius:50%;transform:translate(-50%,-50%);transition:all .3s ease;opacity:0;pointer-events:none;}
.krl-spotlight-card:hover::before{opacity:1;left:80%;top:80%;}
.krl-spotlight-card:hover{border-color:#2c3540;}

spotlightcardglow

#39

Progress Ring

Animated circular progress with SVG stroke — clean and informative.

Misc

75%

<div class="krl-progress-ring">
  <svg viewBox="0 0 80 80">
    <circle class="krl-progress-ring__bg" cx="40" cy="40" r="36"/>
    <circle class="krl-progress-ring__fill" cx="40" cy="40" r="36"/>
  </svg>
  <div class="krl-progress-ring__text">75%</div>
</div>

.krl-progress-ring{position:relative;width:80px;height:80px;}
.krl-progress-ring svg{width:80px;height:80px;transform:rotate(-90deg);}
.krl-progress-ring__bg{fill:none;stroke:#1f2630;stroke-width:6;}
.krl-progress-ring__fill{fill:none;stroke:#00ffa3;stroke-width:6;stroke-linecap:round;stroke-dasharray:226;stroke-dashoffset:56;animation:krl-ring-fill 3s ease-in-out infinite alternate;}
.krl-progress-ring__text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Poppins',sans-serif;font-size:18px;font-weight:700;color:#00ffa3;}
@keyframes krl-ring-fill{0%{stroke-dashoffset:226;}100%{stroke-dashoffset:56;}}

progressringsvg

#40

Particle Dots

Floating particle dots that rise and fade — perfect for ambient backgrounds.

Backgrounds

PARTICLES

<div class="krl-particles">
  <span class="krl-particles__dot"></span>
  <span class="krl-particles__dot"></span>
  <span class="krl-particles__dot"></span>
  <span class="krl-particles__dot"></span>
  <span class="krl-particles__dot"></span>
  <span class="krl-particles__dot"></span>
  <span class="krl-particles__dot"></span>
  <span class="krl-particles__dot"></span>
  <span class="krl-particles__text">PARTICLES</span>
</div>

.krl-particles{position:relative;width:220px;height:130px;border-radius:12px;overflow:hidden;background:#0d1117;border:1px solid #1f2630;}
.krl-particles__dot{position:absolute;width:4px;height:4px;border-radius:50%;background:#00ffa3;opacity:0;animation:krl-particle-float 4s ease-in-out infinite;}
.krl-particles__dot:nth-child(1){left:15%;top:20%;animation-delay:0s;}
.krl-particles__dot:nth-child(2){left:40%;top:60%;animation-delay:.5s;background:#33ffb5;}
.krl-particles__dot:nth-child(3){left:65%;top:30%;animation-delay:1s;background:#f5a623;}
.krl-particles__dot:nth-child(4){left:80%;top:70%;animation-delay:1.5s;background:#ff6b9d;}
.krl-particles__dot:nth-child(5){left:25%;top:80%;animation-delay:2s;background:#c44dff;}
.krl-particles__dot:nth-child(6){left:55%;top:15%;animation-delay:2.5s;background:#66ffcc;}
.krl-particles__dot:nth-child(7){left:90%;top:45%;animation-delay:.8s;background:#ffb733;}
.krl-particles__dot:nth-child(8){left:10%;top:50%;animation-delay:1.8s;}
@keyframes krl-particle-float{0%{opacity:0;transform:translateY(20px) scale(0);}20%{opacity:1;transform:translateY(0) scale(1);}80%{opacity:.8;transform:translateY(-20px) scale(.8);}100%{opacity:0;transform:translateY(-40px) scale(0);}}

particlesdotsfloating

#41

Liquid Fill Button

A button with a liquid wave fill that rises from the bottom on hover.

Buttons

<button class="krl-liquid-btn">Hover to Fill</button>

.krl-liquid-btn{
  position:relative;padding:14px 40px;
  font-family:'Poppins',sans-serif;font-size:14px;font-weight:600;
  color:#fff;background:transparent;
  border:2px solid #00ffa3;border-radius:12px;
  cursor:pointer;overflow:hidden;z-index:1;
  transition:color .5s ease;
}
.krl-liquid-btn::before{
  content:'';position:absolute;bottom:-60%;left:-10%;
  width:120%;height:200%;
  background:linear-gradient(135deg,#00ffa3,#00cc82);
  border-radius:42%;
  animation:krl-liquid-wave 4s linear infinite;
  transition:bottom .6s cubic-bezier(.23,1,.32,1);z-index:-1;
}
.krl-liquid-btn:hover::before{bottom:-25%;}
.krl-liquid-btn:hover{color:#04130c;border-color:transparent;
  box-shadow:0 4px 24px rgba(0,255,163,.35);}
@keyframes krl-liquid-wave{0%{transform:rotate(0);}100%{transform:rotate(360deg);}}

<button class="krl-liquid-btn">Hover to Fill</button>

liquidwavefill

#42

Holographic Card

A premium card with rotating holographic shimmer on hover.

Cards

✦

Holographic

Hover to reveal the rainbow holographic shimmer effect

<div class="krl-holo-card">
  <div class="krl-holo-card__icon">✦</div>
  <div class="krl-holo-card__title">Holographic</div>
  <div class="krl-holo-card__text">Hover me</div>
</div>

.krl-holo-card{
  width:220px;padding:24px 20px;border-radius:18px;
  background:linear-gradient(145deg,#14191f,#0d1117);
  border:1px solid #1f2630;color:#fff;
  font-family:'Poppins',sans-serif;text-align:center;
  position:relative;overflow:hidden;
  transition:transform .4s,box-shadow .4s;
}
.krl-holo-card::before{
  content:'';position:absolute;top:-50%;left:-50%;
  width:200%;height:200%;
  background:conic-gradient(from 0deg,
    transparent 0%,rgba(0,255,163,.15) 10%,transparent 20%,
    rgba(245,166,35,.15) 30%,transparent 40%,
    rgba(255,107,157,.15) 50%,transparent 60%,
    rgba(196,77,255,.15) 70%,transparent 80%,
    rgba(0,255,163,.15) 90%,transparent 100%);
  animation:krl-holo-rotate 4s linear infinite;
  opacity:0;transition:opacity .4s;
}
.krl-holo-card:hover::before{opacity:1;}
.krl-holo-card::after{
  content:'';position:absolute;inset:1px;
  border-radius:17px;
  background:linear-gradient(145deg,#14191f,#0d1117);
  z-index:1;
}
.krl-holo-card:hover{transform:translateY(-6px) scale(1.02);
  box-shadow:0 12px 40px rgba(0,255,163,.12);}
@keyframes krl-holo-rotate{to{transform:rotate(360deg);}}

<div class="krl-holo-card">
  <div class="krl-holo-card__icon">✦</div>
  <div class="krl-holo-card__title">Holographic</div>
  <div class="krl-holo-card__text">Hover me</div>
</div>

holographicrainbowshimmer

#43

Wave Text

Letters animate in a smooth wave pattern with staggered delays.

Text

KERLION

<div class="krl-wave-text">
  <span style="animation-delay:0s">K</span>
  <span style="animation-delay:.1s">E</span>
  <span style="animation-delay:.2s">R</span>
  <span style="animation-delay:.3s">L</span>
  <span style="animation-delay:.4s">I</span>
  <span style="animation-delay:.5s">O</span>
  <span style="animation-delay:.6s">N</span>
</div>

.krl-wave-text{
  display:flex;font-family:'Poppins',sans-serif;
  font-size:36px;font-weight:800;
  background:linear-gradient(90deg,#00ffa3,#f5a623);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.krl-wave-text span{
  display:inline-block;
  animation:krl-wave-letter 2.5s ease-in-out infinite;
}
@keyframes krl-wave-letter{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-18px);}
}

<div class="krl-wave-text">
  <span style="animation-delay:0s">K</span>
  <span style="animation-delay:.1s">E</span>
  <span style="animation-delay:.2s">R</span>
  <span style="animation-delay:.3s">L</span>
  <span style="animation-delay:.4s">I</span>
  <span style="animation-delay:.5s">O</span>
  <span style="animation-delay:.6s">N</span>
</div>

wavetextletter

#44

3D Cube Loader

A 3D wireframe cube rotating in two axes — clean and mesmerizing.

Loaders

<div class="krl-cube-wrap">
  <div class="krl-cube">
    <div class="krl-cube__face"></div>
    <div class="krl-cube__face"></div>
    <div class="krl-cube__face"></div>
    <div class="krl-cube__face"></div>
    <div class="krl-cube__face"></div>
    <div class="krl-cube__face"></div>
  </div>
</div>

.krl-cube-wrap{
  width:60px;height:60px;perspective:200px;margin:0 auto;
}
.krl-cube{
  width:100%;height:100%;position:relative;
  transform-style:preserve-3d;
  animation:krl-cube-spin 2.5s linear infinite;
}
.krl-cube__face{
  position:absolute;width:60px;height:60px;
  border:2px solid #00ffa3;
  background:rgba(0,255,163,.06);border-radius:6px;
}
.krl-cube__face:nth-child(1){transform:rotateY(0) translateZ(30px);}
.krl-cube__face:nth-child(2){transform:rotateY(90deg) translateZ(30px);}
.krl-cube__face:nth-child(3){transform:rotateY(180deg) translateZ(30px);}
.krl-cube__face:nth-child(4){transform:rotateY(270deg) translateZ(30px);}
.krl-cube__face:nth-child(5){transform:rotateX(90deg) translateZ(30px);}
.krl-cube__face:nth-child(6){transform:rotateX(-90deg) translateZ(30px);}
@keyframes krl-cube-spin{
  0%{transform:rotateX(0) rotateY(0);}
  100%{transform:rotateX(360deg) rotateY(360deg);}
}

<div class="krl-cube-wrap">
  <div class="krl-cube">
    <div class="krl-cube__face"></div>
    <div class="krl-cube__face"></div>
    <div class="krl-cube__face"></div>
    <div class="krl-cube__face"></div>
    <div class="krl-cube__face"></div>
    <div class="krl-cube__face"></div>
  </div>
</div>

3dcubeloader

#45

Mesh Gradient Background

Blurred gradient orbs that drift smoothly — ambient mesh gradient.

Backgrounds

MESH

<div class="krl-mesh-bg">
  <div class="krl-mesh-orb krl-mesh-orb--1"></div>
  <div class="krl-mesh-orb krl-mesh-orb--2"></div>
  <div class="krl-mesh-orb krl-mesh-orb--3"></div>
  <span class="krl-mesh-label">MESH</span>
</div>

.krl-mesh-bg{
  width:220px;height:130px;border-radius:12px;
  overflow:hidden;position:relative;
  background:#0d1117;border:1px solid #1f2630;
}
.krl-mesh-orb{
  position:absolute;border-radius:50%;
  filter:blur(35px);opacity:.65;
  animation:krl-mesh-drift 7s ease-in-out infinite alternate;
}
.krl-mesh-orb--1{width:110px;height:110px;
  background:#00ffa3;top:-15%;left:-5%;}
.krl-mesh-orb--2{width:90px;height:90px;
  background:#f5a623;bottom:-15%;right:-5%;
  animation-delay:-3.5s;animation-direction:alternate-reverse;}
.krl-mesh-orb--3{width:70px;height:70px;
  background:#c44dff;top:20%;left:40%;
  animation-delay:-1.5s;opacity:.4;}
@keyframes krl-mesh-drift{
  0%{transform:translate(0,0) scale(1);}
  100%{transform:translate(35px,25px) scale(1.25);}
}

<div class="krl-mesh-bg">
  <div class="krl-mesh-orb krl-mesh-orb--1"></div>
  <div class="krl-mesh-orb krl-mesh-orb--2"></div>
  <div class="krl-mesh-orb krl-mesh-orb--3"></div>
  <span class="krl-mesh-label">MESH</span>
</div>

meshgradientblur

#46

Jelly Wobble

An element that wobbles like jelly on hover — spring-physics animation.

Hover

Hover me

<div class="krl-jelly-box">Hover me</div>

.krl-jelly-box{
  width:120px;height:120px;border-radius:18px;
  background:linear-gradient(135deg,#ff6b9d,#c44dff);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:'Poppins',sans-serif;
  font-size:13px;font-weight:600;cursor:pointer;
  transition:transform .15s;
  box-shadow:0 4px 16px rgba(196,77,255,.25);
}
.krl-jelly-box:hover{
  animation:krl-jelly-wobble .7s ease;
}
@keyframes krl-jelly-wobble{
  0%{transform:scale(1,1);}
  15%{transform:scale(.92,1.08);}
  30%{transform:scale(1.06,.94);}
  45%{transform:scale(.97,1.03);}
  60%{transform:scale(1.02,.98);}
  75%{transform:scale(.99,1.01);}
  100%{transform:scale(1,1);}
}

<div class="krl-jelly-box">Hover me</div>

jellywobblehover

#47

Rainbow Border

A continuously rotating rainbow border — eye-catching and vibrant.

Borders

Rainbow Borderconic-gradient rotation

<div class="krl-rainbow-wrap">
  <div class="krl-rainbow-inner">
    Rainbow Border
    <span>conic-gradient rotation</span>
  </div>
</div>

.krl-rainbow-wrap{
  position:relative;padding:3px;
  border-radius:16px;overflow:hidden;
}
.krl-rainbow-wrap::before{
  content:'';position:absolute;inset:-50%;
  background:conic-gradient(from 0deg,
    #ff0000,#ff7700,#ffff00,#00ff00,
    #0088ff,#8b00ff,#ff0000);
  animation:krl-rainbow-spin 3s linear infinite;
}
.krl-rainbow-inner{
  position:relative;padding:20px 28px;
  border-radius:14px;background:#0d1117;
  color:#fff;font-family:'Poppins',sans-serif;
  font-size:13px;font-weight:600;z-index:1;
  text-align:center;
}
@keyframes krl-rainbow-spin{
  to{transform:rotate(360deg);}
}

<div class="krl-rainbow-wrap">
  <div class="krl-rainbow-inner">
    Rainbow Border
    <span>conic-gradient rotation</span>
  </div>
</div>

rainbowconicgradient

#48

Slide Fill Input

Input with gradient background that slides in from the left on focus.

Forms

<div class="krl-slide-wrap">
  <input class="krl-slide-input" type="text"
    placeholder="Focus to see the fill..." />
</div>

.krl-slide-wrap{
  position:relative;width:240px;
  border-radius:10px;overflow:hidden;
}
.krl-slide-wrap::before{
  content:'';position:absolute;left:0;top:0;
  height:100%;width:0;
  background:linear-gradient(90deg,
    rgba(0,255,163,.12),rgba(245,166,35,.06));
  transition:width .5s cubic-bezier(.23,1,.32,1);
  z-index:1;pointer-events:none;
}
.krl-slide-wrap:focus-within::before{width:100%;}
.krl-slide-input{
  width:100%;padding:12px 16px;border-radius:10px;
  border:1px solid #1f2630;background:#0a0d12;
  color:#fff;font-family:'Poppins',sans-serif;
  font-size:13px;outline:none;
  transition:border-color .3s,box-shadow .3s;
  position:relative;z-index:2;box-sizing:border-box;
}
.krl-slide-input:focus{
  border-color:#00ffa3;
  box-shadow:0 0 0 3px rgba(0,255,163,.1);
}

<div class="krl-slide-wrap">
  <input class="krl-slide-input" type="text"
    placeholder="Focus to see the fill..." />
</div>

formslidefill

#49

Floating Action Button

A FAB that expands to reveal sub-actions on hover with spring animation.

Misc

<div class="krl-fab-container">
  <div class="krl-fab-item krl-fab-item--1">...</div>
  <div class="krl-fab-item krl-fab-item--2">...</div>
  <div class="krl-fab-item krl-fab-item--3">...</div>
  <button class="krl-fab-main">+</button>
</div>

.krl-fab-container{
  position:relative;width:56px;height:56px;margin:20px auto;
}
.krl-fab-main{
  width:56px;height:56px;border-radius:50%;border:none;
  background:#00ffa3;color:#04130c;font-size:28px;
  cursor:pointer;position:relative;z-index:3;
  display:flex;align-items:center;justify-content:center;
  transition:transform .35s cubic-bezier(.68,-.55,.27,1.55),
    background .3s,box-shadow .3s;
  box-shadow:0 4px 20px rgba(0,255,163,.4);
}
.krl-fab-container:hover .krl-fab-main{
  background:#f5a623;
}
.krl-fab-container:hover .krl-fab-main svg{
  transform:rotate(45deg);
}
.krl-fab-item{
  position:absolute;width:40px;height:40px;
  border-radius:50%;background:#1a2229;
  border:1px solid #2c3540;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(0);
  transition:all .3s cubic-bezier(.68,-.55,.27,1.55);
  cursor:pointer;z-index:2;
}
.krl-fab-item:hover{
  background:#00ffa3;border-color:#00ffa3;
}
.krl-fab-container:hover .krl-fab-item{
  opacity:1;transform:scale(1);
}
.krl-fab-item--1{bottom:64px;left:8px;transition-delay:.04s;}
.krl-fab-item--2{bottom:48px;left:-16px;transition-delay:.08s;}
.krl-fab-item--3{bottom:20px;left:-30px;transition-delay:.12s;}

<div class="krl-fab-container">
  <div class="krl-fab-item krl-fab-item--1">...</div>
  <div class="krl-fab-item krl-fab-item--2">...</div>
  <div class="krl-fab-item krl-fab-item--3">...</div>
  <button class="krl-fab-main">+</button>
</div>

fabexpandmenu

#50

Ghost Glow Button

A ghost button that fills with a sweep and gains neon glow on hover.

Buttons

<button class="krl-ghost-btn">Ghost Glow</button>

.krl-ghost-btn{
  padding:14px 40px;font-family:'Poppins',sans-serif;
  font-size:14px;font-weight:600;color:#00ffa3;
  background:transparent;
  border:2px solid rgba(0,255,163,.4);
  border-radius:12px;cursor:pointer;
  position:relative;overflow:hidden;
  transition:color .4s,transform .25s,box-shadow .4s;
}
.krl-ghost-btn::before{
  content:'';position:absolute;inset:0;
  background:#00ffa3;
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.23,1,.32,1);
  z-index:-1;
}
.krl-ghost-btn:hover::before{transform:scaleX(1);}
.krl-ghost-btn:hover{
  color:#04130c;
  box-shadow:0 0 30px rgba(0,255,163,.4),
    0 0 60px rgba(0,255,163,.15);
  transform:translateY(-2px);
}
.krl-ghost-btn:active{transform:translateY(0) scale(.97);}

<button class="krl-ghost-btn">Ghost Glow</button>

ghostglowsweep

#51

Glitch Card

A card with digital glitch distortion on hover — color channel splitting.

Cards

Glitch Card

Hover to trigger the digital glitch distortion effect

<div class="krl-glitch-card" data-glitch="GLITCH">
  <div class="krl-glitch-card__title">Glitch Card</div>
  <div class="krl-glitch-card__text">Hover me</div>
</div>

.krl-glitch-card{
  width:220px;padding:24px 20px;border-radius:16px;
  background:#0d1117;border:1px solid #1f2630;
  color:#fff;font-family:'Poppins',sans-serif;
  text-align:center;position:relative;
  transition:box-shadow .3s;
}
.krl-glitch-card::before,
.krl-glitch-card::after{
  content:attr(data-glitch);position:absolute;
  top:12px;left:20px;font-size:15px;font-weight:700;
  color:#fff;pointer-events:none;opacity:0;
  transition:opacity .2s;
}
.krl-glitch-card::before{
  color:#00ffa3;clip-path:inset(0 0 65% 0);}
.krl-glitch-card::after{
  color:#f5a623;clip-path:inset(65% 0 0 0);}
.krl-glitch-card:hover::before{
  opacity:1;animation:krl-glitch-card-1 .8s infinite;}
.krl-glitch-card:hover::after{
  opacity:1;animation:krl-glitch-card-2 .8s infinite;}
.krl-glitch-card:hover{
  box-shadow:0 0 30px rgba(0,255,163,.1);}

<div class="krl-glitch-card" data-glitch="GLITCH">
  <div class="krl-glitch-card__title">Glitch Card</div>
  <div class="krl-glitch-card__text">Hover me</div>
</div>

glitchcarddistortion

#52

Radar Sweep

A radar loader with sweeping beam, rings, and blinking dots.

Loaders

<div class="krl-radar">
  <div class="krl-radar__ring krl-radar__ring--1"></div>
  <div class="krl-radar__ring krl-radar__ring--2"></div>
  <div class="krl-radar__dot krl-radar__dot--1"></div>
  <div class="krl-radar__dot krl-radar__dot--2"></div>
  <div class="krl-radar__dot krl-radar__dot--3"></div>
</div>

.krl-radar{
  width:90px;height:90px;border-radius:50%;
  border:2px solid rgba(0,255,163,.25);
  position:relative;margin:0 auto;
  background:radial-gradient(circle,
    rgba(0,255,163,.05) 0%,transparent 70%);
}
.krl-radar::before{
  content:'';position:absolute;
  top:50%;left:50%;width:50%;height:50%;
  transform-origin:0 0;
  background:conic-gradient(from 0deg,
    rgba(0,255,163,.5),transparent 70%);
  animation:krl-radar-sweep 2s linear infinite;
  border-radius:50%;
}
.krl-radar::after{
  content:'';position:absolute;
  top:50%;left:50%;width:6px;height:6px;
  background:#00ffa3;border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 10px rgba(0,255,163,.8);
}
.krl-radar__ring{
  position:absolute;border-radius:50%;
  border:1px solid rgba(0,255,163,.12);
}
.krl-radar__ring--1{inset:15%;}
.krl-radar__ring--2{inset:30%;}
@keyframes krl-radar-sweep{
  0%{transform:rotate(0);}100%{transform:rotate(360deg);}}

<div class="krl-radar">
  <div class="krl-radar__ring krl-radar__ring--1"></div>
  <div class="krl-radar__ring krl-radar__ring--2"></div>
  <div class="krl-radar__dot krl-radar__dot--1"></div>
  <div class="krl-radar__dot krl-radar__dot--2"></div>
  <div class="krl-radar__dot krl-radar__dot--3"></div>
</div>

radarsweeploader

#53

Neon Underline

Links with animated neon underlines in multiple colors with glow.

Hover

Emerald LinkAmber LinkRose LinkViolet Link

<div class="krl-neon-links">
  <a class="krl-neon-link">Emerald Link</a>
  <a class="krl-neon-link krl-neon-link--amber">Amber Link</a>
  <a class="krl-neon-link krl-neon-link--pink">Rose Link</a>
  <a class="krl-neon-link krl-neon-link--purple">Violet Link</a>
</div>

.krl-neon-links{
  display:flex;flex-direction:column;gap:16px;
  font-family:'Poppins',sans-serif;
}
.krl-neon-link{
  position:relative;color:rgba(255,255,255,.7);
  font-size:13px;font-weight:500;
  text-decoration:none;transition:color .3s;
  cursor:pointer;padding-bottom:2px;
}
.krl-neon-link::after{
  content:'';position:absolute;bottom:0;left:0;
  width:0;height:2px;background:#00ffa3;
  transition:width .4s cubic-bezier(.23,1,.32,1),
    box-shadow .4s;border-radius:2px;
}
.krl-neon-link:hover::after{
  width:100%;
  box-shadow:0 0 8px rgba(0,255,163,.6),
    0 0 20px rgba(0,255,163,.3);
}
.krl-neon-link:hover{color:#00ffa3;}
/* Also: .krl-neon-link--amber, --pink, --purple variants */

<div class="krl-neon-links">
  <a class="krl-neon-link">Emerald Link</a>
  <a class="krl-neon-link krl-neon-link--amber">Amber Link</a>
  <a class="krl-neon-link krl-neon-link--pink">Rose Link</a>
  <a class="krl-neon-link krl-neon-link--purple">Violet Link</a>
</div>

neonunderlineglow

#54

Magnetic Pull Button

A button that shifts and scales toward the cursor with a glowing border ring on hover.

Buttons

<button class="krl-mag-btn">Magnetic</button>

.krl-mag-btn{
  position:relative;padding:14px 36px;
  font-family:'Poppins',sans-serif;font-size:14px;font-weight:600;
  color:#04130c;background:#00ffa3;border:none;border-radius:10px;
  cursor:pointer;
  transition:transform .3s cubic-bezier(.23,1,.32,1),box-shadow .3s;
  box-shadow:0 4px 15px rgba(0,255,163,.3);
}
.krl-mag-btn::before{
  content:'';position:absolute;inset:-4px;border-radius:14px;
  border:2px solid rgba(0,255,163,.4);opacity:0;
  transition:opacity .3s,transform .3s;transform:scale(.95);
}
.krl-mag-btn:hover{
  transform:translate(4px,2px) scale(1.04);
  box-shadow:0 8px 30px rgba(0,255,163,.5),0 0 60px rgba(0,255,163,.15);
}
.krl-mag-btn:hover::before{opacity:1;transform:scale(1);}
.krl-mag-btn:active{transform:translate(2px,1px) scale(.98);}

<button class="krl-mag-btn">Magnetic</button>

magnetichoverglow

#55

Split Reveal Button

Text splits apart on hover revealing a gradient background underneath.

Buttons

<button class="krl-split-btn">
  <div class="krl-split-btn__bg"></div>
  <div class="krl-split-btn__top">Split Reveal</div>
  <div class="krl-split-btn__bot">Split Reveal</div>
</button>

.krl-split-btn{
  position:relative;display:inline-flex;height:48px;
  overflow:hidden;border-radius:10px;background:#1a2229;
  border:none;cursor:pointer;padding:0;
}
.krl-split-btn__top,.krl-split-btn__bot{
  display:flex;align-items:center;justify-content:center;
  height:50%;width:100%;font-family:'Poppins',sans-serif;
  font-size:14px;font-weight:600;
  transition:transform .4s cubic-bezier(.77,0,.175,1);
}
.krl-split-btn__bg{
  position:absolute;inset:0;
  background:linear-gradient(135deg,#00ffa3,#00d4a8);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .4s cubic-bezier(.77,0,.175,1);z-index:0;
}
.krl-split-btn:hover .krl-split-btn__top{transform:translateY(-100%);color:#04130c;}
.krl-split-btn:hover .krl-split-btn__bot{transform:translateY(100%);color:#04130c;}
.krl-split-btn:hover .krl-split-btn__bg{transform:scaleY(1);}

<button class="krl-split-btn">
  <div class="krl-split-btn__bg"></div>
  <div class="krl-split-btn__top">Split Reveal</div>
  <div class="krl-split-btn__bot">Split Reveal</div>
</button>

splitrevealcreative

#56

Brush Stroke Button

Outlined button fills with an expanding organic circle on hover.

Buttons

<button class="krl-brush-btn">
  <span>Brush Stroke</span>
</button>

.krl-brush-btn{
  position:relative;padding:14px 40px;
  font-family:'Poppins',sans-serif;font-size:14px;font-weight:600;
  color:#04130c;background:transparent;
  border:2px solid rgba(0,255,163,.5);border-radius:6px;
  cursor:pointer;overflow:hidden;transition:color .4s;
}
.krl-brush-btn::before{
  content:'';position:absolute;top:50%;left:50%;
  width:0;height:0;
  background:linear-gradient(135deg,#00ffa3,#00d4a8);
  border-radius:50%;transform:translate(-50%,-50%);
  transition:width .5s cubic-bezier(.23,1,.32,1),
    height .5s cubic-bezier(.23,1,.32,1),border-radius .5s;
}
.krl-brush-btn:hover::before{width:300px;height:300px;border-radius:6px;}
.krl-brush-btn:hover{
  color:#04130c;border-color:#00ffa3;
  box-shadow:0 4px 20px rgba(0,255,163,.35);
}
.krl-brush-btn span{position:relative;z-index:2;}

<button class="krl-brush-btn">
  <span>Brush Stroke</span>
</button>

brushfillorganic

#57

Parallax Depth Card

Multiple layers shift at different speeds on hover for a 3D parallax feel.

Cards

Parallax Depth

Hover to see layered motion

<div class="krl-parallax-card">
  <div class="krl-parallax-card__layer1"></div>
  <div class="krl-parallax-card__layer2">
    <div class="krl-parallax-card__dot"></div>
    <div class="krl-parallax-card__dot"></div>
    <div class="krl-parallax-card__dot"></div>
    <div class="krl-parallax-card__dot"></div>
  </div>
  <div class="krl-parallax-card__line"></div>
  <div class="krl-parallax-card__content">
    <div class="krl-parallax-card__title">Parallax Depth</div>
    <div class="krl-parallax-card__text">Hover to see layered motion</div>
  </div>
</div>

.krl-parallax-card{
  position:relative;width:100%;height:160px;
  background:linear-gradient(145deg,#0e131a,#141c24);
  border-radius:12px;overflow:hidden;
  border:1px solid var(--krl-border);transition:transform .4s;
}
.krl-parallax-card:hover{transform:scale(1.02);}
.krl-parallax-card__layer1{
  position:absolute;inset:0;
  background:radial-gradient(circle at 30% 40%,rgba(0,255,163,.12) 0%,transparent 50%);
  transition:transform .5s;
}
.krl-parallax-card:hover .krl-parallax-card__layer1{transform:translate(10px,-8px);}
.krl-parallax-card__layer2{position:absolute;inset:0;transition:transform .6s .05s;}
.krl-parallax-card__dot{
  position:absolute;width:4px;height:4px;border-radius:50%;
  background:rgba(0,255,163,.3);
}
.krl-parallax-card:hover .krl-parallax-card__layer2{transform:translate(-6px,12px);}
.krl-parallax-card__content{position:absolute;bottom:16px;left:20px;z-index:3;color:#fff;}
.krl-parallax-card__title{font-size:15px;font-weight:700;}
.krl-parallax-card__text{font-size:11px;color:rgba(255,255,255,.5);}

<div class="krl-parallax-card">
  <div class="krl-parallax-card__layer1"></div>
  <div class="krl-parallax-card__layer2">
    <div class="krl-parallax-card__dot"></div>
    <div class="krl-parallax-card__dot"></div>
    <div class="krl-parallax-card__dot"></div>
    <div class="krl-parallax-card__dot"></div>
  </div>
  <div class="krl-parallax-card__line"></div>
  <div class="krl-parallax-card__content">
    <div class="krl-parallax-card__title">Parallax Depth</div>
    <div class="krl-parallax-card__text">Hover to see layered motion</div>
  </div>
</div>

parallaxdepthlayers

#58

Noise Glass Card

Glassmorphism card with rotating conic gradient and backdrop-filter blur.

Cards

Frosted Glass

Rotating conic gradient behind a frosted glass surface with backdrop blur.

Glassmorphism

<div class="krl-noise-card">
  <div class="krl-noise-card__content">
    <div class="krl-noise-card__title">Frosted Glass</div>
    <div class="krl-noise-card__text">Rotating gradient behind frosted glass.</div>
    <span class="krl-noise-card__badge">Glassmorphism</span>
  </div>
</div>

.krl-noise-card{
  position:relative;padding:24px;border-radius:14px;
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.08);overflow:hidden;
}
.krl-noise-card::before{
  content:'';position:absolute;inset:-50%;
  background:conic-gradient(from 0deg,rgba(0,255,163,.08),rgba(245,166,35,.06),rgba(0,255,163,.08));
  animation:krl-noise-spin 8s linear infinite;
}
.krl-noise-card::after{content:'';position:absolute;inset:0;background:rgba(14,19,26,.6);z-index:0;}
.krl-noise-card__content{position:relative;z-index:1;}
@keyframes krl-noise-spin{to{transform:rotate(360deg);}}

<div class="krl-noise-card">
  <div class="krl-noise-card__content">
    <div class="krl-noise-card__title">Frosted Glass</div>
    <div class="krl-noise-card__text">Rotating gradient behind frosted glass.</div>
    <span class="krl-noise-card__badge">Glassmorphism</span>
  </div>
</div>

glassblurconic

#59

Spotlight Card

Radial gradient spotlight expands from center on hover over a subtle grid.

Cards

✦

Spotlight

Hover to illuminate

<div class="krl-spotlight-card">
  <div class="krl-spotlight-card__grid"></div>
  <div class="krl-spotlight-card__content">
    <div class="krl-spotlight-card__icon">✦</div>
    <div class="krl-spotlight-card__title">Spotlight</div>
    <div class="krl-spotlight-card__text">Hover to illuminate</div>
  </div>
</div>

.krl-spotlight-card{
  position:relative;width:100%;height:160px;
  background:#0e131a;border-radius:12px;overflow:hidden;
  border:1px solid var(--krl-border);cursor:pointer;
}
.krl-spotlight-card::before{
  content:'';position:absolute;width:200px;height:200px;
  background:radial-gradient(circle,rgba(0,255,163,.25) 0%,transparent 70%);
  top:50%;left:50%;transform:translate(-50%,-50%) scale(0);
  transition:transform .5s cubic-bezier(.23,1,.32,1);z-index:1;
}
.krl-spotlight-card:hover::before{transform:translate(-50%,-50%) scale(2.5);}
.krl-spotlight-card__grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:20px 20px;z-index:0;
}
.krl-spotlight-card__content{position:relative;z-index:2;padding:24px;height:100%;display:flex;flex-direction:column;justify-content:center;}

<div class="krl-spotlight-card">
  <div class="krl-spotlight-card__grid"></div>
  <div class="krl-spotlight-card__content">
    <div class="krl-spotlight-card__icon">✦</div>
    <div class="krl-spotlight-card__title">Spotlight</div>
    <div class="krl-spotlight-card__text">Hover to illuminate</div>
  </div>
</div>

spotlightradialglow

#60

Stroke Draw Text

Text starts as an outline and fills with gradient — draw-in animation.

Text

KERLION

<div class="krl-stroke-text">KERLION</div>

.krl-stroke-text{
  font-family:'Poppins',sans-serif;font-size:28px;font-weight:800;
  -webkit-text-stroke:1.5px #00ffa3;color:transparent;
  background:linear-gradient(90deg,#00ffa3 0%,#00ffa3 0%) no-repeat left center;
  -webkit-background-clip:text;background-clip:text;
  background-size:0% 100%;
  animation:krl-stroke-fill 2.5s ease-in-out infinite alternate;
}
@keyframes krl-stroke-fill{
  0%{background-size:0% 100%;-webkit-text-stroke:1.5px #00ffa3;color:transparent;}
  100%{background-size:100% 100%;-webkit-text-stroke:0px #00ffa3;color:transparent;}
}

<div class="krl-stroke-text">KERLION</div>

strokedrawfill

#61

Clip Reveal Text

Text revealed with a clip-path wipe animation from left to right.

Text

Hello World

<div class="krl-clip-text">Hello World</div>

.krl-clip-text{
  font-family:'Poppins',sans-serif;font-size:26px;font-weight:800;
  color:#00ffa3;animation:krl-clip-reveal 3s ease-in-out infinite alternate;
  clip-path:inset(0 100% 0 0);
}
@keyframes krl-clip-reveal{
  0%{clip-path:inset(0 100% 0 0);}
  100%{clip-path:inset(0 0% 0 0);}
}

<div class="krl-clip-text">Hello World</div>

clip-pathrevealwipe

#62

DNA Helix Loader

Double helix DNA strand with colored dots rotating in opposite directions.

Loaders

<div class="krl-dna-loader">
  <div class="krl-dna-dot"></div>
  <div class="krl-dna-dot"></div>
  <div class="krl-dna-dot"></div>
  <div class="krl-dna-dot"></div>
  <div class="krl-dna-dot"></div>
  <div class="krl-dna-dot"></div>
  <div class="krl-dna-dot"></div>
  <div class="krl-dna-dot"></div>
</div>

.krl-dna-loader{position:relative;width:50px;height:60px;}
.krl-dna-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:#00ffa3;}
.krl-dna-dot:nth-child(1){animation:krl-dna-1 1.6s ease-in-out infinite;}
.krl-dna-dot:nth-child(2){animation:krl-dna-2 1.6s ease-in-out infinite;}
.krl-dna-dot:nth-child(3){animation:krl-dna-1 1.6s ease-in-out infinite .4s;background:#f5a623;}
.krl-dna-dot:nth-child(4){animation:krl-dna-2 1.6s ease-in-out infinite .4s;background:#f5a623;}
.krl-dna-dot:nth-child(5){animation:krl-dna-1 1.6s ease-in-out infinite .8s;}
.krl-dna-dot:nth-child(6){animation:krl-dna-2 1.6s ease-in-out infinite .8s;}
.krl-dna-dot:nth-child(7){animation:krl-dna-1 1.6s ease-in-out infinite 1.2s;background:#ff6b9d;}
.krl-dna-dot:nth-child(8){animation:krl-dna-2 1.6s ease-in-out infinite 1.2s;background:#ff6b9d;}
@keyframes krl-dna-1{0%,100%{transform:translate(21px,0);opacity:.4;}25%{transform:translate(42px,10px);opacity:1;}50%{transform:translate(21px,20px);opacity:.4;}75%{transform:translate(0,10px);opacity:1;}}
@keyframes krl-dna-2{0%,100%{transform:translate(0,10px);opacity:1;}25%{transform:translate(21px,20px);opacity:.4;}50%{transform:translate(42px,10px);opacity:1;}75%{transform:translate(21px,0);opacity:.4;}}

<div class="krl-dna-loader">
  <div class="krl-dna-dot"></div>
  <div class="krl-dna-dot"></div>
  <div class="krl-dna-dot"></div>
  <div class="krl-dna-dot"></div>
  <div class="krl-dna-dot"></div>
  <div class="krl-dna-dot"></div>
  <div class="krl-dna-dot"></div>
  <div class="krl-dna-dot"></div>
</div>

dnahelixrotate

#63

Equalizer Bars Loader

Audio equalizer-style bouncing bars with staggered animation delays.

Loaders

<div class="krl-eq-loader">
  <div class="krl-eq-bar"></div>
  <div class="krl-eq-bar"></div>
  <div class="krl-eq-bar"></div>
  <div class="krl-eq-bar"></div>
  <div class="krl-eq-bar"></div>
</div>

.krl-eq-loader{display:flex;align-items:flex-end;gap:4px;height:40px;}
.krl-eq-bar{
  width:6px;border-radius:3px;height:50%;
  background:linear-gradient(to top,#00ffa3,#00d4a8);
  animation:krl-eq-bounce 1.2s ease-in-out infinite;
}
.krl-eq-bar:nth-child(1){animation-delay:0s;}
.krl-eq-bar:nth-child(2){animation-delay:.15s;}
.krl-eq-bar:nth-child(3){animation-delay:.3s;}
.krl-eq-bar:nth-child(4){animation-delay:.45s;}
.krl-eq-bar:nth-child(5){animation-delay:.6s;}
@keyframes krl-eq-bounce{0%,100%{height:20%;}50%{height:100%;}}

<div class="krl-eq-loader">
  <div class="krl-eq-bar"></div>
  <div class="krl-eq-bar"></div>
  <div class="krl-eq-bar"></div>
  <div class="krl-eq-bar"></div>
  <div class="krl-eq-bar"></div>
</div>

equalizeraudiobounce

#64

Origami Fold Card

A card with a top-right corner that folds down on hover revealing a gradient triangle beneath.

Cards

NEW

Fold Effect

Hover to fold the corner and reveal the accent color underneath.

<div class="krl-origami">
  <div class="krl-origami__fold"></div>
  <div class="krl-origami__badge">NEW</div>
  <div class="krl-origami__title">Fold Effect</div>
  <div class="krl-origami__text">Hover to fold.</div>
</div>

.krl-origami{position:relative;width:240px;padding:20px;border-radius:16px;background:linear-gradient(145deg,#14191f,#0d1117);border:1px solid #1f2630;color:#fff;font-family:'Poppins',sans-serif;overflow:hidden;transition:transform .4s ease;}
.krl-origami:hover{transform:translateY(-4px);}
.krl-origami__fold{position:absolute;top:0;right:0;width:50px;height:50px;overflow:hidden;pointer-events:none;}
.krl-origami__fold::before{content:'';position:absolute;top:0;right:0;width:70px;height:70px;background:linear-gradient(135deg,transparent 50%,#00ffa3 50%);transform:translate(14px,-14px);transition:transform .5s cubic-bezier(.23,1,.32,1);}
.krl-origami:hover .krl-origami__fold::before{transform:translate(0,0);}

<div class="krl-origami">
  <div class="krl-origami__fold"></div>
  <div class="krl-origami__badge">NEW</div>
  <div class="krl-origami__title">Fold Effect</div>
  <div class="krl-origami__text">Hover to fold.</div>
</div>

origamifoldhover

#65

Neon Trace Button

A button where a neon SVG stroke traces its outline on hover with a drawing animation.

Buttons

<button class="krl-trace-btn">
  <svg><rect x="1" y="1" width="168" height="46" rx="12"/></svg>
  <span class="krl-trace-btn__text">Trace Me</span>
</button>

.krl-trace-btn{position:relative;padding:14px 40px;font-family:'Poppins',sans-serif;font-size:14px;font-weight:600;color:#fff;background:transparent;border:none;border-radius:12px;cursor:pointer;overflow:hidden;transition:color .4s ease;letter-spacing:1px;}
.krl-trace-btn svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.krl-trace-btn svg rect{fill:none;stroke:#00ffa3;stroke-width:2;stroke-dasharray:400;stroke-dashoffset:400;rx:12;transition:stroke-dashoffset .8s cubic-bezier(.23,1,.32,1);}
.krl-trace-btn:hover svg rect{stroke-dashoffset:0;}
.krl-trace-btn:hover{color:#00ffa3;text-shadow:0 0 12px rgba(0,255,163,.5);}
.krl-trace-btn__text{position:relative;z-index:2;}

<button class="krl-trace-btn">
  <svg><rect x="1" y="1" width="168" height="46" rx="12"/></svg>
  <span class="krl-trace-btn__text">Trace Me</span>
</button>

neontracesvg

#66

Atom Orbit Loader

A central nucleus with three electron orbits spinning at different speeds and directions.

Loaders

<div class="krl-atom">
  <div class="krl-atom__nucleus"></div>
  <div class="krl-atom__orbit"><div class="krl-atom__electron"></div></div>
  <div class="krl-atom__orbit"><div class="krl-atom__electron"></div></div>
  <div class="krl-atom__orbit"><div class="krl-atom__electron"></div></div>
</div>

.krl-atom{position:relative;width:70px;height:70px;}
.krl-atom__nucleus{position:absolute;top:50%;left:50%;width:12px;height:12px;margin:-6px 0 0 -6px;background:#00ffa3;border-radius:50%;box-shadow:0 0 10px #00ffa3,0 0 20px rgba(0,255,163,.4);}
.krl-atom__orbit{position:absolute;top:50%;left:50%;border:1.5px solid rgba(0,255,163,.2);border-radius:50%;animation:krl-atom-spin 2s linear infinite;}
.krl-atom__orbit:nth-child(2){width:46px;height:46px;margin:-23px 0 0 -23px;}
.krl-atom__orbit:nth-child(3){width:60px;height:60px;margin:-30px 0 0 -30px;animation-duration:3s;border-color:rgba(245,166,35,.2);animation-direction:reverse;}
.krl-atom__orbit:nth-child(4){width:70px;height:70px;margin:-35px 0 0 -35px;animation-duration:4s;border-color:rgba(255,107,157,.15);}
.krl-atom__electron{position:absolute;width:6px;height:6px;background:#00ffa3;border-radius:50%;top:-3px;left:50%;margin-left:-3px;box-shadow:0 0 6px #00ffa3;}
.krl-atom__orbit:nth-child(3) .krl-atom__electron{background:#f5a623;box-shadow:0 0 6px #f5a623;}
.krl-atom__orbit:nth-child(4) .krl-atom__electron{background:#ff6b9d;box-shadow:0 0 6px #ff6b9d;}
@keyframes krl-atom-spin{to{transform:rotate(360deg);}}

<div class="krl-atom">
  <div class="krl-atom__nucleus"></div>
  <div class="krl-atom__orbit"><div class="krl-atom__electron"></div></div>
  <div class="krl-atom__orbit"><div class="krl-atom__electron"></div></div>
  <div class="krl-atom__orbit"><div class="krl-atom__electron"></div></div>
</div>

atomorbitspin

#67

Chromatic Split Text

Text with an RGB chromatic aberration effect where color channels separate and shift dynamically.

Text

KERLION

<div class="krl-chromatic" data-text="KERLION">KERLION</div>

.krl-chromatic{font-family:'Poppins',sans-serif;font-size:38px;font-weight:800;letter-spacing:3px;color:#fff;position:relative;display:inline-block;animation:krl-chromatic-shift 4s ease-in-out infinite alternate;}
.krl-chromatic::before,.krl-chromatic::after{content:attr(data-text);position:absolute;top:0;left:0;overflow:hidden;width:100%;height:100%;}
.krl-chromatic::before{color:#ff0055;clip-path:inset(0 0 65% 0);animation:krl-chromatic-r 3s ease-in-out infinite alternate;}
.krl-chromatic::after{color:#00aaff;clip-path:inset(65% 0 0 0);animation:krl-chromatic-b 3s ease-in-out infinite alternate;}
@keyframes krl-chromatic-r{0%{transform:translate(-2px,-1px);}100%{transform:translate(2px,1px);}}
@keyframes krl-chromatic-b{0%{transform:translate(2px,1px);}100%{transform:translate(-2px,-1px);}}
@keyframes krl-chromatic-shift{0%{text-shadow:0 0 20px rgba(255,255,255,.1);}100%{text-shadow:0 0 20px rgba(255,255,255,.3),0 4px 30px rgba(0,255,163,.15);}}

<div class="krl-chromatic" data-text="KERLION">KERLION</div>

chromaticaberrationrgb

#68

Lava Lamp Background

Multiple colorful blobs float and morph smoothly like a lava lamp for ambient backgrounds.

Backgrounds

<div class="krl-lava">
  <div class="krl-lava__blob"></div>
  <div class="krl-lava__blob"></div>
  <div class="krl-lava__blob"></div>
  <div class="krl-lava__blob"></div>
  <div class="krl-lava__blob"></div>
</div>

.krl-lava{position:relative;width:260px;height:150px;border-radius:18px;overflow:hidden;background:#0a0d12;border:1px solid #1f2630;}
.krl-lava__blob{position:absolute;border-radius:50%;filter:blur(20px);opacity:.6;animation:krl-lava-float 8s ease-in-out infinite;}
.krl-lava__blob:nth-child(1){width:80px;height:80px;background:#00ffa3;bottom:-20px;left:20px;}
.krl-lava__blob:nth-child(2){width:60px;height:60px;background:#f5a623;top:-10px;right:40px;animation-delay:2s;}
.krl-lava__blob:nth-child(3){width:70px;height:70px;background:#ff6b9d;bottom:20px;right:-10px;animation-delay:4s;}
.krl-lava__blob:nth-child(4){width:50px;height:50px;background:#a78bfa;top:30px;left:60px;animation-delay:6s;}
.krl-lava__blob:nth-child(5){width:40px;height:40px;background:#33ffb5;bottom:10px;left:50%;animation-delay:1s;}
@keyframes krl-lava-float{0%,100%{transform:translate(0,0) scale(1);}25%{transform:translate(20px,-30px) scale(1.2);}50%{transform:translate(-10px,-50px) scale(.9);}75%{transform:translate(15px,-20px) scale(1.1);}}

<div class="krl-lava">
  <div class="krl-lava__blob"></div>
  <div class="krl-lava__blob"></div>
  <div class="krl-lava__blob"></div>
  <div class="krl-lava__blob"></div>
  <div class="krl-lava__blob"></div>
</div>

lavabloborganic

#69

Curtain Reveal Card

Two colored panels slide apart on hover like curtains revealing hidden content underneath.

Cards

✦

Hidden Content

Hover to reveal what's behind the curtain.

OPEN

OPEN

<div class="krl-curtain">
  <div class="krl-curtain__content">
    <div class="krl-curtain__icon">✦</div>
    <div class="krl-curtain__title">Hidden Content</div>
    <div class="krl-curtain__text">Hover to reveal.</div>
  </div>
  <div class="krl-curtain__panel krl-curtain__panel--left"><span>OPEN</span></div>
  <div class="krl-curtain__panel krl-curtain__panel--right"><span>OPEN</span></div>
</div>

.krl-curtain{position:relative;width:240px;height:150px;border-radius:16px;overflow:hidden;cursor:pointer;font-family:'Poppins',sans-serif;}
.krl-curtain__content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#0d1117,#14191f);border:1px solid #1f2630;border-radius:16px;z-index:1;}
.krl-curtain__icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:linear-gradient(135deg,#00ffa3,#f5a623);color:#04130c;font-size:22px;font-weight:800;margin-bottom:10px;}
.krl-curtain__title{font-size:17px;font-weight:700;color:#fff;margin-bottom:4px;}
.krl-curtain__text{font-size:11px;color:rgba(255,255,255,.5);text-align:center;padding:0 16px;}
.krl-curtain__panel{position:absolute;top:0;width:50%;height:100%;z-index:2;transition:transform .6s cubic-bezier(.23,1,.32,1);}
.krl-curtain__panel--left{left:0;background:linear-gradient(135deg,#00ffa3,#00d4a8);}
.krl-curtain__panel--right{right:0;background:linear-gradient(135deg,#f5a623,#d97706);}
.krl-curtain:hover .krl-curtain__panel--left{transform:translateX(-105%);}
.krl-curtain:hover .krl-curtain__panel--right{transform:translateX(105%);}
.krl-curtain__panel span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:20px;font-weight:800;color:rgba(255,255,255,.9);letter-spacing:2px;}

<div class="krl-curtain">
  <div class="krl-curtain__content">
    <div class="krl-curtain__icon">✦</div>
    <div class="krl-curtain__title">Hidden Content</div>
    <div class="krl-curtain__text">Hover to reveal.</div>
  </div>
  <div class="krl-curtain__panel krl-curtain__panel--left"><span>OPEN</span></div>
  <div class="krl-curtain__panel krl-curtain__panel--right"><span>OPEN</span></div>
</div>

curtainrevealslide

#70

Marching Ants Border

A classic marching ants selection-style border that animates continuously around the element.

Borders

Selection Style

Animated dashed border that marches around the element.

<div class="krl-ants">
  <div class="krl-ants__title">Selection Style</div>
  <div class="krl-ants__text">Animated marching ants border.</div>
</div>

.krl-ants{position:relative;width:220px;padding:20px;border-radius:16px;background:#0d1117;}
.krl-ants::before{content:'';position:absolute;inset:-2px;border-radius:18px;background:repeating-linear-gradient(90deg,#00ffa3 0,#00ffa3 8px,transparent 8px,transparent 16px);background-size:32px 100%;animation:krl-ants-march 1s linear infinite;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;padding:2px;}
@keyframes krl-ants-march{to{background-position:32px 0;}}
.krl-ants__title{font-family:'Poppins',sans-serif;font-size:16px;font-weight:700;color:#fff;margin-bottom:4px;}
.krl-ants__text{font-family:'Poppins',sans-serif;font-size:12px;color:rgba(255,255,255,.6);}

<div class="krl-ants">
  <div class="krl-ants__title">Selection Style</div>
  <div class="krl-ants__text">Animated marching ants border.</div>
</div>

marchingantsanimated

#71

Neon Pulse Card

A card with a subtle neon glow that breathes rhythmically, creating an ambient living feel.

Cards

♦

Breathing Glow

A card that breathes with a soft neon pulse animation.

<div class="krl-pulse-card">
  <div class="krl-pulse-card__icon">♦</div>
  <div class="krl-pulse-card__title">Breathing Glow</div>
  <div class="krl-pulse-card__text">Soft neon pulse.</div>
</div>

.krl-pulse-card{position:relative;width:240px;padding:20px;border-radius:16px;background:linear-gradient(145deg,#14191f,#0d1117);border:1px solid #1f2630;color:#fff;font-family:'Poppins',sans-serif;text-align:center;animation:krl-pulse-card-glow 3s ease-in-out infinite;}
@keyframes krl-pulse-card-glow{0%,100%{box-shadow:0 0 5px rgba(0,255,163,.05),0 0 15px rgba(0,255,163,.03);border-color:rgba(0,255,163,.1);}50%{box-shadow:0 0 20px rgba(0,255,163,.2),0 0 40px rgba(0,255,163,.1),inset 0 0 20px rgba(0,255,163,.03);border-color:rgba(0,255,163,.4);}}
.krl-pulse-card__icon{width:50px;height:50px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-size:22px;border-radius:14px;background:linear-gradient(135deg,#00ffa3,#00d4a8);color:#04130c;font-weight:700;}
.krl-pulse-card__title{font-size:16px;font-weight:700;margin-bottom:6px;}
.krl-pulse-card__text{font-size:12px;line-height:1.6;color:rgba(255,255,255,.7);}

<div class="krl-pulse-card">
  <div class="krl-pulse-card__icon">♦</div>
  <div class="krl-pulse-card__title">Breathing Glow</div>
  <div class="krl-pulse-card__text">Soft neon pulse.</div>
</div>

neonpulsebreathe

#72

Pixelate Button

A button that reveals a retro pixel grid overlay on hover for an 8-bit digital distortion effect.

Buttons

<button class="krl-pixel-btn">
  <div class="krl-pixel-btn__grid"></div>
  <span class="krl-pixel-btn__text">PIXELATE</span>
</button>

.krl-pixel-btn{position:relative;padding:14px 40px;font-family:'Poppins',sans-serif;font-size:14px;font-weight:600;color:#fff;background:#1a2229;border:2px solid #2c3540;border-radius:10px;cursor:pointer;overflow:hidden;transition:color .4s ease,transform .2s ease;}
.krl-pixel-btn__grid{position:absolute;inset:0;background:repeating-conic-gradient(rgba(0,255,163,.35) 0% 25%,transparent 0% 50%) 0 0/8px 8px;opacity:0;transition:opacity .3s ease;mix-blend-mode:overlay;pointer-events:none;}
.krl-pixel-btn:hover .krl-pixel-btn__grid{opacity:1;}
.krl-pixel-btn:hover{color:#00ffa3;border-color:#00ffa3;transform:scale(1.02);}
.krl-pixel-btn:active{transform:scale(.97);}
.krl-pixel-btn__text{position:relative;z-index:2;letter-spacing:1px;}

<button class="krl-pixel-btn">
  <div class="krl-pixel-btn__grid"></div>
  <span class="krl-pixel-btn__text">PIXELATE</span>
</button>

pixelateretro8bit

#73

Pendulum Loader

A smooth pendulum swinging back and forth with a glowing bob and arc guide — physics-inspired.

Loaders

<div class="krl-pendulum">
  <div class="krl-pendulum__arc"></div>
  <div class="krl-pendulum__arm">
    <div class="krl-pendulum__bob"></div>
  </div>
  <div class="krl-pendulum__pivot"></div>
</div>

.krl-pendulum{position:relative;width:80px;height:80px;}
.krl-pendulum__arm{position:absolute;top:50%;left:50%;width:2px;height:55px;margin-left:-1px;background:linear-gradient(to bottom,rgba(255,255,255,.3),#00ffa3);transform-origin:top center;animation:krl-pendulum-swing 1.5s ease-in-out infinite;border-radius:1px;}
.krl-pendulum__bob{position:absolute;bottom:-7px;left:50%;width:16px;height:16px;margin-left:-8px;background:#00ffa3;border-radius:50%;box-shadow:0 0 12px rgba(0,255,163,.6),0 0 24px rgba(0,255,163,.3);}
.krl-pendulum__pivot{position:absolute;top:50%;left:50%;width:10px;height:10px;margin:-5px 0 0 -5px;background:#1f2630;border-radius:50%;border:2px solid #2c3540;z-index:2;}
.krl-pendulum__arc{position:absolute;top:50%;left:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border:1px dashed rgba(0,255,163,.12);border-radius:50%;border-top-color:transparent;border-bottom-color:transparent;}
@keyframes krl-pendulum-swing{0%,100%{transform:rotate(-30deg);}50%{transform:rotate(30deg);}}

<div class="krl-pendulum">
  <div class="krl-pendulum__arc"></div>
  <div class="krl-pendulum__arm">
    <div class="krl-pendulum__bob"></div>
  </div>
  <div class="krl-pendulum__pivot"></div>
</div>

pendulumswingphysics

#74

Marquee Scroll Text

Smooth infinite horizontal scrolling text marquee — perfect for news tickers and announcements.

Text

KERLION

◆

CSS Effects

◆

Creative Design

◆

KERLION

◆

CSS Effects

◆

Creative Design

◆

<div class="krl-marquee-wrap">
  <div class="krl-marquee">
    <div class="krl-marquee__item"><span>KERLION</span></div>
    <div class="krl-marquee__dot">◆</div>
    <div class="krl-marquee__item">CSS Effects</div>
    <div class="krl-marquee__dot">◆</div>
    <div class="krl-marquee__item">Creative Design</div>
    <div class="krl-marquee__dot">◆</div>
    <!-- Duplicate for seamless loop -->
    <div class="krl-marquee__item"><span>KERLION</span></div>
    <div class="krl-marquee__dot">◆</div>
    <div class="krl-marquee__item">CSS Effects</div>
    <div class="krl-marquee__dot">◆</div>
    <div class="krl-marquee__item">Creative Design</div>
    <div class="krl-marquee__dot">◆</div>
  </div>
</div>

.krl-marquee-wrap{width:260px;overflow:hidden;position:relative;padding:16px 0;border-radius:12px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);}
.krl-marquee{display:flex;gap:40px;animation:krl-marquee-scroll 12s linear infinite;width:max-content;}
.krl-marquee__item{font-family:'Poppins',sans-serif;font-size:16px;font-weight:700;white-space:nowrap;color:#fff;opacity:.9;flex-shrink:0;}
.krl-marquee__item span{background:linear-gradient(135deg,#00ffa3,#f5a623);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.krl-marquee__dot{color:rgba(255,255,255,.2);font-size:18px;flex-shrink:0;display:flex;align-items:center;}
@keyframes krl-marquee-scroll{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}

<div class="krl-marquee-wrap">
  <div class="krl-marquee">
    <div class="krl-marquee__item"><span>KERLION</span></div>
    <div class="krl-marquee__dot">◆</div>
    <div class="krl-marquee__item">CSS Effects</div>
    <div class="krl-marquee__dot">◆</div>
    <div class="krl-marquee__item">Creative Design</div>
    <div class="krl-marquee__dot">◆</div>
    <!-- Duplicate for seamless loop -->
    <div class="krl-marquee__item"><span>KERLION</span></div>
    <div class="krl-marquee__dot">◆</div>
    <div class="krl-marquee__item">CSS Effects</div>
    <div class="krl-marquee__dot">◆</div>
    <div class="krl-marquee__item">Creative Design</div>
    <div class="krl-marquee__dot">◆</div>
  </div>
</div>

marqueescrollinfinite

#75

Geometric Tiles Background

Animated rotating geometric shapes — circles, squares, and triangles floating in a pattern.

Backgrounds

GEOMETRIC

<div class="krl-geo">
  <div class="krl-geo__shape"></div>
  <div class="krl-geo__shape"></div>
  <div class="krl-geo__shape"></div>
  <div class="krl-geo__shape"></div>
  <div class="krl-geo__shape"></div>
  <div class="krl-geo__shape"></div>
  <div class="krl-geo__label">GEOMETRIC</div>
</div>

.krl-geo{position:relative;width:260px;height:150px;border-radius:18px;overflow:hidden;background:#0a0d12;border:1px solid #1f2630;}
.krl-geo__shape{position:absolute;border:1.5px solid;opacity:.3;animation:krl-geo-spin 10s linear infinite;}
.krl-geo__shape:nth-child(1){width:40px;height:40px;border-color:#00ffa3;top:20px;left:30px;border-radius:4px;animation-duration:12s;}
.krl-geo__shape:nth-child(2){width:0;height:0;border:none;border-left:20px solid transparent;border-right:20px solid transparent;border-bottom:35px solid rgba(245,166,35,.25);top:60px;right:40px;animation-duration:15s;animation-direction:reverse;}
.krl-geo__shape:nth-child(3){width:50px;height:50px;border-color:#ff6b9d;bottom:20px;left:70px;border-radius:50%;animation-duration:18s;}
.krl-geo__shape:nth-child(4){width:30px;height:30px;border-color:#a78bfa;top:10px;right:20px;clip-path:polygon(50% 0%,100% 100%,0% 100%);animation-duration:14s;animation-direction:reverse;}
.krl-geo__shape:nth-child(5){width:35px;height:35px;border-color:#33ffb5;bottom:30px;right:80px;border-radius:8px;animation-duration:16s;}
.krl-geo__shape:nth-child(6){width:25px;height:25px;border-color:#f5a623;top:50%;left:50%;border-radius:50%;animation-duration:20s;animation-direction:reverse;}
@keyframes krl-geo-spin{to{transform:rotate(360deg);}}
.krl-geo__label{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-family:'Poppins',sans-serif;font-size:11px;font-weight:600;color:rgba(255,255,255,.25);letter-spacing:2px;text-transform:uppercase;z-index:2;}

<div class="krl-geo">
  <div class="krl-geo__shape"></div>
  <div class="krl-geo__shape"></div>
  <div class="krl-geo__shape"></div>
  <div class="krl-geo__shape"></div>
  <div class="krl-geo__shape"></div>
  <div class="krl-geo__shape"></div>
  <div class="krl-geo__label">GEOMETRIC</div>
</div>

geometricshapespattern

#76

3D Rotating Prism

A 3D rotating cube with six colored faces — a mesmerizing CSS-only 3D transform demo.

Misc

FRONT

RIGHT

BACK

LEFT

TOP

BTM

<div class="krl-prism-wrap">
  <div class="krl-prism">
    <div class="krl-prism__face">FRONT</div>
    <div class="krl-prism__face">RIGHT</div>
    <div class="krl-prism__face">BACK</div>
    <div class="krl-prism__face">LEFT</div>
    <div class="krl-prism__face">TOP</div>
    <div class="krl-prism__face">BTM</div>
  </div>
</div>

.krl-prism-wrap{width:120px;height:120px;perspective:500px;display:flex;align-items:center;justify-content:center;}
.krl-prism{position:relative;width:80px;height:80px;transform-style:preserve-3d;animation:krl-prism-rotate 6s linear infinite;}
.krl-prism__face{position:absolute;width:80px;height:80px;display:flex;align-items:center;justify-content:center;font-family:'Poppins',sans-serif;font-size:13px;font-weight:700;letter-spacing:1px;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid rgba(255,255,255,.1);border-radius:6px;}
.krl-prism__face:nth-child(1){background:rgba(0,255,163,.15);color:#00ffa3;transform:rotateY(0deg) translateZ(40px);}
.krl-prism__face:nth-child(2){background:rgba(245,166,35,.15);color:#f5a623;transform:rotateY(90deg) translateZ(40px);}
.krl-prism__face:nth-child(3){background:rgba(255,107,157,.15);color:#ff6b9d;transform:rotateY(180deg) translateZ(40px);}
.krl-prism__face:nth-child(4){background:rgba(167,139,250,.15);color:#a78bfa;transform:rotateY(270deg) translateZ(40px);}
.krl-prism__face:nth-child(5){background:rgba(0,255,163,.08);color:#33ffb5;transform:rotateX(90deg) translateZ(40px);}
.krl-prism__face:nth-child(6){background:rgba(245,166,35,.08);color:#ffb733;transform:rotateX(-90deg) translateZ(40px);}
@keyframes krl-prism-rotate{0%{transform:rotateX(-15deg) rotateY(0deg);}100%{transform:rotateX(-15deg) rotateY(360deg);}}

<div class="krl-prism-wrap">
  <div class="krl-prism">
    <div class="krl-prism__face">FRONT</div>
    <div class="krl-prism__face">RIGHT</div>
    <div class="krl-prism__face">BACK</div>
    <div class="krl-prism__face">LEFT</div>
    <div class="krl-prism__face">TOP</div>
    <div class="krl-prism__face">BTM</div>
  </div>
</div>

3dprismrotate

#90

Square Spin Loader

Four small squares that chase each other in a circular path — clean and mesmerizing.

Loaders

<div class="krl-sqspin">
  <div class="krl-sqspin__sq"></div>
  <div class="krl-sqspin__sq"></div>
  <div class="krl-sqspin__sq"></div>
  <div class="krl-sqspin__sq"></div>
</div>

.krl-sqspin{position:relative;width:50px;height:50px;}
.krl-sqspin__sq{position:absolute;width:12px;height:12px;border-radius:3px;background:#00ffa3;top:0;left:0;animation:krl-sqspin-move 1.8s ease-in-out infinite;}
.krl-sqspin__sq:nth-child(2){animation-delay:.225s;background:#33ffb5;}
.krl-sqspin__sq:nth-child(3){animation-delay:.45s;background:#f5a623;}
.krl-sqspin__sq:nth-child(4){animation-delay:.675s;background:#ffb733;}
@keyframes krl-sqspin-move{0%{top:0;left:0;}25%{top:0;left:38px;}50%{top:38px;left:38px;}75%{top:38px;left:0;}100%{top:0;left:0;}}

<div class="krl-sqspin">
  <div class="krl-sqspin__sq"></div>
  <div class="krl-sqspin__sq"></div>
  <div class="krl-sqspin__sq"></div>
  <div class="krl-sqspin__sq"></div>
</div>

squarespinsequence

#91

Bar Chart Loader

Colorful bars that grow and shrink like an animated bar chart — perfect for data-heavy UIs.

Loaders

<div class="krl-barchart">
  <div class="krl-barchart__bar"></div>
  <div class="krl-barchart__bar"></div>
  <div class="krl-barchart__bar"></div>
  <div class="krl-barchart__bar"></div>
  <div class="krl-barchart__bar"></div>
  <div class="krl-barchart__bar"></div>
</div>

.krl-barchart{display:flex;align-items:flex-end;gap:5px;height:50px;}
.krl-barchart__bar{width:10px;border-radius:4px 4px 2px 2px;background:linear-gradient(to top,#00ffa3,#00d4a8);animation:krl-bc-grow 1.4s ease-in-out infinite;}
.krl-barchart__bar:nth-child(1){animation-delay:0s;}
.krl-barchart__bar:nth-child(2){animation-delay:.15s;background:linear-gradient(to top,#33ffb5,#00ffa3);}
.krl-barchart__bar:nth-child(3){animation-delay:.3s;background:linear-gradient(to top,#f5a623,#ffb733);}
.krl-barchart__bar:nth-child(4){animation-delay:.45s;background:linear-gradient(to top,#ff6b9d,#ff8fbf);}
.krl-barchart__bar:nth-child(5){animation-delay:.6s;background:linear-gradient(to top,#a78bfa,#c4b5fd);}
.krl-barchart__bar:nth-child(6){animation-delay:.75s;}
@keyframes krl-bc-grow{0%,100%{height:15%;}50%{height:100%;}}

<div class="krl-barchart">
  <div class="krl-barchart__bar"></div>
  <div class="krl-barchart__bar"></div>
  <div class="krl-barchart__bar"></div>
  <div class="krl-barchart__bar"></div>
  <div class="krl-barchart__bar"></div>
  <div class="krl-barchart__bar"></div>
</div>

barchartgrow

#92

Perspective Grid Background

A Tron-style 3D perspective grid that scrolls infinitely — perfect for tech/futuristic heroes.

Backgrounds

<div class="krl-perspgrid">
  <div class="krl-perspgrid__grid"></div>
  <div class="krl-perspgrid__glow"></div>
  <div class="krl-perspgrid__line"></div>
</div>

.krl-perspgrid{position:relative;width:260px;height:150px;border-radius:18px;overflow:hidden;background:#050810;}
.krl-perspgrid__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(0,255,163,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,163,.12) 1px,transparent 1px);background-size:30px 30px;transform:perspective(400px) rotateX(50deg);transform-origin:top center;animation:krl-pg-scroll 3s linear infinite;margin-top:-20px;}
.krl-perspgrid__glow{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:120px;height:40px;background:radial-gradient(ellipse,rgba(0,255,163,.3) 0%,transparent 70%);filter:blur(10px);}
.krl-perspgrid__line{position:absolute;bottom:30%;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(0,255,163,.5),transparent);}
@keyframes krl-pg-scroll{0%{background-position:0 0;}100%{background-position:0 30px;}}

<div class="krl-perspgrid">
  <div class="krl-perspgrid__grid"></div>
  <div class="krl-perspgrid__glow"></div>
  <div class="krl-perspgrid__line"></div>
</div>

perspectivegridtron

#93

Grain Noise Background

Subtle film grain noise texture that animates — adds a cinematic vintage feel.

Backgrounds

FILM GRAIN

<div class="krl-grain">
  <div class="krl-grain__label">FILM GRAIN</div>
</div>

.krl-grain{position:relative;width:260px;height:150px;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,#0d1117,#1a1a2e);display:flex;align-items:center;justify-content:center;}
.krl-grain::after{content:'';position:absolute;inset:-50%;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");opacity:.08;animation:krl-grain-shift .5s steps(1) infinite;pointer-events:none;}
@keyframes krl-grain-shift{0%{transform:translate(0,0);}25%{transform:translate(-5%,-5%);}50%{transform:translate(5%,5%);}75%{transform:translate(-5%,5%);}100%{transform:translate(5%,-5%);}}
.krl-grain__label{position:relative;z-index:2;font-family:'Poppins',sans-serif;font-size:14px;font-weight:700;color:rgba(255,255,255,.6);letter-spacing:3px;text-transform:uppercase;}

<div class="krl-grain">
  <div class="krl-grain__label">FILM GRAIN</div>
</div>

grainnoisevintage

#94

Radial Light Card

A radial gradient spotlight expands from center on hover creating a premium illuminated feel.

Hover

✦

Premium Feature

Hover to illuminate the card with a soft radial light effect.

<div class="krl-radlight">
  <div class="krl-radlight__icon">✦</div>
  <div class="krl-radlight__title">Premium Feature</div>
  <div class="krl-radlight__text">Hover to illuminate.</div>
</div>

.krl-radlight{position:relative;width:240px;padding:24px 20px;border-radius:18px;background:#0d1117;border:1px solid #1f2630;color:#fff;font-family:'Poppins',sans-serif;overflow:hidden;transition:border-color .3s;}
.krl-radlight::before{content:'';position:absolute;width:200px;height:200px;background:radial-gradient(circle,rgba(0,255,163,.18) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%) scale(0);transition:transform .5s cubic-bezier(.23,1,.32,1);z-index:0;}
.krl-radlight:hover::before{transform:translate(-50%,-50%) scale(2);}
.krl-radlight:hover{border-color:rgba(0,255,163,.3);}
.krl-radlight__icon{font-size:28px;margin-bottom:10px;position:relative;z-index:1;}
.krl-radlight__title{font-size:16px;font-weight:700;margin-bottom:4px;position:relative;z-index:1;}
.krl-radlight__text{font-size:12px;line-height:1.6;color:rgba(255,255,255,.6);position:relative;z-index:1;}

<div class="krl-radlight">
  <div class="krl-radlight__icon">✦</div>
  <div class="krl-radlight__title">Premium Feature</div>
  <div class="krl-radlight__text">Hover to illuminate.</div>
</div>

radiallightspotlight

#95

Arrow Slide Link

A text link where an arrow slides in from the right on hover — clean navigation pattern.

Hover

View All Projects

Read Documentation

Get Started Free

<div class="krl-arrowlink">
  View All Projects
  <span class="krl-arrowlink__arrow"><svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg></span>
</div>

.krl-arrowlink{display:inline-flex;align-items:center;gap:6px;font-family:'Poppins',sans-serif;font-size:15px;font-weight:600;color:rgba(255,255,255,.7);text-decoration:none;cursor:pointer;transition:color .3s;}
.krl-arrowlink__arrow{display:inline-flex;transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s;transform:translateX(-8px);opacity:0;}
.krl-arrowlink__arrow svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;}
.krl-arrowlink:hover{color:#00ffa3;}
.krl-arrowlink:hover .krl-arrowlink__arrow{transform:translateX(0);opacity:1;}

<div class="krl-arrowlink">
  View All Projects
  <span class="krl-arrowlink__arrow"><svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg></span>
</div>

arrowslidelink

#96

Border Segments

A border that animates its segments one at a time — top, bottom, left, right in sequence.

Borders

Drawing Border

Each side animates in sequence.

<div class="krl-bseg">
  <div class="krl-bseg__t"></div>
  <div class="krl-bseg__b"></div>
  <div class="krl-bseg__l"></div>
  <div class="krl-bseg__r"></div>
  <div class="krl-bseg__title">Drawing Border</div>
  <div class="krl-bseg__text">Each side animates.</div>
</div>

.krl-bseg{position:relative;width:220px;padding:20px;border-radius:16px;background:#0d1117;}
.krl-bseg__t,.krl-bseg__b,.krl-bseg__l,.krl-bseg__r{position:absolute;background:#00ffa3;}
.krl-bseg__t{top:-2px;left:0;height:2px;width:0;animation:krl-bseg-h 2s ease-in-out infinite;}
.krl-bseg__b{bottom:-2px;right:0;height:2px;width:0;animation:krl-bseg-h 2s ease-in-out infinite 1s;}
.krl-bseg__l{left:-2px;bottom:0;width:2px;height:0;animation:krl-bseg-v 2s ease-in-out infinite .5s;}
.krl-bseg__r{right:-2px;top:0;width:2px;height:0;animation:krl-bseg-v 2s ease-in-out infinite 1.5s;}
@keyframes krl-bseg-h{0%,100%{width:0;}50%{width:100%;}}
@keyframes krl-bseg-v{0%,100%{height:0;}50%{height:100%;}}
.krl-bseg__title{font-family:'Poppins',sans-serif;font-size:16px;font-weight:700;color:#fff;margin-bottom:4px;}
.krl-bseg__text{font-family:'Poppins',sans-serif;font-size:12px;color:rgba(255,255,255,.6);}

<div class="krl-bseg">
  <div class="krl-bseg__t"></div>
  <div class="krl-bseg__b"></div>
  <div class="krl-bseg__l"></div>
  <div class="krl-bseg__r"></div>
  <div class="krl-bseg__title">Drawing Border</div>
  <div class="krl-bseg__text">Each side animates.</div>
</div>

segmentsanimatedraw

#97

Custom Select

Custom-styled select dropdown with a rotating arrow indicator and emerald focus glow.

Forms

Choose a frameworkReactVueSvelteAngular

<div class="krl-select-wrap">
  <select class="krl-select">
    <option>Choose a framework</option>
    <option>React</option>
    <option>Vue</option>
  </select>
  <div class="krl-select__arrow"><svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg></div>
</div>

.krl-select-wrap{position:relative;width:220px;font-family:'Poppins',sans-serif;}
.krl-select{width:100%;padding:12px 40px 12px 14px;border-radius:10px;border:1px solid #1f2630;background:#0a0d12;color:#fff;font-size:14px;font-family:'Poppins',sans-serif;appearance:none;-webkit-appearance:none;cursor:pointer;outline:none;transition:border-color .3s,box-shadow .3s;}
.krl-select:focus{border-color:#00ffa3;box-shadow:0 0 0 3px rgba(0,255,163,.1);}
.krl-select__arrow{position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;transition:transform .3s;}
.krl-select__arrow svg{width:16px;height:16px;stroke:rgba(255,255,255,.5);fill:none;stroke-width:2;transition:stroke .3s;}
.krl-select:focus~.krl-select__arrow{transform:translateY(-50%) rotate(180deg);}
.krl-select:focus~.krl-select__arrow svg{stroke:#00ffa3;}

<div class="krl-select-wrap">
  <select class="krl-select">
    <option>Choose a framework</option>
    <option>React</option>
    <option>Vue</option>
  </select>
  <div class="krl-select__arrow"><svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg></div>
</div>

selectdropdowncustom

#98

Animated Textarea

A textarea with a gradient progress bar showing character usage and a counter below.

Forms

35 / 100

<div class="krl-textarea-wrap">
  <textarea class="krl-textarea" placeholder="Write your message..."></textarea>
  <div class="krl-textarea-bar">
    <div class="krl-textarea-bar__fill"></div>
  </div>
  <div class="krl-textarea-count">35 / 100</div>
</div>

.krl-textarea-wrap{position:relative;width:220px;font-family:'Poppins',sans-serif;}
.krl-textarea{width:100%;height:80px;padding:12px 14px;border-radius:10px;border:1px solid #1f2630;background:#0a0d12;color:#fff;font-size:13px;font-family:'Poppins',sans-serif;outline:none;resize:none;transition:border-color .3s,box-shadow .3s;}
.krl-textarea:focus{border-color:#00ffa3;box-shadow:0 0 0 3px rgba(0,255,163,.1);}
.krl-textarea::placeholder{color:rgba(255,255,255,.25);}
.krl-textarea-bar{height:3px;border-radius:2px;background:#1f2630;margin-top:6px;overflow:hidden;}
.krl-textarea-bar__fill{height:100%;width:35%;background:linear-gradient(90deg,#00ffa3,#f5a623);border-radius:2px;transition:width .3s ease;}
.krl-textarea-count{font-size:10px;color:rgba(255,255,255,.3);text-align:right;margin-top:3px;font-weight:500;}

<div class="krl-textarea-wrap">
  <textarea class="krl-textarea" placeholder="Write your message..."></textarea>
  <div class="krl-textarea-bar"><div class="krl-textarea-bar__fill"></div></div>
  <div class="krl-textarea-count">35 / 100</div>
</div>

textareacounterprogress

#99

Slide Toast

A notification toast that slides in from the right with icon, message, and auto-dismiss progress bar.

Misc

✓

Saved Successfully

Your changes have been applied.

<div class="krl-toast-demo">
  <div class="krl-toast-demo__icon">✓</div>
  <div class="krl-toast-demo__content">
    <div class="krl-toast-demo__title">Saved Successfully</div>
    <div class="krl-toast-demo__text">Changes applied.</div>
  </div>
  <div class="krl-toast-demo__progress"></div>
</div>

.krl-toast-demo{position:relative;width:260px;height:70px;border-radius:12px;background:#1a2229;border:1px solid #2c3540;overflow:hidden;font-family:'Poppins',sans-serif;animation:krl-toast-slide-in 3s ease-in-out infinite;}
.krl-toast-demo__icon{position:absolute;top:14px;left:14px;width:32px;height:32px;border-radius:8px;background:rgba(0,255,163,.12);display:flex;align-items:center;justify-content:center;color:#00ffa3;font-size:16px;}
.krl-toast-demo__content{position:absolute;top:14px;left:56px;}
.krl-toast-demo__title{font-size:13px;font-weight:600;color:#fff;}
.krl-toast-demo__text{font-size:11px;color:rgba(255,255,255,.5);margin-top:2px;}
.krl-toast-demo__progress{position:absolute;bottom:0;left:0;height:3px;background:linear-gradient(90deg,#00ffa3,#f5a623);animation:krl-toast-progress 3s linear infinite;}
@keyframes krl-toast-slide-in{0%{transform:translateX(110%);opacity:0;}10%,85%{transform:translateX(0);opacity:1;}100%{transform:translateX(110%);opacity:0;}}
@keyframes krl-toast-progress{0%{width:100%;}100%{width:0%;}}

<div class="krl-toast-demo">
  <div class="krl-toast-demo__icon">✓</div>
  <div class="krl-toast-demo__content">
    <div class="krl-toast-demo__title">Saved Successfully</div>
    <div class="krl-toast-demo__text">Changes applied.</div>
  </div>
  <div class="krl-toast-demo__progress"></div>
</div>

toastnotificationslide

#100

Scroll Progress Bar

A thin progress bar that fills and empties with a multi-color gradient — page scroll indicator.

Misc

Loading...0%

<div class="krl-scrollprogress">
  <div class="krl-scrollprogress__bar"></div>
  <div class="krl-scrollprogress__label">
    <span>Loading...</span>
    <span class="krl-scrollprogress__pct">0%</span>
  </div>
</div>

.krl-scrollprogress{position:relative;width:260px;height:50px;border-radius:12px;background:#0a0d12;border:1px solid #1f2630;overflow:hidden;font-family:'Poppins',sans-serif;}
.krl-scrollprogress__bar{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,#00ffa3,#f5a623,#ff6b9d);width:0;animation:krl-sp-fill 3s ease-in-out infinite;border-radius:11px;}
.krl-scrollprogress__label{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 16px;z-index:2;font-size:12px;font-weight:600;color:#fff;}
.krl-scrollprogress__pct{color:#00ffa3;font-size:14px;font-weight:700;}
@keyframes krl-sp-fill{0%{width:0;}50%{width:100%;}100%{width:0%;}}

<div class="krl-scrollprogress">
  <div class="krl-scrollprogress__bar"></div>
  <div class="krl-scrollprogress__label">
    <span>Loading...</span>
    <span class="krl-scrollprogress__pct">0%</span>
  </div>
</div>

scrollprogressbar

No effects match your search.

KERLION · CSS Effect Library v4.0

Crafted with ❤ for creators · 100 effects · 9 categories

#01 Effect Name

Copied to clipboard