Effects & Animations - WebDevTales

45 Effects & Animations

Modern, responsive Effects & Animations for sleek UI design

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="container">
    <div class="depth">3D DEPTH</div>
</div>

body {
  background: rgb(241, 239, 239);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  visibility: hidden;
}
.container {
  visibility: visible;
}
.depth {
  font-size: 2.5rem;
  font-weight: bold;
  color: rgb(126, 125, 125);
  text-shadow: 5px 5px 10px rgba(255, 0, 255, 0.6);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="container">
  <div class="glitch">GLITCH</div>
</div>

body {
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  visibility: hidden;
}
.container {
  visibility: visible;
}
@keyframes glitch {
  0% { text-shadow: 4px 0 red, -4px 0 cyan; }
  50% { text-shadow: -4px 0 red, 4px 0 cyan; }
  100% { text-shadow: 4px 0 red, -4px 0 cyan; }
}
.glitch {
  font-size: 3rem;
  color: white;
  font-weight: bold;
  animation: glitch 0.2s infinite;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="container">
  <div class="neon">NEON</div>
</div>

body {
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  visibility: hidden;
}
.container {
  visibility: visible;
}
.neon {
  font-size: 4rem;
  color: #0ff;
  text-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 20px #0ff, 0 0 40px cyan;
  font-weight: bold;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="container">
  <div class="typewriter">TYPEWRITER EFFECT ,</div>
</div>

body {
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  visibility: hidden;
}
.container {
  visibility: visible;
}
.typewriter {
  font-size: 2rem;
  color: #fff;
  font-family: monospace;
  border-right: 2px solid white;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  animation: typing 3s steps(20, end) infinite, blink 0.7s infinite;
}
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}
@keyframes blink {
  50% { border-color: transparent; }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="container">
  <div class="wave">
      <span>W</span><span>A</span><span>V</span><span>E</span>
  </div>
</div>

body {
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  visibility: hidden;
}
.container {
  visibility: visible;
}
.wave {
  font-size: 3rem;
  font-weight: bold;
  color: cyan;
  display: inline-block;
}
.wave span {
  display: inline-block;
  animation: wave 1.5s infinite;
}
@keyframes wave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.wave span:nth-child(1) { animation-delay: 0s; }
.wave span:nth-child(2) { animation-delay: 0.1s; }
.wave span:nth-child(3) { animation-delay: 0.2s; }
.wave span:nth-child(4) { animation-delay: 0.3s; }
.wave span:nth-child(5) { animation-delay: 0.4s; }

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="container">
  <div class="shadow">SHADOW MOVE</div>
</div>

body {
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  visibility: hidden;
}
.container {
  visibility: visible;
}
.shadow {
  font-size: 2.5rem;
  font-weight: bold;
  color: white;
  text-shadow: 4px 4px 0px red, -4px -4px 0px cyan;
  animation: shadow-move 1s infinite alternate;
}
@keyframes shadow-move {
  from { text-shadow: 4px 4px 0px red, -4px -4px 0px cyan; }
  to { text-shadow: -4px -4px 0px red, 4px 4px 0px cyan; }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="gradient">GRADIENT</div>

body {
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.gradient {
  font-size: 3rem;
  font-weight: bold;
  text-transform: uppercase;
  background: linear-gradient(45deg, #ff0000, #ff7300, #ffeb00, #47ff00, #00ff88, #00d9ff, #0044ff, #7700ff, #ff00d4);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: moveGradient 3s infinite linear;
}

@keyframes moveGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="container">
  <div class="floating">FLOATING</div>
</div>

body {
  background: rgb(241, 236, 236);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  visibility: hidden;
}
.container {
  visibility: visible;
}
.floating {
  font-size: 3rem;
  font-weight: bold;
  color: rgb(0, 0, 0);
  animation: float 2s infinite ease-in-out;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="container">
  <div class="zoom">ZOOM</div>
</div>

body {
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  visibility: hidden;
}
.container {
  visibility: visible;
}
.zoom {
  font-size: 3rem;
  font-weight: bold;
  color: orange;
  animation: zoom 1.5s infinite alternate;
}
@keyframes zoom {
  from { transform: scale(1); }
  to { transform: scale(1.3); }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="container">
  <div class="rotate">ROTATING</div>
</div>

body {
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  visibility: hidden;
}
.container {
  visibility: visible;
}
.rotate {
  font-size: 2rem;
  font-weight: bold;
  color: gold;
  animation: rotate 2s infinite linear;
}
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="container">
  <div class="flicker">FLICKERING</div>
</div>

body {
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  visibility: hidden;
}
.container {
  visibility: visible;
}
.flicker {
  font-size: 2rem;
  color: cyan;
  text-shadow: 0 0 5px cyan, 0 0 10px cyan, 0 0 20px cyan;
  animation: flicker 1.5s infinite alternate;
}
@keyframes flicker {
  0% { opacity: 1; }
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="container">
  <div class="bounce">BOUNCING</div>
</div>

body {
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  visibility: hidden;
}
.container {
  visibility: visible;
}
.bounce {
  font-size: 2rem;
  color: yellow;
  animation: bounce 1.2s infinite ease-in-out;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="container">
  <div class="swing">SWINGING</div>
</div>

body {
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  visibility: hidden;
}
.container {
  visibility: visible;
}
.swing {
  font-size: 2rem;
  color: red;
  display: inline-block;
  animation: swing 1.5s infinite ease-in-out;
}
@keyframes swing {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(10deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-10deg); }
  100% { transform: rotate(0deg); }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="container">
  <div class="shake">SHAKING</div>
</div>

body {
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  visibility: hidden;
}
.container {
  visibility: visible;
}
.shake {
  font-size: 2rem;
  color: orange;
  display: inline-block;
  animation: shake 0.5s infinite linear;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="container">
  <div class="elastic">ELASTIC</div>
</div>

body {
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  visibility: hidden;
}
.container {
  visibility: visible;
}
.elastic {
  font-size: 2rem;
  color: #00ffcc;
  display: inline-block;
  font-weight: bold;
  animation: elastic 1.5s infinite ease-in-out;
}
@keyframes elastic {
  0% { transform: scaleX(1); }
  30% { transform: scaleX(1.3); }
  50% { transform: scaleX(0.8); }
  70% { transform: scaleX(1.2); }
  100% { transform: scaleX(1); }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="container">
  <button class="btn">Hover Me</button>
</div>

body {
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  visibility: hidden;
}
.container {
  visibility: visible;
}
.btn {
  font-size: 1.5rem;
  padding: 10px 20px;
  background: #ff004c;
  color: white;
  border: none;
  outline: none;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.btn:hover {
  transform: scaleX(1.4);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="container">
  <div class="box"></div>
</div>

body {
  background: rgb(29, 29, 29);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  visibility: hidden;
}
.container {
  visibility: visible;
}
.box {
  width: 150px;
  height: 250px;
  border-radius: 5px;
  border: 4px solid cyan;
  background: #141313;
  animation: blink 1s infinite alternate;
}
@keyframes blink {
  0% { 
      border: 4px solid cyan;    
  }
  100% { border: 6px double #000000; }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="container">
  <div class="wavy-text">WAVY UNDERLINE</div>
</div>

body {
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  visibility: hidden;
}
.container {
  visibility: visible;
}
.wavy-text {
  font-size: 2rem;
  color: white;
  position: relative;
}
.wavy-text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 2px;
  background: cyan;
  animation: wave 1.5s infinite linear;
}
@keyframes wave {
  0% { transform: scaleX(1); }
  50% { transform: scaleX(0.5); }
  100% { transform: scaleX(1); }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="container">
  <div class="pulse-text">PULSATING</div>
</div>

body {
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  visibility: hidden;
}
.container {
  visibility: visible;
}
.pulse-text {
  font-size: 2rem;
  color: #f43676;
  font-weight: bold;
  animation: pulse 1.5s infinite ease-in-out;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="container">
  <div class="glow-box"></div>
</div>

body {
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  visibility: hidden;
}
.container {
  visibility: visible;
}
.glow-box {
  width: 200px;
  height: 200px;
  background: transparent;
  border: 4px solid cyan;
  box-shadow: 0 0 10px cyan;
  animation: glow 2s infinite alternate ease-in-out;
}
@keyframes glow {
  0% { box-shadow: 0 0 10px cyan; }
  100% { box-shadow: 0 0 30px cyan; }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="container">
  <div class="rotate-box"></div>
</div>

body {
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  visibility: hidden;
}
.container {
  visibility: visible;
}
.rotate-box {
  width: 150px;
  height: 150px;
  border: 4px solid rgb(255, 140, 0);
  border-radius: 25%;
  animation: rotate-border 2s infinite linear;
}
@keyframes rotate-border {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<h1 id='soft-glow'  id="boomdevs_46" >Soft Glow</h1>

body {
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

h1 {
  font-size: 2.5rem;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
  font-family: Arial, sans-serif;
  text-align: center;
  animation: softGlow 2s infinite alternate ease-in-out;
}

/* Soft Glow Animation */
@keyframes softGlow {
  0% {
      text-shadow: 0 0 5px rgba(255, 255, 255, 0.5),
                   0 0 10px rgba(255, 255, 255, 0.4),
                   0 0 15px rgba(255, 255, 255, 0.3);
  }
  100% {
      text-shadow: 0 0 10px rgba(255, 255, 255, 0.8),
                   0 0 20px rgba(255, 255, 255, 0.6),
                   0 0 30px rgba(255, 255, 255, 0.5);
  }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="fire-container">
  <div class="letter" data-letter="F"></div>
  <div class="letter" data-letter="I"></div>
  <div class="letter" data-letter="R"></div>
  <div class="letter" data-letter="E"></div>
</div>

body {
  background: #251c27;
  color: #fff;
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.fire-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.letter {
  font-size: 10vmin;
  font-weight: bold;
  color: #ff8c42;
  position: relative;
  text-align: center;
  width: 10vmin;
  height: 10vmin;
  display: flex;
  justify-content: center;
  align-items: center;
}

.letter::before {
  content: attr(data-letter);
  position: absolute;
  z-index: 2;
}

.letter::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: inherit;
  z-index: 1;
  animation: burn 4s infinite;
}

@keyframes burn {
  0%, 100% { border-radius: 5% 87% 45% 85%; width: 10vmin; }
  10% { border-radius: 5% 85% 49% 82%; }
  20% { border-radius: 0% 85% 45% 87%; width: 11vmin; }
  30%, 90% { border-radius: 5% 85% 49% 82%; }
  40% { border-radius: 0% 85% 45% 87%; width: 12vmin; }
  50% { border-radius: 2% 87% 42% 90%; }
  60% { border-radius: 5% 97% 45% 88%; }
  70% { border-radius: 2% 87% 42% 90%; width: 11vmin; }
  80% { border-radius: 5% 97% 45% 88%; }
}

#animation:checked ~ .fire-container .letter::after {
  animation: burn 4s infinite;
}

.letter::after {
  background:
    radial-gradient(100% 100% at 90% 90%, #251c27, #251c2733 20%, #251c2700 50%),
    radial-gradient(farthest-side at 110% 120%, #251c27, #631, #cb6c3b88, #0000),
    radial-gradient(at 100% 100%, #fc08, #cb6c3b, #eebd7600 60%),
    linear-gradient(135deg, #fff0 20%, #ff0);
  background-color: #ffe;
  border-radius: 2% 87% 45% 85%;
  box-shadow:
    inset 2vmin 2vmin 2vmin -1.5vmin #f808,
    inset -1vmin -1vmin 5vmin -3vmin #00f7,
    inset 0vmin -1vmin 5vmin -3vmin #00f8,
    inset -1vmin -1vmin 2vmin -2vmin #251c27,
    inset -1vmin -1vmin 3vmin -1vmin #251c27,
    inset -1vmin -1vmin 2vmin #fc08,
    -0.5vmin -0.5vmin 1vmin #ff08,
    -1vmin -1vmin 2vmin #ce8c47,
    -2vmin -2vmin 10vmin 1vmin #251c27,
    -6vmin -6vmin 35vmin 3vmin #fa06;
  filter: blur(0.1vmin);
  transform: rotate(45deg);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="light"></div>

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle, #000428, #004e92);
  overflow: hidden;
}

/* Radiating light effect */
.light {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
  box-shadow: 0 0 50px 20px rgba(255, 255, 255, 0.5);
  animation: radiate 3s infinite ease-in-out;
}

/* Animation for radiating light */
@keyframes radiate {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Glow effect around the light */
.light::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
  box-shadow: 0 0 100px 50px rgba(255, 255, 255, 0.3);
  animation: glow 3s infinite ease-in-out;
}

/* Animation for the glow effect */
@keyframes glow {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="text-container">
  <div class="letter">F</div>
  <div class="letter">I</div>
  <div class="letter">R</div>
  <div class="letter">E</div>
</div>

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle, #000428, #004e92);
  overflow: hidden;
  font-family: 'Arial', sans-serif;
}

/* Container for the text */
.text-container {
  display: flex;
  gap: 20px;
}

/* Styling for each letter */
.letter {
  font-size: 80px;
  font-weight: bold;
  color: #ff8c42;
  position: relative;
  text-shadow: 0 0 10px #ff8c42, 0 0 20px #ff8c42, 0 0 30px #ff8c42, 0 0 40px #ff8c42;
  animation: radiate 2s infinite ease-in-out;
}

/* Delay animations for each letter */
.letter:nth-child(1) { animation-delay: 0s; }
.letter:nth-child(2) { animation-delay: 0.2s; }
.letter:nth-child(3) { animation-delay: 0.4s; }
.letter:nth-child(4) { animation-delay: 0.6s; }

/* Radiating light animation */
@keyframes radiate {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
    text-shadow: 0 0 10px #ff8c42, 0 0 20px #ff8c42, 0 0 30px #ff8c42, 0 0 40px #ff8c42;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
    text-shadow: 0 0 20px #ff8c42, 0 0 40px #ff8c42, 0 0 60px #ff8c42, 0 0 80px #ff8c42;
  }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="radiating-text">
  RADIANCE
  <div class="light-rays"></div>
</div>

body {
  background: #0a0f1e;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
  overflow: hidden;
}

/* Radiating Light Effect */
.radiating-text {
  font-size: 3rem;
  font-weight: bold;
  color: #00eaff;
  text-transform: uppercase;
  position: relative;
  letter-spacing: 5px;
  text-shadow: 
      0 0 20px #00eaff, 
      0 0 40px #00eaff, 
      0 0 80px #00eaff;
  animation: glowPulse 1.5s infinite alternate ease-in-out;
}

/* Radiating Glow Effect */
.radiating-text::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250%;
  height: 250%;
  background: radial-gradient(circle, rgba(0, 234, 255, 0.5), rgba(0, 234, 255, 0) 60%);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  animation: radiate 1.5s infinite alternate ease-in-out;
  opacity: 0.7;
  filter: blur(10px);
}

/* Glowing Light Rays */
.light-rays {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(0, 255, 255, 0.8), rgba(0, 255, 255, 0) 70%);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow: 
      0 0 30px 10px #00ffff,
      0 0 50px 20px rgba(0, 255, 255, 0.7),
      0 0 100px 40px rgba(0, 255, 255, 0.5);
  animation: lightBurst 3s infinite linear;
}

/* Glowing Pulse Effect */
@keyframes glowPulse {
  0% { text-shadow: 0 0 20px #00eaff, 0 0 40px #00eaff, 0 0 80px #00eaff; }
  100% { text-shadow: 0 0 30px #00ffff, 0 0 60px #00ffff, 0 0 120px #00ffff; }
}

/* Expanding Radiance Effect */
@keyframes radiate {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0.3; }
}

/* Rotating Light Burst */
@keyframes lightBurst {
  0%,100% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  50% { transform: translate(-50%, -50%) rotate(360deg) scale(1.1); }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="laser"></div>

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  overflow: hidden;
}

/* Laser beam container */
.laser {
  position: relative;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #ff0080, #ff8c00, #ff0080);
  box-shadow: 0 0 10px #ff0080, 0 0 20px #ff0080, 0 0 30px #ff0080, 0 0 40px #ff0080;
  animation: shoot 2s infinite linear;
}

/* Laser beam animation */
@keyframes shoot {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Glowing trail effect */
.laser::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 0, 128, 0.2), rgba(255, 140, 0, 0.2), rgba(255, 0, 128, 0.2));
  filter: blur(10px);
  animation: trail 2s infinite linear;
}

/* Trail animation */
@keyframes trail {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="text-container">
  LASER
  <!-- Laser beams -->
  <div class="laser laser-1"></div>
  <div class="laser laser-2"></div>
  <div class="laser laser-3"></div>
  <div class="laser laser-4"></div>
  <div class="laser laser-5"></div>
</div>

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  overflow: hidden;
  font-family: 'Arial', sans-serif;
}

/* Container for the text */
.text-container {
  position: relative;
  font-size: 100px;
  font-weight: bold;
  color: transparent; /* Hide the original text color */
  background: linear-gradient(to right, #ff0080, #ff8c00, #ff0080);
  -webkit-background-clip: text; /* Clip background to text */
  background-clip: text;
}

/* Laser beams */
.laser {
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #ff0080, #ff8c00, #ff0080);
  box-shadow: 0 0 10px #ff0080, 0 0 20px #ff0080, 0 0 30px #ff0080, 0 0 40px #ff0080;
  animation: shoot 2s infinite linear;
}

/* Laser beam animation */
@keyframes shoot {
  0% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(200%);
  }
}

/* Position lasers on each letter */
.laser-1 { top: 10%; animation-delay: 0s; }
.laser-2 { top: 30%; animation-delay: 0.5s; }
.laser-3 { top: 50%; animation-delay: 1s; }
.laser-4 { top: 70%; animation-delay: 1.5s; }
.laser-5 { top: 90%; animation-delay: 2s; }

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="laser-text">LASER BEAM</div>

body {
  background: #0a0a0a;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  color: white;
  font-family: Arial, sans-serif;
}

.laser-text {
  font-size: 3rem;
  font-weight: bold;
  text-transform: uppercase;
  color: rgba(255, 0, 0, 0.8);
  text-shadow: 0 0 5px rgba(255, 0, 0, 0.6),
               0 0 10px rgba(255, 0, 0, 0.8),
               0 0 20px rgba(255, 0, 0, 1);
  position: relative;
  overflow: hidden;
}

.laser-text::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 0, 0.9), transparent);
  filter: blur(2px);
  animation: laser-move 2s linear infinite;
}

.laser-text::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 3px;
  background: red;
  box-shadow: 0 0 10px red, 0 0 20px red;
  animation: laser-glow 1s ease-in-out infinite alternate;
}

@keyframes laser-move {
  0% { left: -100%; }
  100% { left: 100%; }
}

@keyframes laser-glow {
  0% { opacity: 0.5; transform: scaleX(1); }
  100% { opacity: 1; transform: scaleX(1.2); }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="cyberpunk-text">CYBERPUNK</div>

body {
  background: #03010a;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  font-family: 'Arial', sans-serif;
}

.cyberpunk-text {
  font-size: 2rem;
  font-weight: bold;
  text-transform: uppercase;
  color: #ff0099;
  border: 2px solid #ddd;
  border-radius: 5px;
  padding: 5px;
  text-shadow: 0 0 5px #ef114c, 
               0 0 10px #ff0099, 
               0 0 20px #ff0099, 
               0 0 40px cyan, 
               0 0 80px cyan, 
               0 0 120px purple;
  animation: cyber-glow 1.5s infinite alternate;
}

@keyframes cyber-glow {
  0% {
      text-shadow: 0 0 5px #ff0099, 
                   0 0 10px #ff0099, 
                   0 0 20px #ff0099, 
                   0 0 40px cyan, 
                   0 0 80px cyan, 
                   0 0 120px purple;
  }
  100% {
      text-shadow: 0 0 10px #ff0099, 
                   0 0 20px #ff0099, 
                   0 0 30px #ff0099, 
                   0 0 50px cyan, 
                   0 0 100px cyan, 
                   0 0 150px purple;
  }
}

<!-- No JS code needed for this element -->

45 Effects & Animations

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code