← Back to Layouts
Blue Emo Effy

Name: FriendRewind
Author: FriendRewind
Author: Ass
Category: Colorful
Created: August 14, 2026
uhhh inspired by #skins and a cool character #effy.
If theres any prob feel free to reach out
Comments (3)

testing 08/19/2026 7:36 PM
Creator here- please comment if using. thx 3
Ass 08/19/2026 7:47 PM
also don't forget to uhh share3
2faced_mily 09/01/2026 7:48 PM
usingg !!
You must log in to comment.
CSS Code

<style id="fr-vb2">
/* VB2_STATE:{"cursorUrl":"","overlayUrl":"","overlayOpacity":0.2,"avatarAnimation":"","pageFont":"","useLiveProfile":true,"previewUrl":"/profile?id=4","pageBgImage":"","pageBgMode":"cover","heroImageUrl":"","profileRowBgImage":"","profileRowBgMode":"cover","navBgColor":"#2b333f","navBgImage":"","navBgMode":"cover","navLinkColor":"#ffffff","navLinkHover":"#66aaff","boxBgColor":"#ffffff","boxOpacity":1,"boxRadius":8,"contactHeaderBg":"#4169E1","contactHeaderText":"#ffffff","contactContentBg":"#ffffff","contactBorderColor":"#4169E1","contactBorderWidth":1,"contactBorderRadius":5,"contactBoxAnimation":"","interestsHeaderBg":"#DAA520","interestsHeaderText":"#ffffff","interestsContentBg":"#ffffff","interestsBorderColor":"#DAA520","interestsBorderWidth":1,"interestsBorderRadius":5,"contentBoxAnimation":"","textBody":"#000000","textHeading":"#000000","textLink":"#0066cc","headingShadowColor":"#000000","headingShadowBlur":2,"headingShadowEnable":false,"moduleImages":{"contact":"","urlInfo":"","tableSection":"","tunes":"","blogPreview":"","blurbs":"","friends":"","Comments Background":"","comments":""}} */
/* Generated by FriendRewind.com Visual Builder */
</style><style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>
/* ===== BLUE EMO / SCENE ===== */

html,
body,
body.profile-page {
    background: #05070c !important;
    color: #c9d8e8 !important;
    font-family: "Trebuchet MS", Arial, sans-serif !important;
}

/* main page background */
.profile {
    background: #08111e !important;
    color: #c9d8e8 !important;
    border: 2px solid #168cff !important;
    box-shadow: 0 0 18px rgba(22,140,255,.25) !important;
    padding: 15px !important;
}

/* top header */
.myspace-header .top-nav {
    background: #05070c !important;
    border-bottom: 2px solid #168cff !important;
}

.myspace-header .main-nav-wrapper {
    background: #0b1626 !important;
    border-bottom: 2px solid #168cff !important;
}

.myspace-header .main-nav li a {
    color: #79caff !important;
    font-weight: bold !important;
}

.myspace-header .main-nav li a:hover {
    background: #168cff !important;
    color: #05070c !important;
}

/* profile name */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #79caff !important;
    text-shadow: 2px 2px 0 #05070c !important;
}

/* links */
a,
.profile a {
    color: #168cff !important;
}

a:hover,
.profile a:hover {
    color: #b5e5ff !important;
}

/* all main boxes */
.blurbs,
.section,
.module,
.profileInfo,
.table-section,
.friends,
.contact,
.url-info,
.interests {
    background: #0b1421 !important;
    color: #c9d8e8 !important;
    border: 1px solid #245071 !important;
    box-shadow: 4px 4px 0 #05070c !important;
    border-radius: 3px !important;
}

/* section headings */
.table-section .heading,
.friends .heading,
.blurbs .heading,
.section .heading,
.module .heading,
.profileInfo .heading,
.contact .heading {
    background: #10243b !important;
    color: #79caff !important;
    border-bottom: 2px solid #168cff !important;
    font-weight: bold !important;
    letter-spacing: 1px !important;
}

/* contact box */
.contact {
    border: 2px solid #168cff !important;
}

.contact .heading {
    background: #168cff !important;
    color: #05070c !important;
}

/* tables */
.details-table {
    background: transparent !important;
}

.details-table td {
    background: #08111c !important;
    color: #c9d8e8 !important;
    border: 1px solid #1d354c !important;
}

.details-table td:first-child {
    background: #10243b !important;
    color: #79caff !important;
    font-weight: bold !important;
}

/* profile picture */
.profile-pic img {
    border: 3px solid #168cff !important;
    box-shadow:
        4px 4px 0 #05070c,
        0 0 12px rgba(22,140,255,.4) !important;
}

/* friends */
.profile .friends img,
.friend-space img {
    border: 2px solid #168cff !important;
    box-shadow: 3px 3px 0 #05070c !important;
}

/* comments */
#comments,
.comments-table,
.comments-table td {
    background: #08111c !important;
    color: #c9d8e8 !important;
    border-color: #1d354c !important;
}

.comments-table td:first-child {
    background: #050a11 !important;
}

/* footer */
footer {
    background: #05070c !important;
    color: #62788e !important;
    border-top: 1px solid #168cff !important;
}

