← Back to AIBridges

CSS Tricks & Techniques

A daily collection of creative CSS patterns and effects

Auto-updated daily · Last: Feb 25, 2026

Rotating Border

Feb 18, 2026 
.rotating-border {
  position: relative;
  padding: 1.5rem 2rem;
  background: #0a0a0f;
  border-radius: 12px;
  overflow: hidden;
}

.rotating-border::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: conic-gradient(from 0deg, transparent, #6366f1, transparent 30%);
  animation: rotate 3s linear infinite;
}

.rotating-border::after {
  content: attr(data-text);
  position: absolute;
  inset: 2px;
  background: #0a0a0f;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes rotate {
  to { transform: rotate(360deg); }
}
<div class="rotating-border" data-text="Spinning!"></div>
Source: CodePen

Animated Gradient Text

Feb 18, 2026
Hello World 
.gradient-flow {
  font-size: 2.5rem;
  font-weight: 800;
  background: linear-gradient(90deg, #6366f1, #00E1E6, #f472b6, #6366f1);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 4s ease infinite;
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
<span class="gradient-flow">Hello World</span>
Source: CSS-Tricks

Glassmorphism Card

Feb 18, 2026
Frosted Glass Effect
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
<div class="glass-card">Frosted Glass Effect</div>
Source: https://css.glass

Shimmer Loading

Feb 18, 2026 
.shimmer {
  width: 200px;
  height: 24px;
  background: linear-gradient(90deg, #1a1a2e 25%, #2a2a4e 50%, #1a1a2e 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
<div class="shimmer"></div>
Source: https://css-tricks.com/building-skeleton-screens-css-custom-properties/

Text Stroke Outline

Feb 18, 2026
OUTLINE 
.text-stroke {
  font-size: 3rem;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 2px #6366f1;
  transition: all 0.3s ease;
}
.text-stroke:hover {
  color: #6366f1;
  -webkit-text-stroke: 2px transparent;
}
<span class="text-stroke">OUTLINE</span>
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke

Pulsing Dot Loader

Feb 18, 2026 
.pulse-loader {
  display: flex;
  gap: 8px;
}
.pulse-dot {
  width: 12px;
  height: 12px;
  background: #6366f1;
  border-radius: 50%;
  animation: pulse 1.4s ease-in-out infinite;
}
.pulse-dot:nth-child(2) { animation-delay: 0.2s; }
.pulse-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.5); opacity: 0.5; }
}
<div class="pulse-loader"><div class="pulse-dot"></div><div class="pulse-dot"></div><div class="pulse-dot"></div></div>
Source: https://loading.io/css/

3D Card Flip

Feb 18, 2026
Front
Back!
.flip-card {
  width: 200px;
  height: 120px;
  perspective: 1000px;
}
.flip-card-inner {
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  position: relative;
}
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-weight: 600;
}
.flip-card-front {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: white;
}
.flip-card-back {
  background: linear-gradient(135deg, #00E1E6, #0891b2);
  color: white;
  transform: rotateY(180deg);
}
<div class="flip-card"><div class="flip-card-inner"><div class="flip-card-front">Front</div><div class="flip-card-back">Back!</div></div></div>
Source: https://www.w3schools.com/howto/howto_css_flip_card.asp

Smooth Underline Animation

Feb 18, 2026
Hover for underline 
.underline-link {
  position: relative;
  color: #6366f1;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 500;
}
.underline-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #6366f1, #00E1E6);
  transition: width 0.3s ease;
}
.underline-link:hover::after {
  width: 100%;
}
<a href="#" class="underline-link">Hover for underline</a>
Source: https://tobiasahlin.com/blog/css-tricks-links/

Neumorphism Button

Feb 18, 2026 
.neu-btn {
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  color: #6366f1;
  background: #e0e5ec;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 6px 6px 12px #b8b9be, -6px -6px 12px #ffffff;
  transition: all 0.2s ease;
}
.neu-btn:hover {
  box-shadow: 4px 4px 8px #b8b9be, -4px -4px 8px #ffffff;
}
.neu-btn:active {
  box-shadow: inset 4px 4px 8px #b8b9be, inset -4px -4px 8px #ffffff;
}
<button class="neu-btn">Neumorphic</button>
Source: https://neumorphism.io

Feathered Edges (No Border Radius)

Feb 18, 2026
Mask
Shadow
/* Method 1: Mask with radial gradient - soft vignette edges */
.feather-mask {
  background: linear-gradient(135deg, #6366f1, #00E1E6);
  -webkit-mask: radial-gradient(
    ellipse 70% 70% at center, 
    black 50%, 
    transparent 100%
  );
  mask: radial-gradient(
    ellipse 70% 70% at center, 
    black 50%, 
    transparent 100%
  );
}

/* Method 2: Box-shadow blur - glowing soft edges */
.feather-shadow {
  background: #6366f1;
  box-shadow: 0 0 40px 20px #6366f1;
  /* The large blur-radius (40px) and spread (20px)
     extends color outward, creating soft edges */
}

/* Method 3: Pseudo-element with blur filter */
.feather-blur {
  position: relative;
}
.feather-blur::before {
  content: '';
  position: absolute;
  inset: -10px;
  background: inherit;
  filter: blur(15px);
  z-index: -1;
}
<!-- Mask method - edges fade to transparent -->
<div class="feather-mask">Content</div>

<!-- Shadow method - color bleeds outward -->
<div class="feather-shadow">Content</div>

<!-- Blur method - soft glow behind element -->
<div class="feather-blur">Content</div>
Source: CSS-Tricks Mask Property

Typing Text Effect

Feb 18, 2026
Hello, World!
.typing-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.5rem;
  color: #00E1E6;
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid #00E1E6;
  width: 0;
  animation: typing 3s steps(20) forwards, blink 0.7s step-end infinite;
}
@keyframes typing {
  to { width: 100%; }
}
@keyframes blink {
  50% { border-color: transparent; }
}
<div style="display:inline-block"><span class="typing-text">Hello, World!</span></div>
Source: https://css-tricks.com/snippets/css/typewriter-effect/

