DEV Community: Ayoub Bahlouli

CSS Card Design ‚Äî 40 Examples You Can Copy Right Now (2025)

Ayoub Bahlouli — Tue, 07 Jul 2026 04:49:05 +0000

Cards are the most common UI component on the web. Yet most developers use the same basic box-shadow card everywhere. This guide covers 40 CSS card designs ‚Äî from the simplest foundation to advanced glassmorphism, 3D flip, neon glow, and mesh gradient cards.

üîó Full collection with live demos: uixdraft.com/css-card-design

The Card Foundation

Every card is built on four properties:

.card {
  background: #fff;          /* 1. background */
  border-radius: 12px;       /* 2. rounded corners */
  padding: 24px;             /* 3. inner spacing */
  box-shadow: 0 2px 12px rgba(0,0,0,0.08); /* 4. depth */
}
/* Dark mode */
.dark .card {
  background: #0d1117;
  border: 1px solid rgba(255,255,255,.07);
  /* Skip box-shadow ‚Äî invisible on dark backgrounds */
}

1. Card with Image

.img-card {
  border-radius: 12px;
  overflow: hidden; /* clips image to border-radius */
  border: 1px solid rgba(255,255,255,.07);
}
.img-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;   /* removes bottom gap */
}
.img-card-body { padding: 20px; }

2. Lift on Hover

The most satisfying card interaction ‚Äî 4px lift:

.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  will-change: transform;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}

3. Glow on Hover

Coloured border and outer glow ‚Äî dark UI favourite:

.card {
  border: 1px solid rgba(255,255,255,.07);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.card:hover {
  border-color: rgba(167,139,250,.6);
  box-shadow:
    0 0 0 1px rgba(167,139,250,.2),
    0 0 20px rgba(167,139,250,.15);
}

4. 3D Flip Card

.flip-wrapper {
  perspective: 600px;
  width: 300px; height: 200px;
}
.flip-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
}
.flip-wrapper:hover .flip-inner { transform: rotateY(180deg); }

