Text Stroke and Animated Background Effects Demo

Design Drastic

Copy CSS

.title {
  font-family: 'Montserrat';
  font-weight: 900;
  font-size: 6rem;
  text-align: center;
  margin: 15px;
  display: inline-block;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #ddbdff;
  -webkit-text-fill-color: transparent;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
/* Effect 1: */
.title.e1 {
  transition: all .5s linear;
  background-image: linear-gradient(#ddbdff, #ddbdff);
  background-size: 0%;
}
/* From left */
.title.e1.left {
  background-position: left;
}
.title.e1:hover {
  background-size: 100%;
}

Copy CSS

.title {
  font-family: 'Montserrat';
  font-weight: 900;
  font-size: 6rem;
  text-align: center;
  margin: 15px;
  display: inline-block;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #ddbdff;
  -webkit-text-fill-color: transparent;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
/* Effect 1: */
.title.e1 {
  transition: all .5s linear;
  background-image: linear-gradient(#ddbdff, #ddbdff);
  background-size: 0%;
}
/* Angle */
.title.e1.angle {
  transition: all .75s;
  background-image: linear-gradient(125deg, #ddbdff, #ddbdff 50%, transparent 50%);
  background-size: 0% 100%;
}
.title.e1.angle:hover {
  background-size: 215% 100%;
}

Angle

From Right

Copy CSS

.title {
  font-family: 'Montserrat';
  font-weight: 900;
  font-size: 6rem;
  text-align: center;
  margin: 15px;
  display: inline-block;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #ddbdff;
  -webkit-text-fill-color: transparent;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
/* Effect 1: */
.title.e1 {
  transition: all .5s linear;
  background-image: linear-gradient(#ddbdff, #ddbdff);
  background-size: 0%;
}
/* From right */
.title.e1.right {
  background-position: right;
}
.title.e1:hover {
  background-size: 100%;
}

From Top

Copy CSS

.title {
  font-family: 'Montserrat';
  font-weight: 900;
  font-size: 6rem;
  text-align: center;
  margin: 15px;
  display: inline-block;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #ddbdff;
  -webkit-text-fill-color: transparent;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
/* Effect 2 */
.title.e2 {
  transition: all .5s linear;
  background-image: linear-gradient(#ddbdff, #ddbdff);
  background-size: 100% 0%;
}
/* From top */
.title.e2.top {
  background-position: top;
}
.title.e2:hover {
  background-size: 100% 100%;
}

From Bottom

Copy CSS

.title {
  font-family: 'Montserrat';
  font-weight: 900;
  font-size: 6rem;
  text-align: center;
  margin: 15px;
  display: inline-block;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #ddbdff;
  -webkit-text-fill-color: transparent;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
/* Effect 2 */
.title.e2 {
  transition: all .5s linear;
  background-image: linear-gradient(#ddbdff, #ddbdff);
  background-size: 100% 0%;
}
/* From bottom */
.title.e2.bottom {
  background-position: bottom;
}
.title.e2:hover {
  background-size: 100% 100%;
}

From Center

Copy CSS

.title {
  font-family: 'Montserrat';
  font-weight: 900;
  font-size: 6rem;
  text-align: center;
  margin: 15px;
  display: inline-block;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #ddbdff;
  -webkit-text-fill-color: transparent;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
/* Effect 3: From center */
.title.e3 {
  transition: all .5s linear;
  background-image: linear-gradient(#ddbdff, #ddbdff);
  background-size: 0%;
  background-position: center;
}
.title.e3:hover {
  background-size: 100%;
}

Design Drastic

Copy CSS

.title {
  font-family: 'Montserrat';
  font-weight: 900;
  font-size: 6rem;
  text-align: center;
  margin: 15px;
  display: inline-block;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #ddbdff;
  -webkit-text-fill-color: transparent;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
/* Effect 4: Gradient */
.title.e4 {
  transition: all .75s linear;
  background-image: linear-gradient(90deg,#ddbdff 75%, transparent);
  background-size: 150% 100%;
  background-position-x: 300%;
}
.title.e4:hover {
  background-position-x: 0%;
}

Copy CSS & JS

/* Direction aware hover */
.title.dir {
  background-image: linear-gradient(#ddbdff, #ddbdff);
  background-size: 0 0;
}
.title.dir[dd-dir="in-top"], .title.dir[dd-dir="in-bottom"]  {
  animation: in-top-bottom .75s;
  animation-fill-mode: forwards;
}
.title.dir[dd-dir="in-top"] {
  background-position: top;
}
.title.dir[dd-dir="in-bottom"] {
  background-position: bottom;
}
@keyframes  in-top-bottom {
  0% { background-size: 100% 0%; }
  100% { background-size: 100% 100%; }
}
.title.dir[dd-dir="in-left"], .title.dir[dd-dir="in-right"]  {
  animation: in-left-right .75s;
  animation-fill-mode: forwards;
}
.title.dir[dd-dir="in-left"] {
  background-position: left;
}
.title.dir[dd-dir="in-right"] {
  background-position: right;
}
@keyframes  in-left-right {
  0% { background-size: 0% 100%; }
  100% { background-size: 100% 100%; }
}
.title.dir[dd-dir="out-top"], .title.dir[dd-dir="out-bottom"] {
  animation: out-top-bottom 1s;
  animation-fill-mode: forwards;
}
.title.dir[dd-dir="out-top"] {
  background-position: top;
}
.title.dir[dd-dir="out-bottom"] {
  background-position: bottom;
}
@keyframes  out-top-bottom {
  0% {
    background-size: 100% 100%;
  }
  100% {
    background-size: 100% 0%;
  }
}
.title.dir[dd-dir="out-left"], .title.dir[dd-dir="out-right"] {
  animation: out-left-right 1s;
  animation-fill-mode: forwards;
}
.title.dir[dd-dir="out-left"] {
  background-position: left;
}
.title.dir[dd-dir="out-right"] {
  background-position: right;
}
@keyframes  out-left-right {
  0% {
    background-size: 100% 100%;
  }
  100% {
    background-size: 0% 100%;
  }
}

Javascript
// Direction aware hover effect
var dir_elems = document.querySelectorAll('[dd-dir]');
dir_elems.forEach(d => {
  // Handle mouse enter event
  d.addEventListener("mouseenter", mouseEnter);
  // Handle mouse leave event
  d.addEventListener("mouseleave", mouseLeave);
});
// Handle mouse(enter/leave) events
function mouseEvent(e, dir) {
  var el = e.target;
  var w = e.target.clientWidth;
  var h = e.target.clientHeight;
  var x = ( e.pageX - el.offsetLeft - ( w/2 )) * ( w > h ? ( h/w ) : 1 );
  var y = ( e.pageY - el.offsetTop - ( h/2 )) * ( h > w ? ( w/h ) : 1 );
  const d = { 0: 'top', 1: 'right', 2: 'bottom', 3: 'left' };
  var direction = Math.round( ( ( ( Math.atan2(y, x) * (180 / Math.PI) ) + 180 ) / 90 ) + 3 ) % 4;
  el.setAttribute('dd-dir', dir+'-'+d[direction]);
}
function mouseEnter(e) {
  mouseEvent(e, 'in');
}
function mouseLeave(e) {
  mouseEvent(e, 'out');
}

Directional

Design

Drastic

Multicolor

Copy CSS

.title {
  font-family: 'Montserrat';
  font-weight: 900;
  font-size: 6rem;
  text-align: center;
  margin: 15px;
  display: inline-block;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #ddbdff;
  -webkit-text-fill-color: transparent;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.title.e5 {
  transition: all .75s linear;
  background-position: left;
  background-size: 0% 100%;
  background-image: linear-gradient(90deg, #F77692 0%, #F77692 25%, PaleGreen 25%, PaleGreen 50%, #6a5acd 50%, #6a5acd 75%, #008b8b 75%, #008b8b 100%);
}
.title.e5:hover {
  background-size: 100% 100%;
}

Background Image

Copy CSS

.title {
  font-family: 'Montserrat';
  font-weight: 900;
  font-size: 6rem;
  text-align: center;
  margin: 15px;
  display: inline-block;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #ddbdff;
  -webkit-text-fill-color: transparent;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.title.e6 {
  background-image: url("../image-path...");
  transition: all .75s linear;
  background-position: left;
  background-size: 0% 100%;
}
.title.e6:hover {
  background-size: 100% 100%;
}