Gradient Border

Feb 19, 2026
Gradient Border
.gradient-border {
  position: relative;
  padding: 1.5rem 2rem;
  background: #0a0a0f;
  border-radius: 12px;
  font-weight: 500;
}
.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 2px;
  background: linear-gradient(135deg, #6366f1, #00E1E6, #f472b6);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
<div class="gradient-border">Gradient Border</div>
Source: https://css-tricks.com/gradient-borders-in-css/

Neon Glow Button

Feb 20, 2026 
.neon-btn {
  padding: 1rem 2.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: #0ff;
  background: transparent;
  border: 2px solid #0ff;
  border-radius: 8px;
  cursor: pointer;
  text-shadow: 0 0 10px #0ff, 0 0 20px #0ff;
  box-shadow: 0 0 10px #0ff, inset 0 0 10px rgba(0,255,255,0.1);
  transition: all 0.3s ease;
}
.neon-btn:hover {
  background: rgba(0,255,255,0.1);
  box-shadow: 0 0 20px #0ff, 0 0 40px #0ff, inset 0 0 20px rgba(0,255,255,0.2);
}
<button class="neon-btn">Hover Me</button>
Source: https://css-tricks.com

Hover Lift Card

Feb 21, 2026
Hover to lift
.lift-card {
  padding: 2rem;
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
.lift-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(99, 102, 241, 0.3);
}
<div class="lift-card">Hover to lift</div>
Source: https://www.joshwcomeau.com/animation/css-transitions/

Smooth Underline Animation

Feb 21, 2026
Hover for underline 
.underline-link {
  position: relative;
  color: #6366f1;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 500;
}
.underline-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #6366f1, #00E1E6);
  transition: width 0.3s ease;
}
.underline-link:hover::after {
  width: 100%;
}
<a href="#" class="underline-link">Hover for underline</a>
Source: https://tobiasahlin.com/blog/css-tricks-links/

Neon Glow Button

Feb 22, 2026 
.neon-btn {
  padding: 1rem 2.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: #0ff;
  background: transparent;
  border: 2px solid #0ff;
  border-radius: 8px;
  cursor: pointer;
  text-shadow: 0 0 10px #0ff, 0 0 20px #0ff;
  box-shadow: 0 0 10px #0ff, inset 0 0 10px rgba(0,255,255,0.1);
  transition: all 0.3s ease;
}
.neon-btn:hover {
  background: rgba(0,255,255,0.1);
  box-shadow: 0 0 20px #0ff, 0 0 40px #0ff, inset 0 0 20px rgba(0,255,255,0.2);
}
<button class="neon-btn">Hover Me</button>
Source: https://css-tricks.com

Feathered Edges (No Border Radius)

Feb 23, 2026
Mask Method
Shadow Method
/* Method 1: Mask with radial gradient - soft vignette edges */
.feather-mask {
  width: 250px;
  height: 150px;
  background: linear-gradient(135deg, #6366f1, #00E1E6);
  -webkit-mask: radial-gradient(ellipse 70% 70% at center, black 50%, transparent 100%);
  mask: radial-gradient(ellipse 70% 70% at center, black 50%, transparent 100%);
}

/* Method 2: Box-shadow blur - glowing soft edges */
.feather-shadow {
  width: 200px;
  height: 120px;
  background: #6366f1;
  box-shadow: 0 0 40px 20px #6366f1;
  /* The blur extends the color outward, creating soft edges */
}

/* Method 3: Gradient border fade - edges dissolve into background */
.feather-gradient {
  position: relative;
  width: 220px;
  height: 130px;
  background: #0a0a0f;
}
.feather-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #6366f1, #00E1E6);
  -webkit-mask: linear-gradient(black, black) content-box,
               linear-gradient(black, black);
  mask: linear-gradient(black, black) content-box,
        linear-gradient(black, black);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 3px;
  filter: blur(8px);
  opacity: 0.8;
}
<div style="display:flex;gap:2rem;flex-wrap:wrap;align-items:center;">
  <div class="feather-mask" style="display:flex;align-items:center;justify-content:center;color:white;font-weight:600;">Mask Method</div>
  <div class="feather-shadow" style="display:flex;align-items:center;justify-content:center;color:white;font-weight:600;">Shadow Method</div>
</div>
Source: https://css-tricks.com/almanac/properties/m/mask/

Typing Text Effect

Feb 24, 2026
Hello, World!
.typing-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.5rem;
  color: #00E1E6;
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid #00E1E6;
  width: 0;
  animation: typing 3s steps(20) forwards, blink 0.7s step-end infinite;
}
@keyframes typing {
  to { width: 100%; }
}
@keyframes blink {
  50% { border-color: transparent; }
}
<div style="display:inline-block"><span class="typing-text">Hello, World!</span></div>
Source: https://css-tricks.com/snippets/css/typewriter-effect/

Glassmorphism Card

Feb 25, 2026
Frosted Glass Effect
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
<div class="glass-card">Frosted Glass Effect</div>
Source: https://css.glass