@import url(https://fonts.googleapis.com/css?family=Akronim);

h1 {
  color: rgb(255, 115, 0);
  font-size: 100px;
  text-transform: uppercase;
  font-family: 'Akronim';
  text-align: center;
  text-shadow: 0 3px 20px red, 0 0 20px red, 0 0 10px orange, 4px -5px 6px yellow, -4px -10px 10px yellow, 0 -10px 30px yellow;
}

<div class="animated">
  <div class="let">A</div>
  <div class="let">n</div>
  <div class="let">i</div>
  <div class="let">m</div>
  <div class="let">a</div>
  <div class="let">t</div>
  <div class="let">e</div>
  <div class="let">d</div>
</div>

body{ background-color: #000; }

.animated{
  display: flex;
  margin-top: 20%;
  align-items: center;
  justify-content: center;
}
.let{
  color: #fff;
  font-size: 70px;
  font-family: cursive;
  letter-spacing: 3px;
  font-weight: 600;
  transition: 0.5s;
  cursor: pointer;
}
.let:hover{
  transform: translateY(-1rem);
  background: -webkit-linear-gradient(120deg, hsl(190, 100%, 50%), hsl(319, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@font-face {
  font-family: 'Rocher';
  src: url(https://assets.codepen.io/9632/RocherColorGX.woff2);
}

body {
  font-family: 'Rocher';
  text-align: center;
  font-size: 50px;
}

@font-palette-values --Purples {
  font-family: Rocher;
  base-palette: 6;
}
h1 {
  font-palette: --Purples;
}

<input type="text" id="input"> 
  <button onclick="copytext()" type="button">Скопировать</button>

 body {
  text-align: center;
  margin-top: 10%;
  background-color: #000;
}
 input, button {
  padding: .4em;
  width: 200px;
  font-size: 20px;
  border: none;
  outline: none;
  border-bottom: .2em solid #E91E63;
  background: rgba(#E91E63, .2);
  color: #E91E63;
}

 function copytext() {
  const copyText = 
  document.getElementById('input'); 
  const copy = copyText.value;
  navigator.clipboard.writeText(copy).then(
  function () { 
  console.log('Успешно'); 
  }).catch(function (err) { 
  console.log('Something went wrong', err);
  });
  
  alert("Copied the text: " + copyText.value);
} 

<textarea></textarea>
<button>Speak</button>

button {
  width: 85px;
  background-color: blue;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}
textarea, button {
  border: 1.5px solid #000;
  border-radius: 5px;
  outline: none;
  padding: 8px;
  display: block;
  margin: 0 auto;
  margin-top: 15px;
}

const button = document.querySelector('button');
const text = document.querySelector('textarea');

button.addEventListener('click', () => {
  const utterance = new SpeechSynthesisUtterance(text.value);
  speechSynthesis.speak(utterance);
});

@font-face {
  src: url("https://www.axis-praxis.org/fonts/webfonts/MetaVariableDemo-Set.woff2")
  format("woff2");
  font-family: "Meta";
}
body {
  background-color: #8357eb;
}
h1 {
  transition: all 0.8s;
  -webkit-text-stroke: 4px #d6f4f4;
  font-variation-settings: "wght" 900, "ital" 1;
  font-size: 15rem;
  text-align: center;
  color: transparent;
  font-family: "Meta", sans-serif;
  text-shadow: 10px 10px 0px #07bccc, 15px 15px 0px #e601c0, 20px 20px 0px #e9019a, 25px 25px 0px #f40468, 45px 45px 10px #482896;
  cursor: pointer;
}
h1:hover {
  font-variation-settings: "wght" 100, "ital" 0;
  text-shadow: none;
}

<svg viewbox="0 0 999 999">
    <path class="path" fill="#333" stroke="white" stroke-width="2" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
    C46.039,146.545,53.039,128.545,66.039,133.545z"/>
</svg>

body {
  background: #333;
}
.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: path 5s linear alternate infinite;
}
@keyframes path {
  from {
    stroke-dashoffset: 999;
  }
  to {
    stroke-dashoffset: 0;
  }
}

span {
  font: 700 4em/1 "Oswald", sans-serif;
  text-shadow: 0 0 80px rgba(255,255,255,.5);
  background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: filling 80s linear infinite;
  transform: translate3d(0,0,0);
}

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