.flip-front, .flip-back {
  position: absolute; inset: 0;
  border-radius: 12px;
  backface-visibility: hidden;
}
.flip-back {
  transform: rotateY(180deg);
  background: linear-gradient(135deg, #6366f1, #a78bfa);
}

5. Glassmorphism Card

.glass-card {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 24px;
}
/* Must sit over colorful content for the blur to show */

6. Gradient Border Card

.gradient-border-wrap {
  background: linear-gradient(135deg, #a78bfa, #38bdf8);
  border-radius: 14px;
  padding: 2px; /* border thickness */
}
.gradient-border-card {
  background: #0d1117;
  border-radius: 12px; /* 14 - 2 = 12 */
  padding: 24px;
}

7. Pricing Card

.pricing-card {
  border-radius: 14px;
  padding: 28px;
  border: 1px solid rgba(255,255,255,.07);
}
/* Featured variant */
.pricing-card.featured {
  border-color: rgba(167,139,250,.4);
  background: rgba(167,139,250,.05);
}
.price { font-size: 40px; font-weight: 800; }
.price-period { font-size: 14px; color: rgba(255,255,255,.4); }
.features { list-style: none; margin: 20px 0; }
.features li {
  display: flex; align-items: center;
  gap: 8px; padding: 6px 0;
}
.check { color: #34d399; }
.cta-btn {
  width: 100%; padding: 12px; border-radius: 10px;
  background: #a78bfa; color: #06080f;
  font-weight: 700; border: none; cursor: pointer;
}

8. KPI Stat Card

.stat-card {
  border-radius: 12px; padding: 20px;
  border: 1px solid rgba(255,255,255,.07);
}
.stat-icon { font-size: 20px; margin-bottom: 12px; }
.stat-value { font-size: 28px; font-weight: 800; }
.stat-label { font-size: 12px; color: rgba(255,255,255,.4); }
.stat-trend.up   { color: #34d399; font-weight: 700; }
.stat-trend.down { color: #f87171; font-weight: 700; }

9. Progress Card

.progress-track {
  height: 6px;
  background: rgba(255,255,255,.06);
  border-radius: 3px; overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #a78bfa, #38bdf8);
  border-radius: 3px;
  /* Set width dynamically via CSS variable or inline style */
  width: var(--progress, 73%);
}

10. Testimonial Card

.testimonial {
  border-radius: 14px; padding: 24px;
  border: 1px solid rgba(255,255,255,.07);
}
.quote-mark {
  font-size: 48px; line-height: 1;
  color: #a78bfa; margin-bottom: 8px;
}
.quote-text {
  font-style: italic;
  color: rgba(255,255,255,.7);
  line-height: 1.7; margin-bottom: 20px;
}
.quote-author { display: flex; align-items: center; gap: 12px; }
.author-avatar { width: 36px; height: 36px; border-radius: 50%; }
.stars { color: #fbbf24; }

11. Neon Glow Card

.neon-card {
  border: 1px solid rgba(167,139,250,.5);
  border-radius: 14px;
  padding: 24px;
  background: #0d1117;
  box-shadow:
    0 0 0 1px rgba(167,139,250,.1),
    0 0 24px rgba(167,139,250,.2),
    0 0 48px rgba(167,139,250,.08);
}

12. Timeline Card

.timeline { position: relative; padding-left: 28px; }
.timeline::before {
  content: ''; position: absolute;
  left: 8px; top: 0; bottom: 0; width: 1px;
  background: rgba(255,255,255,.08);
}
.timeline-item { position: relative; margin-bottom: 20px; }
.timeline-item::before {
  content: ''; position: absolute;
  left: -24px; top: 6px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #a78bfa;
  box-shadow: 0 0 8px rgba(167,139,250,.6);
}
.timeline-card {
  border-radius: 10px; padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.07);
}

Box-Shadow Guide for Cards

Situation	Shadow
Light mode subtle	`0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04)`
Light mode medium	`0 4px 16px rgba(0,0,0,0.12)`
Light mode floating	`0 8px 32px rgba(0,0,0,0.18)`
Dark mode	Use `border: 1px solid rgba(255,255,255,.07)` instead
Hover state	`0 12px 32px rgba(0,0,0,0.25)`

All 40 Card Designs

The full collection ‚Äî including mesh gradient, neumorphism, alert cards, download cards, product cards, and animated hover effects ‚Äî is available with live previews at:

üëâ uixdraft.com/css-card-design

More CSS references: CSS Buttons (50 styles) ¬∑ CSS Navbars (30 patterns) ¬∑ CSS Grid (35 patterns)

Responsive Navbar HTML CSS ‚Äî 30 Patterns with Code (2025)

Ayoub Bahlouli — Tue, 07 Jul 2026 04:47:47 +0000

Navigation is the first thing users interact with ‚Äî and the first thing developers copy-paste without thinking. This guide covers 30 responsive navbar patterns in HTML and CSS, from the simplest horizontal nav to accessible mega menus and glassmorphism headers.

üîó Interactive version with live nav demos: uixdraft.com/responsive-navbar-html-css

The Foundation: Responsive Navbar Pattern

Every responsive navbar follows this structure:

<nav class="navbar">
  <a href="/" class="logo">Brand</a>
  <button class="hamburger" id="hamburger"
          aria-label="Toggle menu" aria-expanded="false">
    <span></span><span></span><span></span>
  </button>
  <ul class="nav-links" id="nav-menu">
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
  <a href="/signup" class="nav-cta">Get Started</a>
</nav>

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 64px;
  background: #0d1117;
  position: sticky; top: 0; z-index: 100;
}
.logo { font-weight: 800; color: #f1f5f9; text-decoration: none; }
.nav-links { display: flex; gap: 28px; list-style: none; }
.nav-links a { color: rgba(241,245,249,.6); text-decoration: none; }
.nav-links a:hover { color: #f1f5f9; }
.hamburger { display: none; }

@media (max-width: 768px) {
  .hamburger { display: flex; flex-direction: column; gap: 5px; }
  .nav-links  { display: none; }
  .nav-links.open { display: flex; flex-direction: column; width: 100%; }
}

const btn  = document.getElementById('hamburger');
const menu = document.getElementById('nav-menu');
btn.addEventListener('click', () => {
  const open = menu.classList.toggle('open');
  btn.setAttribute('aria-expanded', open);
});

1. Sticky Navbar with Backdrop Blur

Pins to the top, frosted glass background on scroll:

.sticky-nav {
  position: sticky;
  top: 0; z-index: 100;
  background: rgba(13, 17, 23, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.07);
}

2. Glassmorphism Floating Navbar

Floats above the page with a glass effect:

.glass-nav {
  position: fixed;
  top: 16px; left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 1000px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  z-index: 100;
}

3. Transparent Hero Navbar (Gains BG on Scroll)

.hero-nav {
  position: fixed; top: 0; left: 0; right: 0;
  background: transparent;
  transition: background 0.3s, box-shadow 0.3s;
}
.hero-nav.scrolled {
  background: rgba(13, 17, 23, 0.95);
  box-shadow: 0 1px 0 rgba(255,255,255,.07);
}

window.addEventListener('scroll', () => {
  document.querySelector('.hero-nav')
    .classList.toggle('scrolled', window.scrollY > 60);
});

4. Scroll-Shrink Navbar

Height reduces as the user scrolls:

.nav-shrink {
  height: 72px;
  transition: height 0.3s ease;
}
.nav-shrink.scrolled { height: 48px; }

window.addEventListener('scroll', () => {
  document.querySelector('.nav-shrink')
    .classList.toggle('scrolled', window.scrollY > 80);
});

5. CSS-Only Hamburger Menu (No JavaScript)

Pure CSS toggle using a hidden checkbox:

<input type="checkbox" id="nav-toggle" hidden>
<label for="nav-toggle" class="hamburger">
  <span></span><span></span><span></span>
</label>
<ul class="nav-links">...</ul>

/* Show menu when checkbox is checked */
#nav-toggle:checked ~ .nav-links { display: flex; flex-direction: column; }

/* Animate bars to √ó */
#nav-toggle:checked ~ .hamburger span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
#nav-toggle:checked ~ .hamburger span:nth-child(2) { opacity: 0; }
#nav-toggle:checked ~ .hamburger span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

6. Slide-in Drawer (Off-Canvas)

.drawer {
  position: fixed; top: 0; left: 0;
  width: 280px; height: 100vh;
  background: #161b22;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  z-index: 200; padding: 24px 20px;
}
.drawer.open { transform: translateX(0); }
.overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  display: none; z-index: 199;
}
.overlay.show { display: block; }

7. CSS Dropdown Menu

.has-dropdown { position: relative; }
.dropdown {
  position: absolute; top: 100%; left: 0;
  min-width: 200px;
  background: #161b22;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; padding: 6px;
  list-style: none;
  visibility: hidden; opacity: 0;
  transform: translateY(-6px);
  transition: all 0.2s ease;
}
/* Trigger on hover AND keyboard focus */
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  visibility: visible; opacity: 1;
  transform: translateY(4px);
}

8. Bottom Tab Navigation (Mobile)

.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; height: 64px;
  background: #0d1117;
  border-top: 1px solid rgba(255,255,255,.07);
}
.tab-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
}
.tab-item.active .tab-label { color: #a78bfa; font-weight: 700; }

Accessibility Checklist for Navbars

Always include these for production:

‚úÖ aria-label="Main navigation" on <nav>
‚úÖ aria-expanded="false/true" on hamburger button
‚úÖ aria-controls="menu-id" pointing to the menu
‚úÖ aria-current="page" on the active link
‚úÖ :focus-visible styles ‚Äî never outline: none without a replacement
‚úÖ Keyboard navigable dropdowns (:focus-within)
‚úÖ Skip-to-content link as the first focusable element

<!-- First element in <body> -->
<a href="#main-content" class="skip-link">Skip to content</a>

.skip-link {
  position: absolute; top: -40px; left: 0;
  background: #a78bfa; color: #06080f;
  padding: 8px 16px; z-index: 9999;
}
.skip-link:focus { top: 0; }

All 30 Navbar Patterns

The complete collection ‚Äî including mega menus, animated X hamburger, progress-aware sticky nav, vertical sidebar nav, breadcrumbs, and docs sidebar ‚Äî is at:

üëâ uixdraft.com/responsive-navbar-html-css

More CSS references: CSS Buttons (50 styles) ¬∑ CSS Grid (35 patterns) ¬∑ CSS Animations (40 demos)

CSS Grid Examples ‚Äî 35 Layout Patterns Every Developer Should Know (2025)

Ayoub Bahlouli — Tue, 07 Jul 2026 04:43:51 +0000

CSS Grid is the most powerful layout tool in CSS ‚Äî yet most developers only use repeat(3, 1fr). This guide covers 35 grid patterns from the basics to production-ready layouts you can copy directly into your projects.

üîó Full visual guide with live grid previews: uixdraft.com/css-grid-examples

The Fundamentals (30 seconds)

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3 equal columns */
  grid-template-rows: auto;               /* rows auto-size */
  gap: 16px;                              /* gutter between cells */
}

That's all you need for 80% of use cases. Now let's go deeper.

Category 1: Basic Column Grids

2-Column Equal

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

3-Column Equal

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

Asymmetric Content + Sidebar (2:1)

.content-sidebar {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
}

Fixed Sidebar + Fluid Content

.fixed-sidebar {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
}

Category 2: Template Areas

Named areas make complex layouts readable:

Holy Grail Layout

.holy-grail {
  display: grid;
  grid-template:
    "header header header" auto
    "nav    main   aside"  1fr
    "footer footer footer" auto
    / 200px  1fr    200px;
  min-height: 100vh;
}
header { grid-area: header; }
nav    { grid-area: nav; }
main   { grid-area: main; }
aside  { grid-area: aside; }
footer { grid-area: footer; }

App Shell (Sidebar + Content)

.app-shell {
  display: grid;
  grid-template-areas:
    "topbar  topbar"
    "sidebar content";
  grid-template-columns: 260px 1fr;
  grid-template-rows: 64px 1fr;
  height: 100vh;
}
.topbar  { grid-area: topbar; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }

Category 3: Responsive Without Media Queries

This is where Grid really shines ‚Äî the auto-fill + minmax() pattern:

/* Cards reflow automatically as viewport narrows */
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

auto-fill vs auto-fit:

auto-fill ‚Äî creates as many columns as fit, even if some are empty
auto-fit ‚Äî collapses empty columns so items stretch to fill the row

Use auto-fill for card grids (items should stay at their minimum width). Use auto-fit for a small number of items that should always stretch to fill the container.

/* Sidebar that stacks on mobile ‚Äî no @media needed for the grid */
.with-sidebar {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
}
@media (max-width: 768px) {
  .with-sidebar { grid-template-columns: 1fr; }
}

Category 4: Gallery Patterns

Featured + Thumbnails

.featured-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: 8px;
}
.featured { grid-row: 1 / -1; } /* spans all rows */

Mosaic (Varied Spans)

.mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
  gap: 8px;
}
.tile-large { grid-column: span 2; grid-row: span 2; }
.tile-wide  { grid-column: span 2; }
.tile-tall  { grid-row: span 2; }

