To make your dark website more beautiful, you can add text effects to it. Text effects that act like light are very beautiful on dark websites. In this code, the letters of the text become blue one by one and also have a blue shade. This makes it look like blue light. The first and last two letters of the text also light up together.
HTML
<!-- This script got from www.devanswer.com -->
<h1>
<span>d</span>
<span>e</span>
<span>v</span>
<span>a</span>
<span>n</span>
<span>s</span>
<span>w</span>
<span>e</span>
<span>r</span>
</h1><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #000;
font-family: monospace;
}
h1 {
margin: 0;
padding: 0;
color: #111;
font-size: 5em;
}
h1 span {
display: table-cell;
margin: 0;
padding: 0;
animation: animate 2s linear infinite;
}
h1 span:nth-child(1) {
animation-delay: 0s;
}
h1 span:nth-child(2) {
animation-delay: 0.25s;
}
h1 span:nth-child(3) {
animation-delay: 0.5s;
}
h1 span:nth-child(4) {
animation-delay: 0.75s;
}
h1 span:nth-child(5) {
animation-delay: 1s;
}
h1 span:nth-child(6) {
animation-delay: 1.25s;
}
h1 span:nth-child(7) {
animation-delay: 1.5s;
}
h1 span:nth-child(8) {
animation-delay: 1.75s;
}
h1 span:nth-child(9) {
animation-delay: 2s;
}
@keyframes animate {
0%, 100% {
color: #fff;
filter: blur(2px);
text-shadow: 0 0 10px #00b3ff, 0 0 20px #00b3ff, 0 0 40px #00b3ff, 0 0 80px #00b3ff, 0 0 120px #00b3ff, 0 0 200px #00b3ff, 0 0 300px #00b3ff, 0 0 400px #00b3ff;
}
5%, 95% {
color: #111;
filter: blur(0px);
text-shadow: none;
}
}
