12 CSS Ripple Effects08 / 12

Pure CSSMIT licensed

CSS Ripple Card Hover Effect

A six-card portfolio grid where each card fires a radial-gradient ripple from its center on hover via a CSS ::before pseudo-element — the ripple scale transitions from 0 to 2.5x with opacity fade. Six distinct warm palettes: amber, charcoal, terracotta, cream, deep-rust and oat. The icon bounces and an arrow link slides in. Syne + Syne Mono on linen.

Published

Live Demo
Try it

This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.

The code

<div class="rpl-08">
  <div class="rpl-08__header">
    <h1>Ripple Card Hover Effect</h1>
    <p>Radial gradient ripple expands from center on hover — pure CSS transitions</p>
  </div>

  <div class="rpl-08__grid">
    <div class="rpl-08__card rpl-08__card--a">
      <div class="rpl-08__card-num">01 / DESIGN</div>
      <span class="rpl-08__card-icon">🎨</span>
      <h3>Visual Systems</h3>
      <p>Cohesive design languages built from the ground up — color, type, motion.</p>
      <div class="rpl-08__arrow">Explore → </div>
    </div>

    <div class="rpl-08__card rpl-08__card--b">
      <div class="rpl-08__card-num">02 / CODE</div>
      <span class="rpl-08__card-icon">⌨️</span>
      <h3>Frontend Engineering</h3>
      <p>Production-grade CSS, zero-dependency animations, WebGL experiments.</p>
      <div class="rpl-08__arrow">View work → </div>
    </div>

    <div class="rpl-08__card rpl-08__card--c">
      <div class="rpl-08__card-num">03 / MOTION</div>
      <span class="rpl-08__card-icon">✦</span>
      <h3>Interaction Design</h3>
      <p>Micro-interactions, page transitions and haptic-inspired feedback loops.</p>
      <div class="rpl-08__arrow">See demos → </div>
    </div>

    <div class="rpl-08__card rpl-08__card--d">
      <div class="rpl-08__card-num">04 / BRAND</div>
      <span class="rpl-08__card-icon">◈</span>
      <h3>Identity & Type</h3>
      <p>Custom wordmarks, editorial typography and brand system documentation.</p>
      <div class="rpl-08__arrow">Browse → </div>
    </div>

    <div class="rpl-08__card rpl-08__card--e">
      <div class="rpl-08__card-num">05 / LAB</div>
      <span class="rpl-08__card-icon">🧪</span>
      <h3>Experiments</h3>
      <p>Weird CSS, generative art, shader sketches and ideas with no brief.</p>
      <div class="rpl-08__arrow">Open lab → </div>
    </div>

    <div class="rpl-08__card rpl-08__card--f">
      <div class="rpl-08__card-num">06 / ABOUT</div>
      <span class="rpl-08__card-icon">👤</span>
      <h3>Hello, I'm Mara</h3>
      <p>Designer-developer. I believe the best interfaces feel inevitable.</p>
      <div class="rpl-08__arrow">Say hi → </div>
    </div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Syne+Mono&display=swap');

.rpl-08,
.rpl-08 *,
.rpl-08 *::before,
.rpl-08 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.rpl-08 ::selection {
  background: #ff9500;
  color: #1a0e00;
}

.rpl-08 {
  font-family: 'Syne', sans-serif;
  background: #f5f0eb;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  padding: 64px 24px;
  color: #1a1209;
}

.rpl-08__header {
  text-align: center;
}

.rpl-08__header h1 {
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #1a1209;
}

.rpl-08__header p {
  margin-top: 10px;
  font-size: 0.95rem;
  color: rgba(26,18,9,0.5);
}
/* ─── Card grid ─── */

.rpl-08__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  width: min(920px, 100%);
}
/* Base card */

.rpl-08__card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 32px;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.3s;
}

.rpl-08__card:hover {
  transform: translateY(-6px) scale(1.01);
}
/* Ripple on hover: pseudoelement that expands from center */

.rpl-08__card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.4s;
  opacity: 0;
  pointer-events: none;
  transform-origin: center;
}

.rpl-08__card:hover::before {
  transform: scale(2.5);
  opacity: 1;
}
/* Card A — sand/amber */

.rpl-08__card--a {
  background: #ffd185;
  box-shadow: 0 4px 20px rgba(255,149,0,0.2), inset 0 1px 0 rgba(255,255,255,0.6);
}

.rpl-08__card--a:hover {
  box-shadow: 0 20px 60px rgba(255,149,0,0.3);
}

.rpl-08__card--a::before {
  background: radial-gradient(circle, rgba(255,200,80,0.6), transparent);
}
/* Card B — warm charcoal */

.rpl-08__card--b {
  background: #2a2016;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  color: #f5ede0;
}