Category 5: Dashboard Layouts

KPI Stat Row

.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .kpi-row { grid-template-columns: 1fr; } }

Bento Grid (Mixed Widgets)

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 180px;
  gap: 16px;
}
.widget-large { grid-column: span 2; grid-row: span 2; }
.widget-wide  { grid-column: span 2; }
.widget-tall  { grid-row: span 2; }

Category 6: Advanced Techniques

CSS Subgrid (Align Cards Across Rows)

The most underused Grid feature ‚Äî children inherit parent grid tracks:

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid; /* inherits parent row tracks */
}
/* Now card title/body/CTA align perfectly across all cards */

Dense Auto-Placement

Fills visual gaps left by spanning items:

.dense-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  grid-auto-flow: dense; /* fills gaps automatically */
  gap: 8px;
}

Container Query Grid (Most Modern)

Grid that responds to its container, not the viewport:

.wrapper { container-type: inline-size; }
.card-grid { display: grid; grid-template-columns: 1fr; }
@container (min-width: 600px)  { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@container (min-width: 900px)  { .card-grid { grid-template-columns: repeat(3, 1fr); } }

The `fr` Unit Explained

fr = fraction of remaining free space (after fixed sizes and gaps).

/* 3 equal columns */
grid-template-columns: 1fr 1fr 1fr;

/* Left twice as wide as right */
grid-template-columns: 2fr 1fr;

/* Fixed sidebar + fluid content */
grid-template-columns: 260px 1fr;
/* The 1fr gets ALL remaining space after the 260px sidebar */

All 35 Grid Patterns

The full collection ‚Äî with live visual grid previews showing colored cells ‚Äî is at:

üëâ uixdraft.com/css-grid-examples

Includes: overlapping grid items, named lines, full-page immersive grids, Grid + Flexbox hybrid patterns, and staggered card entrances.

More CSS references: CSS Animations (40 demos) ¬∑ CSS Navbars (30 patterns) ¬∑ CSS Cards (40 designs)

CSS Animation Examples — 40 Live Demos You Can Copy (2025)

Ayoub Bahlouli — Tue, 07 Jul 2026 04:42:12 +0000

CSS animations can make a site feel alive — or overwhelming. This guide covers 40 CSS animation examples organized by type: from the basics every developer should know, to advanced effects like typewriter text, neon flicker, and aurora backgrounds.

🔗 Interactive version with live demos + click-to-replay: uixdraft.com/css-animation-examples

CSS Animation Basics

Every CSS animation needs two things:

@keyframes — defines the states the element moves through
animation property — applies the keyframes to an element

/* 1. Define the animation */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 2. Apply it */
.element {
  animation: fadeIn 0.5s ease forwards;
  /*         name   dur  easing fill-mode */
}

Category 1: Fade Animations

Fade In Up

The most common entrance animation — element fades in while rising.

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in-up {
  animation: fadeInUp 0.6s ease forwards;
}

Staggered Fade In

Multiple elements animate in sequence using animation-delay:

.item { animation: fadeInUp 0.5s ease both; }
.item:nth-child(1) { animation-delay: 0.0s; }
.item:nth-child(2) { animation-delay: 0.1s; }
.item:nth-child(3) { animation-delay: 0.2s; }
.item:nth-child(4) { animation-delay: 0.3s; }

Category 2: Slide Animations

Float (continuous)

Perfect for hero illustrations — a gentle up-and-down loop.

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}
.float {
  animation: float 2.5s ease-in-out infinite;
}

