← Back to Layouts
Silent Hill

Name: FriendRewind
Author: FriendRewind
Author: Def3ct
Category: Goth
Created: July 16, 2025
Silent Hill scary layout (:
Comments (2)

Xx_ranalan_xX 07/20/2025 2:28 AM
when I saw this I started doing backflips
xX_tanitadarkworld 10/22/2026 10:58 AM
this is the coolest most amazing layout ever ily
You must log in to comment.
CSS Code

* {cursor: url(https://ani.cursors-4u.net/cursors/cur-13/cur1156.ani), url(https://ani.cursors-4u.net/cursors/cur-13/cur1156.png), auto !important;} 
</style>

<style>

html:before {
    animation: grain 8s steps(10) infinite;
    background-image: url('https://i.gifer.com/origin/f4/f4f7a7183e2a2c112658a5b560b457b7_w200.gif');
    content: "";
    height: 300%;
    left: -50%;
    opacity:.1;
    position: fixed;
    top: -110%;
    width: 300%;
    pointer-events:none;
    z-index: 100;
}
@keyframes grain {
    0%, 100% { transform:translate(0, 0) }
    10% { transform:translate(-5%, -10%) }
    20% { transform:translate(-15%, 5%) }
    30% { transform:translate(7%, -25%) }
    40% { transform:translate(-5%, 25%) }
    50% { transform:translate(-15%, 10%) }
    60% { transform:translate(15%, 0%) }
    70% { transform:translate(0%, 15%) }
    80% { transform:translate(3%, 35%) }
    90% { transform:translate(-10%, 10%) }
}
</style>

<style>

body::after {
    content: ' ';
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 99;
    background: url('https://friendrewind.com/uploads/gallery/1/img_686d6be5cd1a37.24947163.gif');
    opacity: 0.3;
    pointer-events: none;
}
</style>

<style>

@keyframes breathing {
    0%, 100% { transform: scale(1); box-shadow: 0 0 10px #000; }
    50% { transform: scale(1.005); box-shadow: 0 0 15px #000; }
}
@keyframes textGlitch {
  2%, 64% { transform: translate(2px, 0) skew(0deg); color: #8B0000; }
  4%, 60% { transform: translate(-2px, 0) skew(0deg); color: #E0E0E0; }
  62% { transform: translate(0, 0) skew(2deg); }
}
@keyframes fadeInOut {
    0%   { opacity: 0; }
    5%   { opacity: 0; }
    10%  { opacity: 0.7; }
    25%  { opacity: 0.7; }
    30%  { opacity: 0; }
    100% { opacity: 0; }
}

@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
:root {
    --sh-red: #8B0000;
    --sh-rust: #8D4004;
    --sh-dark: #1a1a1a;
    --sh-fog: #A9A9A9;
    --sh-text: #E0E0E0;
    --font-main: 'Special Elite', monospace;
}
</style>

<style>

nav .top {
    background: transparent url('https://friendrewind.com/uploads/gallery/1/img_687834b446e704.42749623.gif') repeat-x center;
    height: 25px; 
    border-bottom: 3px solid var(--sh-dark); 
}
nav .links {
    background: rgba(0, 0, 0, 0.6);
    border-bottom: 2px solid var(--sh-red);
}
nav { 
    background-image: url(https://i.gifer.com/78cI.gif); 
    background-size: cover;
    background-position: center;
    border-bottom: 3px solid var(--sh-rust);
}
</style>

<style>

main:before {
    width: 100%;
    height: 300px ;
    display: block;
    content: "";
    background-image: url('https://friendrewind.com/uploads/gallery/1/img_68782e68301143.87573769.gif');
    background-position: center bottom;
    background-size: cover;
    border-bottom: 5px solid black;
    filter: sepia(0.2) grayscale(0.3);
}
@media only screen and (max-width: 600px) {
    main:before{
        height: 150px;
    }
}
</style>

<style>  

body {  
    font-family: var(--font-main);
    font-size: 15pt;
    font-weight: normal;
    text-decoration: none;
}
h1, h2, h3, h4, p {
    color: var(--sh-text);
    text-shadow: 2px 2px 2px var(--sh-dark);
}
</style>

<style>

@import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap');
.profile h1 { 
    font-family: "Creepster", cursive;
    font-size: 50px;
    color: var(--sh-red);
    text-shadow: 2px 2px 2px #000, 0 0 10px var(--sh-red);
    animation: textGlitch 2s cubic-bezier(.25, .46, .45, .94) both infinite;
}
</style>

<style>

.profile {
    background-image: url('https://giffiles.alphacoders.com/254/25405.gif') !important;
    background-repeat: repeat-y !important;
    background-size: 100% auto !important;
    background-position: top center !important;
}
</style>

<style>

.blurbs, .friendsComments, .friendSpace, .extendedNetwork, .latestBlogEntry, .profile .contact, #comments, .profileInfo {
    background-color: rgba(10, 5, 5, 0.8) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    backdrop-filter: blur(4px) !important;
    border: 12px solid transparent !important;
    border-image: url(https://friendrewind.com/uploads/gallery/1/img_687042898993c9.19973811.jpg) 30 stretch !important;
    padding: 10px !important;
    margin-bottom: 25px !important;
    animation: breathing 10s infinite ease-in-out;
}


.blurbs .inner, .friendsComments .inner, .friendSpace .friends-grid, .extendedNetwork .inner, .latestBlogEntry .inner, .contact .inner, .profileInfo .details-table, #comments .comments-table td {
    background: transparent !important;
    border: none !important;
}


#comments .inner {
    max-height: 500px;
    overflow-y: scroll !important;
    scrollbar-color: var(--sh-rust) var(--sh-dark);
    scrollbar-width: thin;
}
#comments .comments-table td {
     border-bottom: 1px solid rgba(139, 0, 0, 0.4) !important;
     padding: 10px 0 !important;
}
#comments img {
    border: 3px solid var(--sh-rust) !important;
    filter: grayscale(50%) contrast(110%);
}
</style>

<style>
main, body, html {
    background: transparent !important;
}
table, tr, td { background-color:transparent;}


a {
    font-weight: bold !important; 
    color: #C0C0C0 !important;
    text-shadow: 1px 1px 3px var(--sh-dark) !important;
    transition: all 0.3s ease;
}
a:hover {
    color: var(--sh-red) !important;
    text-shadow: 0px 0px 5px var(--sh-red);
}


body {
    background-color: #000 !important;
    background-image: url('https://friendrewind.com/uploads/gallery/1/img_68782f00869292.18720547.jpeg') !important;
    background-attachment: fixed !important;
    background-position: center !important;
    background-size: cover !important;
}
</style>

<style>

body:before {
    content: " ";
    height: 100vh;
    width: 100vw;
    display: block;
    position: fixed;  
    top: 0;  
    left: 0;  
    z-index: 1000;
    background-image: url('https://friendrewind.com/uploads/gallery/1/img_68782e66d16006.30029767.gif');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    animation: silentHillIntro 4s ease-out 0s 1 normal forwards;
    pointer-events: none;
}
@keyframes silentHillIntro { 
    0% { opacity: 1; }
    85% { opacity: 1; }
    100% { opacity: 0; } 
}
</style>

<style>

footer {
    border-radius: 0;
    background-image: url(https://i.gifer.com/5E2v.gif);
    background-size: cover;
    background-position: center;
    border-top: 5px solid var(--sh-dark);
    height: 150px;
}
footer::before {
    content: '';
    position: fixed;
    bottom: 10px;
    left: 10px;
    width: 150px;
    height: 220px;
    background: url('https://friendrewind.com/uploads/gallery/1/img_687833faeeb1b8.68505414.webp') no-repeat center center / contain;
    z-index: 98;
    animation: fadeInOut 25s infinite;
    pointer-events: none;
}