/* little scene decoration */
.profile::before {
    content: "★  †  ★  †  ★";
    display: block;
    text-align: center;
    color: #168cff;
    font-size: 12px;
    letter-spacing: 8px;
    padding: 5px;
}
</style><style>
/* =====================================================
   BLUE EMO + LACE PROFILE
   BANNER + BACKGROUND
   ===================================================== */


/* -------------------------
   PAGE
   ------------------------- */

body,
body.profile-page {
    background: #03070e !important;
    color: #c9d8e8 !important;
}


/* -------------------------
   YOUR BIG TOP BANNER
   ------------------------- */

main::before {
    content: "" !important;

    display: block !important;

    width: 100% !important;
    height: 300px !important;

    background-image: url("https://64.media.tumblr.com/c239279de43ec599d59051e9e477aaaa/tumblr_o0pp9lwsqQ1utbxh9o1_500.gifv") !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    border-bottom: 2px solid #168cff !important;

    box-shadow:
        0 5px 15px rgba(0,0,0,.7) !important;
}


/* -------------------------
   LACE / PLAID PROFILE AREA
   ------------------------- */

.profile {
    position: relative !important;

    background-image:
        linear-gradient(
            rgba(3,7,14,.72),
            rgba(3,7,14,.72)
        ),
        url("https://i.pinimg.com/736x/1d/70/68/1d70687571821674322136d89d20687f.jpg") !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    border: 2px solid #168cff !important;

    box-shadow:
        0 0 25px rgba(22,140,255,.25),
        5px 5px 0 rgba(0,0,0,.7) !important;
}


/* -------------------------
   DARK TRANSPARENT BOXES
   ------------------------- */

.blurbs,
.section,
.module,
.profileInfo,
.table-section,
.friends {
    background: rgba(4,9,17,.78) !important;

    border: 1px solid rgba(22,140,255,.55) !important;

    box-shadow:
        4px 4px 0 rgba(0,0,0,.65) !important;
}


/* -------------------------
   CONTACT BOX
   ------------------------- */

.contact {
    background: rgba(4,9,17,.82) !important;

    border: 1px solid #168cff !important;
}


/* -------------------------
   HEADINGS
   ------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #79caff !important;

    text-shadow:
        2px 2px #03070e,
        0 0 8px rgba(22,140,255,.45) !important;
}


/* -------------------------
   LINKS
   ------------------------- */

a {
    color: #168cff !important;
}

a:hover {
    color: #b5e5ff !important;

    text-shadow:
        0 0 8px #168cff !important;
}


/* -------------------------
   SECTION HEADERS
   ------------------------- */

.contact .heading,
.table-section .heading,
.friends .heading,
.blurbs .heading,
.section .heading,
.module .heading,
.profileInfo .heading {
    background: rgba(8,25,43,.92) !important;

    color: #79caff !important;

    border-bottom: 2px solid #168cff !important;
}


/* -------------------------
   DETAILS TABLE
   ------------------------- */

.details-table td {
    background: rgba(4,10,18,.80) !important;

    color: #c9d8e8 !important;

    border: 1px solid rgba(36,80,113,.7) !important;
}

.details-table td:first-child {
    background: rgba(12,31,51,.90) !important;

    color: #79caff !important;
}


/* -------------------------
   PROFILE PICTURE
   ------------------------- */

.profile-pic img {
    border: 3px solid #168cff !important;

    box-shadow:
        0 0 12px rgba(22,140,255,.5),
        4px 4px 0 rgba(0,0,0,.7) !important;
}</style><style>

/* =========================================
   OUTER PAGE BACKGROUND
   ========================================= */

html,
body {
    background-color: #02050a !important;

    background-image:
        linear-gradient(
            rgba(1, 5, 12, 0.78),
            rgba(1, 5, 12, 0.78)
        ),
        url("https://i.pinimg.com/736x/ce/d2/78/ced2787fbea0f978cb6ad0a36c452e0f.jpg") !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}


/* DARK BLUE GLOW AROUND THE PROFILE */

body {
    box-shadow:
        inset 0 0 120px rgba(0, 35, 80, 0.35) !important;
}


/* KEEP THE AREA AROUND THE PROFILE DARK */

main {
    background: transparent !important;
}


/* MAKE THE OUTER EDGES FEEL LESS EMPTY */

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(20, 100, 180, 0.08),
            transparent 55%
        );

    z-index: -1;
}
</style><style>

/* =========================================
   DECORATIVE PHOTO IN THE EMPTY SPACE
   ========================================= */

.profile {
    position: relative !important;
}

/* the photo */
.profile::after {
    content: "";
    position: absolute;

    top: 70px;
    left: 11%;
    transform: translateX(-50%);

    width: 20%;
    height: 300px;

    background-image:
        linear-gradient(
            rgba(0, 5, 12, 0.38),
            rgba(0, 5, 12, 0.55)
        ),
        url("https://i.pinimg.com/736x/ce/d2/78/ced2787fbea0f978cb6ad0a36c452e0f.jpg");

    background-size: contain;
    background-position: center;

    background-repeat: no-repeat;

    border: 2px solid #168cff;

    box-shadow:
        0 0 18px rgba(22, 140, 255, 0.3),
        6px 6px 0 rgba(0, 0, 0, 0.65);

    opacity: 0.82;

    z-index: 0;

    pointer-events: none;
}
</style>