CSS SHAPES & ANIMATION PLAYGROUND

Modern CSS, actually working.

Every demo below is real, running CSS — pick a color and build a shape three different ways in the customizer, and copy the exact code for anything on this page.

Customize it yourself

11 presets, 4 independent corner-radius sliders, or drag actual points on a polygon to build a shape that doesn't exist anywhere else — then add an animation and copy the exact CSS for what's on screen.

Color

Shape mode

Shape (11 presets)

Animation (6 functions)

CSS
.my-shape {
  width: 220px;
  height: 220px;
  background: #3b82f6;
  border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%;
  transition: border-radius 0.4s ease, clip-path 0.4s ease;
}

Shape & motion gallery

Morphing blob

Four border-radius keyframes, each corner a different percentage.

CSS
.blob {
  border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%;
  animation: blobMorph 6s ease-in-out infinite;
}
@keyframes blobMorph {
  0%, 100% { border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%; }
  25%      { border-radius: 65% 35% 40% 60% / 55% 60% 40% 45%; }
  50%      { border-radius: 35% 65% 55% 45% / 40% 55% 45% 60%; }
  75%      { border-radius: 58% 42% 45% 55% / 60% 40% 60% 40%; }
}

Clip-path polygon

Animating clip-path between two point sets — the browser tweens every vertex.

CSS
.clip-morph {
  animation: clipMorph 4s ease-in-out infinite alternate;
}
@keyframes clipMorph {
  0%   { clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); }
  100% { clip-path: polygon(50% 15%, 85% 0%, 100% 70%, 60% 100%, 10% 85%); }
}

Conic-gradient ring

conic-gradient() fading to transparent, rotated with a plain CSS animation.

CSS
.conic-ring {
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--accent), transparent 70%);
  animation: ringSpin 3s linear infinite;
}
@keyframes ringSpin {
  to { transform: rotate(360deg); }
}
Hover
👋

3D flip card

perspective + rotateY on hover — real 3D, not a fade crossover.

CSS
.flip-card { perspective: 800px; }
.flip-card-inner {
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card-face { backface-visibility: hidden; }
.flip-card-back { transform: rotateY(180deg); }

Border functions

6 real border techniques — gradient sweep, conic spin, marching ants, dashed rotate, double ring, and glow pulse — each with its own color, width, speed, and easing (including a custom cubic-bezier curve).

Technique (6 functions)

Color

Easing

CSS
.gradient-border {
  border: 3px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(#0b0f19, #0b0f19) padding-box,
    linear-gradient(90deg, #3b82f6, transparent, #3b82f6) border-box;
  background-size: 300% 100%, 300% 100%;
  animation: gradientSweep 3s linear infinite;
}
@keyframes gradientSweep {
  to { background-position: 300% 0, 300% 0; }
}

CTA button animations

Shine sweep

A gradient pseudo-element slides across on hover — try it.

CSS
.shine-btn {
  position: relative;
  overflow: hidden;
}
.shine-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}
.shine-btn:hover::before {
  transform: translateX(100%);
}

Ripple pulse

A box-shadow ring expands and fades on a continuous loop.

CSS
.ripple-btn {
  position: relative;
}
.ripple-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 var(--accent);
  animation: ripple 1.8s ease-out infinite;
}
@keyframes ripple {
  to { box-shadow: 0 0 0 14px transparent; }
}

Lift on hover

translateY plus a matching shadow — the classic tactile lift.

CSS
.lift-btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lift-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -6px var(--accent);
}

Outline halo

A ::before border scales in from outside and settles into place on hover.

CSS
.outline-btn {
  position: relative;
}
.outline-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--accent);
  transform: scale(1.18);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.outline-btn:hover::before {
  transform: scale(1.08);
  opacity: 1;
}

Icon slide

A nested arrow span slides on hover — no JS, just a scoped child transition.

CSS
.icon-slide-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.icon-slide-btn .arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}
.icon-slide-btn:hover .arrow {
  transform: translateX(6px);
}

Tactile press

A hard drop-shadow 'ledge' that compresses on :active — color-mix() for the shadow tone.

CSS
.press-btn {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 0 0 color-mix(in srgb, var(--accent) 60%, black);
}
.press-btn:hover {
  transform: translateY(-2px);
}
.press-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 0 color-mix(in srgb, var(--accent) 60%, black);
}

Box-shadow functions

Glow pulse, depth lift, neon layering, and inset press — with color, blur, and spread control.

Technique (4 functions)

Color

CSS
.glow-box {
  background: #3b82f6;
  animation: glowPulse 2.4s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 12px 0 #3b82f6; }
  50%      { box-shadow: 0 0 24px 4px #3b82f6; }
}

Sample project by Adesh Shukla — every effect above is live CSS, copyable from this page.

← devstash.me/lab