CSSだけで水滴が垂れるように動くアニメーション表現｜しずくが落ちるリアルな演出

10月 21, 2025 10月 21, 2025

小瀧

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

Webサイトを見ていて、「自然のような動き」を感じたことはありませんか？
炎、風、波、水滴…こうした自然の要素を表現するアニメーションは、サイト全体の雰囲気を豊かにし、印象に残るデザインを作り出します。

その中でも今回は、「CSSだけで作る“水滴が垂れるような動き”」を紹介します。
JavaScriptも画像も一切使わず、CSSのアニメーションとグラデーションだけで表現できるテクニックです。

まるでガラスの上をポタリと落ちるような動きで、
透明感のある表現や夏の清涼感、化粧品・飲料ブランドなどのビジュアルにもぴったり。

それでは、シンプルなコードから見ていきましょう。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

基本のHTML構造

水滴となる要素を1つ配置するだけのシンプルな構造です。

 <div class="drop"></div>

CSSで水滴の形と動きを作る

まずはCSSで「しずく」の形と、下に落ちるようなアニメーションを定義します。
ここでは、border-radiusとlinear-gradientを組み合わせて光を受けたような透明感を作ります。

  body {
    background: radial-gradient(circle at center, #e3f2fd 0%, #90caf9 100%);
    height: 100vh;
    overflow: hidden;
  }
  .drop {
    position: absolute;
    top: -100px;
    left: 50%;
    width: 30px;
    height: 40px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(173, 216, 230, 0.6));
    border-radius: 50% 50% 60% 60% / 70% 70% 30% 30%;
    animation: fall 3s ease-in infinite;
    transform: translateX(-50%);
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.6);
  }
  @keyframes fall {
    0% {
      top: -100px;
      opacity: 0;
      transform: translateX(-50%) scale(0.8);
    }
    30% {
      opacity: 1;
    }
    70% {
      top: 70vh;
      opacity: 1;
      transform: translateX(-50%) scale(1.1);
    }
    100% {
      top: 100vh;
      opacity: 0;
      transform: translateX(-50%) scale(0.9);
    }
  }

このアニメーションでは、水滴が上から下へゆっくりと落ちていき、
地面付近で消えるように設定しています。