<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Chicle&display=swap" rel="stylesheet">

<div class="container">
  <div class="inner">
    <div class="row">
      <span>good</span> <span><span id="greet"></span>!</span>
    </div>
    <div class="row">
      <span>my</span> <span>name</span> <span>is</span>
    </div>
     <div class="row">
       <span>ben</span> <span>and</span> <span>i'm</span> <span>a</span>
    </div>
        <div class="row">
      <span>ui</span> <span>designer</span> <span>and</span>
    </div>
    <div class="row">
      <span>frontend</span> <span>developer</span>
    </div>
  </div>
</div>


<svg class="filters"><defs>
<filter id="outline">
        <feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="32"></feMorphology>
  
      <feFlood flood-color="var(--background)" flood-opacity="1" result="PINK"></feFlood>
        <feComposite in="PINK" in2="DILATED" operator="in" result="OUTLINE"></feComposite>

        <feMerge>
            <feMergeNode in="OUTLINE" />
            <feMergeNode in="SourceGraphic" />
        </feMerge>
    </filter>
  <filter id="outline_s">
        <feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="20"></feMorphology>
  
      <feFlood flood-color="var(--background)" flood-opacity="1" result="PINK"></feFlood>
        <feComposite in="PINK" in2="DILATED" operator="in" result="OUTLINE"></feComposite>

        <feMerge>
            <feMergeNode in="OUTLINE" />
            <feMergeNode in="SourceGraphic" />
        </feMerge>
    </filter>
   <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" result="blur"/>
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 60 -30" result="filter"/>
      <feComposite in="SourceGraphic" in2="filter" operator="atop"/>
    </filter>
  <filter id="goo_s">
      <feGaussianBlur in="SourceGraphic" stdDeviation="12" result="blur"></feGaussianBlur>
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 60 -40" result="filter"></feColorMatrix>
      <feComposite in="SourceGraphic" in2="filter" operator="atop"></feComposite>
    </filter>
  
  </defs>
  </svg>
:root {
  font-family: 'Chicle', cursive;
  font-size: clamp(50px, 12vw, 150px);
  
  --spacefill: linear-gradient(to bottom right, oklch(0.66 0.22 292.92), oklch(0.72 0.18 296.26), oklch(0.82 0.2 328.19), oklch(0.95 0.15 102.02), oklch(0.91 0.19 149.8), oklch(0.94 0.09 181.99), oklch(0.7 0.17 254.61));
  
  --bggradient: linear-gradient(to bottom right, oklch(0.72 0.18 296.26), oklch(0.82 0.2 328.19), oklch(0.95 0.15 102.02), oklch(0.91 0.19 149.8), oklch(0.94 0.09 181.99));
  
  --text: #292e33;
  --background: #FFF;
}

@supports(background-image: linear-gradient(to bottom in oklch, red, white)) {
  :root {
    --spacefill: linear-gradient(to bottom right in oklch, oklch(0.66 0.22 292.92), oklch(0.72 0.18 296.26), oklch(0.82 0.2 328.19), oklch(0.95 0.15 102.02), oklch(0.91 0.19 149.8), oklch(0.94 0.09 181.99), oklch(0.7 0.17 254.61));
  --bggradient: linear-gradient(to bottom right in oklch, oklch(0.72 0.18 296.26), oklch(0.82 0.2 328.19), oklch(0.95 0.15 102.02), oklch(0.91 0.19 149.8), oklch(0.94 0.09 181.99));
  }
}

html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
body {
  padding: 0;
  margin: 0;
  background: var(--background);
  display: grid;
  width: 100%;
  height: 100%;
  place-content: center;
}

.container {
  background: var(--spacefill);
  padding: 10px;
  position: relative;
  letter-spacing: -2px;
  overflow: hidden;
  flex: 1;
  line-height: 0.97;
}

.container:before {
  content : "";
  position: absolute;
  inset: -15px;
  border: 30px solid var(--background);
  z-index: 2;
  border-radius: 40px;
  pointer-events: none;
}

.container:after {
   content: "";
  position: absolute;
  inset: -100%;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  mix-blend-mode: normal; 
}

.inner {
  position: relative;
  z-index:1;
  filter:  url(#goo) ;
 height: 100%;
  padding: 5px;
}

.inner:after {
  content : "";
  position:absolute;
  pointer-events: none;
  inset: -20px -30px -25px -30px;
  border: 25px solid var(--background);
}

.row {
  display: flex;
  justify-content: space-between;
  color: var(--text);
  gap: 1em;
  filter: url(#outline);
}


@media (max-width:1000px) {
  .container {
    line-height: 14vw;
    width: calc(100% - 40px);
  }
  .inner {
    filter: url(#goo_s);
  }
  .row {
   filter: url(#outline_s); 
  }
}

.filters {
  visibility: hidden;
  position: absolute;
  top: 0;left: 0;
  pointer-events:none;
}
var d = new Date();

if (d.getHours() >= 11) {
  document.getElementById("greet").innerText = "afternoon";
} else if (d.getHours() >= 17) {
  document.getElementById("greet").innerText = "evening";
} else {
   document.getElementById("greet").innerText = "morning";
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.