Marquee (scrolling text)

Infinite horizontal scroll — announcements and logo strips.

@keyframes marquee {
  from { transform: translateX(100%); }
  to   { transform: translateX(-100%); }
}
.marquee {
  display: inline-block;
  animation: marquee 6s linear infinite;
  white-space: nowrap;
}

Category 3: Bounce & Spring

Bounce

Physics-based bounce with cubic-bezier easing:

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(-28px);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
.bounce { animation: bounce 1s ease-in-out infinite; }

Rubber Band

Squash and stretch effect that makes elements feel physical:

@keyframes rubberBand {
  0%   { transform: scale(1, 1); }
  30%  { transform: scale(1.25, 0.75); }
  40%  { transform: scale(0.75, 1.25); }
  50%  { transform: scale(1.15, 0.85); }
  65%  { transform: scale(0.95, 1.05); }
  75%  { transform: scale(1.05, 0.95); }
  100% { transform: scale(1, 1); }
}
.rubber-band { animation: rubberBand 1s ease; }

Category 4: Text Animations

Typewriter Effect

Pure CSS — no JavaScript needed.

@keyframes typewriter {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes cursorBlink {
  0%, 100% { border-color: #34d399; }
  50%       { border-color: transparent; }
}
.typewriter {
  overflow: hidden;
  white-space: nowrap;
  width: fit-content;
  border-right: 2px solid #34d399;
  animation:
    typewriter 2s steps(20) forwards,
    cursorBlink 0.7s step-end infinite;
}

Gradient Text Shift

Animated gradient flowing through text:

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.gradient-text {
  background: linear-gradient(90deg, #a78bfa, #38bdf8, #34d399, #fbbf24, #a78bfa);
  background-size: 300% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: gradientShift 3s linear infinite;
}

Category 5: Loaders

CSS Spinner

The classic — just two lines of CSS:

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

Dot Pulse

Three-dot typing indicator:

@keyframes dotPulse {
  0%, 80%, 100% { transform: scale(0); opacity: 0.5; }
  40%           { transform: scale(1); opacity: 1; }
}
.dot {
  width: 10px; height: 10px;
  background: #6366f1; border-radius: 50%;
  animation: dotPulse 1.2s ease-in-out infinite both;
}
.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }

Skeleton Loading

The shimmer placeholder effect used by Facebook, LinkedIn, YouTube:

@keyframes skeleton {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.skeleton-line {
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.10) 37%,
    rgba(255,255,255,0.04) 63%
  );
  background-size: 400px 100%;
  animation: skeleton 1.2s linear infinite;
}

Category 6: Background Animations

Animated Gradient Background

Hue cycles continuously — popular for hero sections:

@keyframes gradFlow {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}
.animated-bg {
  background: linear-gradient(270deg, #6366f1, #ec4899, #f97316, #38bdf8);
  background-size: 400% 400%;
  animation: gradFlow 6s ease infinite;
}

Blob Morphing

Organic shape shifting — abstract hero backgrounds:

@keyframes blobMove {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50%       { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
}
.blob {
  animation: blobMove 5s ease-in-out infinite;
  background: linear-gradient(135deg, #a78bfa, #38bdf8);
}

Key Animation Properties Cheatsheet

.element {
  animation-name: fadeIn;           /* @keyframes name */
  animation-duration: 0.5s;        /* how long */
  animation-timing-function: ease; /* easing curve */
  animation-delay: 0.2s;           /* wait before start */
  animation-iteration-count: 1;    /* or 'infinite' */
  animation-direction: normal;     /* or 'alternate', 'reverse' */
  animation-fill-mode: forwards;   /* hold final state */
  animation-play-state: running;   /* or 'paused' */
}
/* Shorthand: name duration easing delay iterations direction fill */
animation: fadeIn 0.5s ease 0.2s 1 normal forwards;

All 40 Animations with Live Demos

The complete collection — including neon flicker, pop-in, ping ripple, aurora, and animated background grain — is available with live click-to-replay previews at:

👉 uixdraft.com/css-animation-examples

Also check out: CSS Button Styles (50 examples) · CSS Grid Examples (35 patterns) · CSS Card Design (40 examples)

CSS Button Styles — 50 Examples with Copy-Ready Code (2025)

Ayoub Bahlouli — Tue, 07 Jul 2026 04:32:40 +0000