CSS Only GOOEY Text effect.

In this example below you will see how to do a CSS Only GOOEY Text effect. with some HTML / CSS and Javascript

Yeah, why ? Just because.

Thumbnail
This awesome code was written by LukyVj, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright LukyVj ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS Only GOOEY Text effect.</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="gooey">
  <h1>Hello world</h1>
  <h1>Hello world</h1>
  <h1>Hello world</h1>
  <h1>Hello world</h1>
  <h1>Hello world</h1>
  <h1>Hello world</h1>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/LukyVj/css-only-gooey-text-effect-ogaZOW */
:root {
  font-size: 12px;
}

* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

body {
  -webkit-filter: contrast(100);
          filter: contrast(100);
  background: #000;
}

.gooey {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 3em;
  padding: 1.6em;
  background: #000;
  color: #FFF;
  width: 80%;
  text-align: center;
  overflow: hidden;
  -webkit-filter: blur(3px);
          filter: blur(3px);
}
.gooey h1 {
  font-weight: 400;
  transition: letter-spacing 1s ease;
  will-change: letter-spacing;
  margin: 0;
  padding: 0;
  line-height: 1;
}
.gooey h1:nth-child(1) {
  letter-spacing: -32px;
}
.gooey h1:nth-child(2) {
  letter-spacing: -24px;
}
.gooey h1:nth-child(3) {
  letter-spacing: -12px;
}
.gooey h1:nth-child(4) {
  letter-spacing: -6px;
}
.gooey h1:nth-child(5) {
  letter-spacing: 6px;
}
.gooey h1:nth-child(6) {
  letter-spacing: 12px;
}
.gooey:hover h1:nth-child(1) {
  letter-spacing: 12px;
}
.gooey:hover h1:nth-child(2) {
  letter-spacing: 6px;
}
.gooey:hover h1:nth-child(3) {
  letter-spacing: 0px;
}
.gooey:hover h1:nth-child(4) {
  letter-spacing: -12px;
}
.gooey:hover h1:nth-child(5) {
  letter-spacing: -24px;
}
.gooey:hover h1:nth-child(6) {
  letter-spacing: -32px;
}

Comments