.rpl-08__card--b:hover {
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

.rpl-08__card--b::before {
  background: radial-gradient(circle, rgba(255,149,0,0.25), transparent);
}
/* Card C — terracotta */

.rpl-08__card--c {
  background: #e07050;
  box-shadow: 0 4px 20px rgba(224,112,80,0.3);
  color: #fff;
}

.rpl-08__card--c:hover {
  box-shadow: 0 20px 60px rgba(224,112,80,0.5);
}

.rpl-08__card--c::before {
  background: radial-gradient(circle, rgba(255,200,170,0.5), transparent);
}
/* Card D — cream */

.rpl-08__card--d {
  background: #fffaf3;
  border: 2px solid rgba(26,18,9,0.1);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.rpl-08__card--d:hover {
  box-shadow: 0 20px 60px rgba(0,0,0,0.1);
}

.rpl-08__card--d::before {
  background: radial-gradient(circle, rgba(255,200,100,0.35), transparent);
}
/* Card E — deep rust */

.rpl-08__card--e {
  background: #5c1a00;
  box-shadow: 0 4px 20px rgba(92,26,0,0.4);
  color: #ffd185;
}

.rpl-08__card--e:hover {
  box-shadow: 0 20px 60px rgba(92,26,0,0.6);
}

.rpl-08__card--e::before {
  background: radial-gradient(circle, rgba(255,149,0,0.3), transparent);
}
/* Card F — oat */

.rpl-08__card--f {
  background: linear-gradient(135deg, #e8dcc8, #d4c4a8);
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.rpl-08__card--f:hover {
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.rpl-08__card--f::before {
  background: radial-gradient(circle, rgba(255,255,220,0.5), transparent);
}
/* Card content */

.rpl-08__card-num {
  font-family: 'Syne Mono';
  font-size: 0.72rem;
  opacity: 0.45;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
  position: relative;
  z-index: 2;
}

.rpl-08__card-icon {
  font-size: 2.2rem;
  margin-bottom: 14px;
  display: block;
  position: relative;
  z-index: 2;
  transition: transform 0.3s;
}

.rpl-08__card:hover .rpl-08__card-icon {
  transform: scale(1.15) rotate(-5deg);
}

.rpl-08__card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  z-index: 2;
  margin-bottom: 8px;
}

.rpl-08__card p {
  font-size: 0.88rem;
  line-height: 1.5;
  opacity: 0.65;
  font-weight: 400;
  position: relative;
  z-index: 2;
}

.rpl-08__card .rpl-08__arrow {
  position: relative;
  z-index: 2;
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s, transform 0.3s;
}

.rpl-08__card:hover .rpl-08__arrow {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 640px) {
  .rpl-08__grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rpl-08__card,
    .rpl-08__card::before,
    .rpl-08__card-icon,
    .rpl-08__arrow {
    transition: none !important;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Ripple Effect from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: CSS Ripple Card Hover Effect
Source: https://codefronts.com/motion/css-ripple-designs/css-ripple-card-hover-effect/

A six-card portfolio grid where each card fires a radial-gradient ripple from its center on hover via a CSS ::before pseudo-element — the ripple scale transitions from 0 to 2.5x with opacity fade. Six distinct warm palettes: amber, charcoal, terracotta, cream, deep-rust and oat. The icon bounces and an arrow link slides in. Syne + Syne Mono on linen.
## HTML
```html
<div class="rpl-08">
  <div class="rpl-08__header">
    <h1>Ripple Card Hover Effect</h1>
    <p>Radial gradient ripple expands from center on hover — pure CSS transitions</p>
  </div>

  <div class="rpl-08__grid">
    <div class="rpl-08__card rpl-08__card--a">
      <div class="rpl-08__card-num">01 / DESIGN</div>
      <span class="rpl-08__card-icon">🎨</span>
      <h3>Visual Systems</h3>
      <p>Cohesive design languages built from the ground up — color, type, motion.</p>
      <div class="rpl-08__arrow">Explore → </div>
    </div>

    <div class="rpl-08__card rpl-08__card--b">
      <div class="rpl-08__card-num">02 / CODE</div>
      <span class="rpl-08__card-icon">⌨️</span>
      <h3>Frontend Engineering</h3>
      <p>Production-grade CSS, zero-dependency animations, WebGL experiments.</p>
      <div class="rpl-08__arrow">View work → </div>
    </div>

    <div class="rpl-08__card rpl-08__card--c">
      <div class="rpl-08__card-num">03 / MOTION</div>
      <span class="rpl-08__card-icon">✦</span>
      <h3>Interaction Design</h3>
      <p>Micro-interactions, page transitions and haptic-inspired feedback loops.</p>
      <div class="rpl-08__arrow">See demos → </div>
    </div>

    <div class="rpl-08__card rpl-08__card--d">
      <div class="rpl-08__card-num">04 / BRAND</div>
      <span class="rpl-08__card-icon">◈</span>
      <h3>Identity & Type</h3>
      <p>Custom wordmarks, editorial typography and brand system documentation.</p>
      <div class="rpl-08__arrow">Browse → </div>
    </div>

    <div class="rpl-08__card rpl-08__card--e">
      <div class="rpl-08__card-num">05 / LAB</div>
      <span class="rpl-08__card-icon">🧪</span>
      <h3>Experiments</h3>
      <p>Weird CSS, generative art, shader sketches and ideas with no brief.</p>
      <div class="rpl-08__arrow">Open lab → </div>
    </div>

    <div class="rpl-08__card rpl-08__card--f">
      <div class="rpl-08__card-num">06 / ABOUT</div>
      <span class="rpl-08__card-icon">👤</span>
      <h3>Hello, I'm Mara</h3>
      <p>Designer-developer. I believe the best interfaces feel inevitable.</p>
      <div class="rpl-08__arrow">Say hi → </div>
    </div>
  </div>
</div>
```
## CSS
```css
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Syne+Mono&display=swap');

.rpl-08,
.rpl-08 *,
.rpl-08 *::before,
.rpl-08 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.rpl-08 ::selection {
  background: #ff9500;
  color: #1a0e00;
}

.rpl-08 {
  font-family: 'Syne', sans-serif;
  background: #f5f0eb;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  padding: 64px 24px;
  color: #1a1209;
}

.rpl-08__header {
  text-align: center;
}

.rpl-08__header h1 {
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #1a1209;
}

.rpl-08__header p {
  margin-top: 10px;
  font-size: 0.95rem;
  color: rgba(26,18,9,0.5);
}
/* ─── Card grid ─── */

.rpl-08__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  width: min(920px, 100%);
}
/* Base card */

.rpl-08__card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 32px;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.3s;
}

.rpl-08__card:hover {
  transform: translateY(-6px) scale(1.01);
}
/* Ripple on hover: pseudoelement that expands from center */

.rpl-08__card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.4s;
  opacity: 0;
  pointer-events: none;
  transform-origin: center;
}

.rpl-08__card:hover::before {
  transform: scale(2.5);
  opacity: 1;
}
/* Card A — sand/amber */

.rpl-08__card--a {
  background: #ffd185;
  box-shadow: 0 4px 20px rgba(255,149,0,0.2), inset 0 1px 0 rgba(255,255,255,0.6);
}

.rpl-08__card--a:hover {
  box-shadow: 0 20px 60px rgba(255,149,0,0.3);
}

.rpl-08__card--a::before {
  background: radial-gradient(circle, rgba(255,200,80,0.6), transparent);
}
/* Card B — warm charcoal */

.rpl-08__card--b {
  background: #2a2016;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  color: #f5ede0;
}

.rpl-08__card--b:hover {
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

.rpl-08__card--b::before {
  background: radial-gradient(circle, rgba(255,149,0,0.25), transparent);
}
/* Card C — terracotta */

.rpl-08__card--c {
  background: #e07050;
  box-shadow: 0 4px 20px rgba(224,112,80,0.3);
  color: #fff;
}

.rpl-08__card--c:hover {
  box-shadow: 0 20px 60px rgba(224,112,80,0.5);
}

.rpl-08__card--c::before {
  background: radial-gradient(circle, rgba(255,200,170,0.5), transparent);
}
/* Card D — cream */

.rpl-08__card--d {
  background: #fffaf3;
  border: 2px solid rgba(26,18,9,0.1);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.rpl-08__card--d:hover {
  box-shadow: 0 20px 60px rgba(0,0,0,0.1);
}

.rpl-08__card--d::before {
  background: radial-gradient(circle, rgba(255,200,100,0.35), transparent);
}
/* Card E — deep rust */

.rpl-08__card--e {
  background: #5c1a00;
  box-shadow: 0 4px 20px rgba(92,26,0,0.4);
  color: #ffd185;
}

.rpl-08__card--e:hover {
  box-shadow: 0 20px 60px rgba(92,26,0,0.6);
}

.rpl-08__card--e::before {
  background: radial-gradient(circle, rgba(255,149,0,0.3), transparent);
}
/* Card F — oat */

.rpl-08__card--f {
  background: linear-gradient(135deg, #e8dcc8, #d4c4a8);
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.rpl-08__card--f:hover {
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.rpl-08__card--f::before {
  background: radial-gradient(circle, rgba(255,255,220,0.5), transparent);
}
/* Card content */

.rpl-08__card-num {
  font-family: 'Syne Mono';
  font-size: 0.72rem;
  opacity: 0.45;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
  position: relative;
  z-index: 2;
}

.rpl-08__card-icon {
  font-size: 2.2rem;
  margin-bottom: 14px;
  display: block;
  position: relative;
  z-index: 2;
  transition: transform 0.3s;
}

.rpl-08__card:hover .rpl-08__card-icon {
  transform: scale(1.15) rotate(-5deg);
}

.rpl-08__card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  z-index: 2;
  margin-bottom: 8px;
}

.rpl-08__card p {
  font-size: 0.88rem;
  line-height: 1.5;
  opacity: 0.65;
  font-weight: 400;
  position: relative;
  z-index: 2;
}

.rpl-08__card .rpl-08__arrow {
  position: relative;
  z-index: 2;
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s, transform 0.3s;
}

.rpl-08__card:hover .rpl-08__arrow {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 640px) {
  .rpl-08__grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rpl-08__card,
    .rpl-08__card::before,
    .rpl-08__card-icon,
    .rpl-08__arrow {
    transition: none !important;
  }
}
```

Techniques used in this demo

radial-gradient()MDN ↗grid-templateMDN ↗clamp()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →