Deltarune Battle Background CSS.

for janitorai!

credits is not needed but its optional if you want :)

I tried to make it accurate as possible so, if you see any mistakes then let me know!

copy the code below then paste it on your about me section then its done! simple as that.

1. The Original Deltarune Battle Background.

⎗
✓
<style>
.pp-page-background {
    background-color: #000000; 
}
.pp-page-background::before,
.pp-page-background::after {
    content: "";
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200vw;
    height: 200vh;
    z-index: 1; 
    pointer-events: none;
}
.pp-page-background::before {
    background-image: linear-gradient(to right, rgba(176, 0, 176, 0.25) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(176, 0, 176, 0.25) 1px, transparent 1px);
    background-size: 80px 80px; 
    animation: goingup 3s linear infinite;
}
.pp-page-background::after {
    background-image: linear-gradient(to right, rgba(146, 0, 146, 0.15) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(146, 0, 146, 0.15) 1px, transparent 1px);
    background-size: 80px 80px; 
    animation: goingdown 3s linear infinite;
    opacity: 0.7;
}
@keyframes goingup {
    0% {
        transform: translate(0, 0);
    }
    100% {    
        transform: translate(-80px, -80px); 
    }
}
@keyframes goingdown {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(80px, 80px); 
    }
}
</style>

2. Deltarune Frostveil (Roaring Noelle?) Background:

sorry if I didnt include the red fog plus the spinning thorn ring since I couldn't find any images for it...

THIS IS A WIP VERSION AND ITS NOT DONE YET!

⎗
✓
<style>
.pp-page-background {
 background-color: #000000 !important;
}
body::after {
    content: "" !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 320px !important; 
    background: linear-gradient(to top, rgba(155, 0, 0, 0.55) 0%, rgba(155, 0, 0, 0.4) 40%, transparent 100%) !important;
    z-index: 0 !important; 
    pointer-events: none !important;
    animation: redblinkdown 3s ease-in-out infinite !important;
}
@media screen and (max-width: 768px) {
    body::after {
        height: 35vh !important;
    }
}
@keyframes redblinkdown {
    0%, 100% {
        opacity: 1;
        transform: translateY(0px);
    }
    50% {
        opacity: 0.25;
        transform: translateY(15px); 
    }
}
.pp-page-background::before {
    content: "";
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200vw;
    height: 200vh;
    z-index: -9999;
    pointer-events: none;
    background-image: linear-gradient(to right, rgba(255, 0, 0, 0.25) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 0, 0, 0.25) 1px, transparent 1px);
    background-size: 150px 150px; 
    transform: rotate(45deg); 
    animation:  redgridgoingupagain 3s linear infinite;
}
@keyframes redgridgoingupagain {
    0% {
        background-position: 0 0;
    }
    100% {   
        background-position: 0 -140px; 
    }
}
</style>

Deltarune Battle Background CSS.

for janitorai!

1. The Original Deltarune Battle Background.

2. Deltarune Frostveil (Roaring Noelle?) Background:

Warning