<svg xmlns="http://www.w3.org/2000/svg" viewBox="100 100 900 400">
    <filter id="filter" filterUnits="userSpaceOnUse" height="500" width="900" y="0" x="0" style="color-interpolation-filters:sRGB">
      <feTurbulence type="fractalNoise" seed="462" baseFrequency="0.011" numOctaves="5" result="noise1" />
      <feTurbulence type="fractalNoise" seed="462" baseFrequency="0.011" numOctaves="2" result="noise2" />
      <feGaussianBlur in="SourceGraphic" stdDeviation="20" />
      <feDisplacementMap in="blur1" scale="100" in2="noise1" result="cloud1" />
      <feFlood flood-color="rgb(215,215,215)" flood-opacity="0.3" />
      <feComposite operator="in" in2="SourceGraphic" />
      <feOffset dx="-10" dy="-3" />
      <feMorphology radius="20" />
      <feGaussianBlur stdDeviation="20" />
      <feDisplacementMap scale="100" in2="noise1" result="cloud2" />
      <feFlood flood-color="rgb(66,105,146)" flood-opacity="0.2" />
      <feComposite operator="in" in2="SourceGraphic" />
      <feOffset dx="-10" dy="40" />
      <feMorphology radius="0 40" />
      <feGaussianBlur stdDeviation="20" />
      <feDisplacementMap scale="80" in2="noise2" result="cloud3" />
      <feFlood flood-color="rgb(0,0,0)" flood-opacity="0.4" />
      <feComposite operator="in" in2="SourceGraphic" />
      <feOffset dx="20" dy="60" />
      <feMorphology radius="0 65" />
      <feGaussianBlur stdDeviation="20" />
      <feDisplacementMap scale="50" in2="noise2" result="cloud4" />
      <feMerge>
        <feMergeNode in="cloud1" id="feMergeNode954" />
        <feMergeNode in="cloud2" id="feMergeNode956" />
        <feMergeNode in="cloud3" id="feMergeNode958" />
        <feMergeNode in="cloud4" id="feMergeNode960" />
      </feMerge>
    </filter>
    <ellipse cx="500" cy="290" rx="340" ry="90" class="cloud" />
</svg>
body {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(0deg, #62a0d8 0%, #2178d1 50%, #085cb3 100%);
  overflow: hidden;
}
svg {
  bottom: 0px;
  width: 900px;
  height: 400px;
  position: absolute;
}
.cloud {
  fill: #fff;
  opacity: 0.9;
  filter: url(#filter);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.