← Back to Layouts
Gloomy bear

Name: FriendRewind
Author: FriendRewind
Author: The Funky Bee
Category: Characters
Created: July 30, 2026
Comments (0)

No comments yet. Be the first!
You must log in to comment.
CSS Code

<style>
<!-- =========================================================
     GLOOMY BEAR × BAMBOO
     BRIGHT PINK + GREEN EDITION
     FULL LAYOUT
     ========================================================= -->


<!-- =========================================================
     MAIN PFP + FRIEND PFPs
     ========================================================= -->

<style>

.general-about {
  position: relative;
  margin-top: 30px;
}

/* Gloomy Bear × Bamboo Online Icon — SMALLER */
.online {
  content: url("https://friendrewind.com/uploads/gallery/20897/img_6a6bc68a7826e6.94544061.gif");
  width: auto;
  height: auto;
  max-width: 50px;
  image-rendering: auto;
  filter: drop-shadow(0 0 3px #355c2d);
}

</style>

<style>

/* =========================================================
   MAIN PROFILE PICTURE
   ========================================================= */

.general-about .profile-pic {

  position: relative !important;

  display: block !important;

  width: 150px !important;

  height: 150px !important;

  margin: 20px auto !important;

  padding: 0 !important;

  border-radius: 50% !important;

  overflow: visible !important;

}


/* ACTUAL PROFILE PICTURE */

.general-about .profile-pic img {

  position: absolute !important;

  top: 0 !important;

  left: 0 !important;

  width: 150px !important;

  height: 150px !important;

  min-width: 150px !important;

  min-height: 150px !important;

  max-width: 150px !important;

  max-height: 150px !important;

  object-fit: cover !important;

  object-position: center !important;

  border-radius: 50% !important;

  border: 5px solid #ff4f9a !important;

  box-sizing: border-box !important;

  z-index: 1 !important;

  box-shadow:

    0 0 7px #ff1493,

    0 0 15px #ff69b4,

    0 0 25px #7cff6b !important;

}


/* =========================================================
   GLOOMY BEAR PFP OVERLAY
   ========================================================= */

.general-about .profile-pic::after {

  content: "" !important;

  position: absolute !important;

  top: 0 !important;

  left: 0 !important;

  width: 150px !important;

  height: 150px !important;

  padding: 0 !important;

  margin: 0 !important;

  background-image:

    url("https://friendrewind.com/uploads/gallery/21142/img_6a6bca39e3a060.13404471.webp") !important;

  background-repeat: no-repeat !important;

  background-position: center !important;

  background-size: 100% 100% !important;

  border-radius: 50% !important;

  box-sizing: border-box !important;

  z-index: 10 !important;

  pointer-events: none !important;

}


/* =========================================================
   OUTER PINK + GREEN GLOW
   ========================================================= */

.general-about .profile-pic::before {

  content: "" !important;

  position: absolute !important;

  top: -6px !important;

  left: -6px !important;

  width: 162px !important;

  height: 162px !important;

  border-radius: 50% !important;

  border: 3px solid #7cff6b !important;

  box-sizing: border-box !important;

  z-index: 0 !important;

  pointer-events: none !important;

  box-shadow:

    0 0 8px #ff1493,

    0 0 15px #ff69b4,

    0 0 25px #7cff6b !important;

}


/* =========================================================
   FRIEND PFPs
   GLOOMY BEAR HEAD STYLE
   ========================================================= */

.profile .friends .person {

  position: relative !important;

  padding-top: 7px !important;

}


.profile .friends .person img:not(.icon) {

  position: relative !important;

  z-index: 2 !important;

  width: 82px !important;

  height: 82px !important;

  object-fit: cover !important;

  object-position: center !important;

  border-radius: 45% !important;

  border: 4px solid #ff4f9a !important;

  background: #55a936 !important;

  box-shadow:

    0 0 0 3px #b8ff80,

    0 0 10px #ff1493,

    0 0 18px #7cff6b !important;

}


/* GLOOMY BEAR EARS */

.profile .friends .person::before,

.profile .friends .person::after {

  content: "" !important;

  position: absolute !important;

  top: 0 !important;

  width: 25px !important;

  height: 25px !important;

  background: #55a936 !important;

  border: 4px solid #ff4f9a !important;

  border-radius: 50% !important;

  z-index: 1 !important;

}


.profile .friends .person::before {

  left: calc(50% - 40px) !important;

}


.profile .friends .person::after {

  right: calc(50% - 40px) !important;

}


.profile .friends .person img:not(.icon):hover {

  transform: scale(1.08) rotate(-2deg) !important;

  border-color: #ffffff !important;

  box-shadow:

    0 0 0 3px #7cff6b,

    0 0 12px #ff1493,

    0 0 25px #b8ff80 !important;

}

</style>


<!-- =========================================================
     ONLINE
     RUNNING GLOOMY BEAR GIF
     ========================================================= -->

<style>

.general-about {

  position: relative;

  margin-top: 30px;

}


/* RUNNING GLOOMY BEAR */

.online {

  content: url("https://friendrewind.com/uploads/gallery/20897/img_6a6bc68a7826e6.94544061.gif") !important;

  width: auto !important;

  height: auto !important;

  max-width: 55px !important;

  max-height: 55px !important;

  object-fit: contain !important;

  image-rendering: auto !important;

  filter:

    drop-shadow(0 0 3px #355c2d)

    drop-shadow(0 0 5px #ff69b4) !important;

}

</style>


<!-- =========================================================
     CONTACT ICONS
     GLOOMY BEAR / CUTE PIXEL STYLE
     ========================================================= -->

<style>

.contact .inner a img {

  font-size: 0;

}


.contact .inner a img:before {

  font-size: 1em;

  display: block;

}


.contact .inner a:before {

  content: "";

}


/* ADD TO FRIENDS */

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {

  display: inline-block;

  background:

    url("https://pixels.crd.co/assets/images/gallery112/56607b05.gif?v=2942f085")

    no-repeat 0 0;

  background-size: 100%;

  width: 16px;

  height: 16px;

}


/* ADD TO FAVORITES */

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {

  display: inline-block;

  background:

    url("https://pixels.crd.co/assets/images/gallery90/9f8f06f9.gif?v=2942f085")

    no-repeat 0 0;

  background-size: 100%;

  width: 16px;

  height: 16px;

}


/* SEND MESSAGE */

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {

  display: inline-block;

  background:

    url("https://pixels.crd.co/assets/images/gallery112/81f0c7e5.gif?v=2942f085")

    no-repeat 0 0;

  background-size: 100%;

  width: 16px;

  height: 16px;

}


/* FORWARD TO FRIEND */

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {

  display: inline-block;

  background:

    url("https://pixels.crd.co/assets/images/gallery112/78ed9a20.gif?v=2942f085")

    no-repeat 0 0;

  background-size: 100%;

  width: 16px;

  height: 16px;

}


/* INSTANT MESSAGE */

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {

  display: inline-block;

  background:

    url("https://pixels.crd.co/assets/images/gallery01/206258c7.gif?v=2942f085")

    no-repeat 0 0;

  background-size: 100%;

  width: 16px;

  height: 16px;

}


/* BLOCK USER */

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {

  display: inline-block;

  background:

    url("https://pixels.crd.co/assets/images/gallery16/716af8ce.gif?v=2942f085")

    no-repeat 0 0;

  background-size: 100%;

  width: 16px;

  height: 16px;

}


/* ADD TO GROUP */

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {

  display: inline-block;

  background:

    url("https://pixels.crd.co/assets/images/gallery16/ecd66e8a.gif?v=2942f085")

    no-repeat 0 0;

  background-size: 100%;

  width: 16px;

  height: 16px;

}


/* REPORT USER */

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {

  display: inline-block;

  background:

    url("https://pixels.crd.co/assets/images/gallery112/2d519ac6.gif?v=2942f085")

    no-repeat 0 0;

  background-size: 100%;

  width: 16px;

  height: 16px;

}

</style>


<!-- =========================================================
     GLOOMY BEAR × BAMBOO
     BRIGHT PINK + GREEN
     ========================================================= -->

<style>

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Permanent+Marker&display=swap');


/* =========================================================
   BODY
   PHOTO #8
   ========================================================= */

html,
body {

  background-color: #ffb6d9 !important;

  background-image:

    linear-gradient(
      rgba(255,105,180,.30),
      rgba(80,220,100,.30)
    ),

    url("https://friendrewind.com/uploads/gallery/21142/img_6a6bcd40a374d6.26242299.webp") !important;

  background-size: cover !important;

  background-position: center !important;

  background-attachment: fixed !important;

  color: #ffffff !important;

  font-family: 'Quicksand', sans-serif !important;

}


/* =========================================================
   TEXT
   ========================================================= */

body,
main,
.profile,
.profile p,
.profile h2,
.profile h3,
.profile h4,
.profile td,
.profile th {

  color: #ffffff !important;

  text-shadow:

    0 0 3px #ff1493,

    0 0 7px #3d8f35;

}


a {

  color: #ff1493 !important;

}


a:hover {

  color: #42b93e !important;

}


/* =========================================================
   DISPLAY NAME
   ========================================================= */

.profile h1 {

  font-family: 'Permanent Marker', cursive !important;

  color: #ff1493 !important;

  text-align: center;

  font-size: 40px !important;

  letter-spacing: 3px;

  text-shadow:

    3px 3px 0 #ffffff,

    0 0 8px #ff1493,

    0 0 18px #7cff6b;

}


.profile h1::after {

  content:

    "✦ GLOOMY DAYS & BAMBOO NIGHTS ✦";

  display: block;

  font-family: 'Quicksand', sans-serif;

  font-size: 15px;

  font-weight: 700;

  color: #7cff6b !important;

  margin-top: 7px;

  text-shadow:

    0 0 5px #ff1493,

    0 0 10px #ffffff;

}


/* =========================================================
   TOP NAVIGATION
   PHOTO #6
   ========================================================= */

nav .top {

  background:

    linear-gradient(
      rgba(255,20,147,.45),
      rgba(60,220,80,.45)
    ),

    url("https://friendrewind.com/uploads/gallery/21142/img_6a6bcd4037dfd1.91931292.webp");

  background-size: cover;

  background-position: center;

  border: 4px solid #ff4f9a;

  border-radius: 15px;

  box-shadow:

    0 0 10px #ff1493,

    0 0 20px #7cff6b,

    0 0 30px #ffffff;

}


nav .links {

  background:

    linear-gradient(
      90deg,
      #ff4f9a,
      #ff1493,
      #75e85c,
      #b8ff80
    );

  border-top: 3px solid #ffffff;

  border-bottom: 3px solid #ff1493;

}


nav .links a {

  color: #ffffff !important;

  font-weight: 700;

  text-shadow:

    0 0 5px #ff1493,

    0 0 8px #24752e;

}


nav .links a:hover {

  color: #fff0f7 !important;

  text-shadow:

    0 0 7px #ff1493,

    0 0 14px #7cff6b;

}


/* =========================================================
   MAIN
   PHOTO #3
   ========================================================= */

main {

  background:

    linear-gradient(
      rgba(255,105,180,.35),
      rgba(70,220,100,.40)
    ),

    url("https://friendrewind.com/uploads/gallery/21142/img_6a6bcd3fcde059.28124977.webp");

  background-size: cover;

  background-position: center;

  border: 4px solid #ff4f9a;

  border-radius: 18px;

  box-shadow:

    0 0 12px #ff1493,

    0 0 25px #7cff6b,

    0 0 35px #ffffff;

}


/* =========================================================
   PFP SECTION
   PHOTO #1
   ========================================================= */

.general-about {

  background:

    linear-gradient(
      rgba(255,20,147,.30),
      rgba(60,220,80,.35)
    ),

    url("https://friendrewind.com/uploads/gallery/21142/img_6a6bcd3f941ab9.29571720.webp");

  background-size: cover;

  background-position: center;

  padding: 15px;

  border: 4px solid #ff69b4;

  border-radius: 18px;

  box-shadow:

    0 0 12px #ff1493,

    0 0 22px #7cff6b;

}


/* =========================================================
   URL INFO
   PHOTO #4
   ========================================================= */

.url-info {

  background:

    linear-gradient(
      rgba(70,220,100,.42),
      rgba(255,20,147,.38)
    ),

    url("https://friendrewind.com/uploads/gallery/21142/img_6a6bcd3fd978f0.46991418.webp");

  background-size: cover;

  background-position: center;

  border: 4px solid #7cff6b;

  border-radius: 15px;

  box-shadow:

    0 0 12px #7cff6b,

    0 0 20px #ff1493;

}


/* =========================================================
   PROFILE INFO
   PHOTO #2
   ========================================================= */

.profile-info {

  background:

    linear-gradient(
      rgba(255,105,180,.40),
      rgba(70,220,100,.38)
    ),

    url("https://friendrewind.com/uploads/gallery/21142/img_6a6bcd3f9831c5.05172874.webp");

  background-size: cover;

  background-position: center;

  border: 4px solid #ff69b4;

  border-radius: 15px;

  box-shadow:

    0 0 12px #ff1493,

    0 0 22px #7cff6b;

}


/* =========================================================
   BLURBS
   PHOTO #5
   ========================================================= */

.profile .blurbs {

  background:

    linear-gradient(
      rgba(70,220,100,.40),
      rgba(255,20,147,.40)
    ),

    url("https://friendrewind.com/uploads/gallery/21142/img_6a6bcd4042dea6.70254289.webp");

  background-size: cover;

  background-position: center;

  padding: 14px;

  border: 4px solid #ff4f9a;

  border-radius: 16px;

  box-shadow:

    0 0 12px #ff1493,

    0 0 22px #7cff6b;

}


.profile .blurbs h4 {

  color: #7cff6b !important;

  font-family: 'Permanent Marker', cursive;

  text-shadow:

    0 0 6px #ff1493,

    0 0 12px #ffffff;

}


/* =========================================================
   FRIENDS
   PHOTO #7
   ========================================================= */

.profile .friends {

  background:

    linear-gradient(
      rgba(255,20,147,.38),
      rgba(70,220,100,.40)
    ),

    url("https://friendrewind.com/uploads/gallery/21142/img_6a6bcd40d92297.48982608.webp");

  background-size: cover;

  background-position: center;

  padding: 15px;

  border: 4px solid #7cff6b;

  border-radius: 18px;

  box-shadow:

    0 0 12px #7cff6b,

    0 0 22px #ff1493,

    0 0 30px #ffffff;

}


.profile .friends::before {

  content:

    "✦ GLOOMY BEAR FRIEND CLUB ✦";

  display: block;

  text-align: center;

  padding: 8px;

  margin-bottom: 12px;

  font-family: 'Permanent Marker', cursive;

  font-size: 20px;

  color: #ffffff !important;

  background:

    linear-gradient(
      90deg,
      #ff1493,
      #ff69b4,
      #55d94b,
      #7cff6b
    );

  border: 3px solid #ffffff;

  border-radius: 10px;

  text-shadow:

    0 0 5px #ff1493,

    0 0 8px #24752e;

}


/* =========================================================
   CONTACT
   ========================================================= */

.profile .contact {

  background:

    linear-gradient(
      rgba(70,220,100,.42),
      rgba(255,20,147,.38)
    ),

    url("https://friendrewind.com/uploads/gallery/21142/img_6a6bcd3f941ab9.29571720.webp");

  background-size: cover;

  background-position: center;

  padding: 12px;

  border: 4px solid #ff69b4;

  border-radius: 15px;

  box-shadow:

    0 0 12px #ff1493,

    0 0 22px #7cff6b;

}


/* =========================================================
   MUSIC
   PHOTO #8
   ========================================================= */

.music-table {

  background:

    linear-gradient(
      rgba(255,20,147,.40),
      rgba(70,220,100,.40)
    ),

    url("https://friendrewind.com/uploads/gallery/21142/img_6a6bcd40a374d6.26242299.webp");

  background-size: cover;

  background-position: center;

  padding: 12px;

  border: 4px solid #7cff6b;

  border-radius: 15px;

  box-shadow:

    0 0 12px #7cff6b,

    0 0 22px #ff1493;

}


/* =========================================================
   COMMENTS
   PHOTO #6
   ========================================================= */

.comments-table {

  background:

    linear-gradient(
      rgba(70,220,100,.42),
      rgba(255,20,147,.40)
    ),

    url("https://friendrewind.com/uploads/gallery/21142/img_6a6bcd4037dfd1.91931292.webp");

  background-size: cover;

  background-position: center;

  border: 4px solid #ff69b4;

  border-radius: 15px;

  box-shadow:

    0 0 12px #ff1493,

    0 0 22px #7cff6b;

}


/* =========================================================
   TABLE SECTIONS
   PHOTO #5
   ========================================================= */

.profile .table-section {

  background:

    linear-gradient(
      rgba(255,20,147,.38),
      rgba(70,220,100,.42)
    ),

    url("https://friendrewind.com/uploads/gallery/21142/img_6a6bcd4042dea6.70254289.webp");

  background-size: cover;

  background-position: center;

  padding: 12px;

  border: 4px solid #7cff6b;

  border-radius: 15px;

  box-shadow:

    0 0 12px #7cff6b,

    0 0 22px #ff1493;

}


/* =========================================================
   TABLE COLORS
   ========================================================= */

.details-table td:first-child {

  background:

    linear-gradient(
      90deg,
      #ff1493,
      #ff69b4
    );

  color: #ffffff !important;

  border: 3px solid #ffffff;

}


.details-table td {

  background:

    linear-gradient(
      90deg,
      #3aa83d,
      #75e85c
    );

  color: #ffffff !important;

  border: 3px solid #ffb6d9;

}


/* =========================================================
   COMMENT CELLS
   ========================================================= */

.comments-table td {

  background:

    rgba(70,190,70,.80) !important;

  border: 3px solid #ff69b4 !important;

}


/* =========================================================
   FRIEND NAMES
   ========================================================= */

.profile .friends .person p {

  color: #ffffff !important;

  font-weight: 700;

  text-shadow:

    0 0 5px #ff1493,

    0 0 8px #24752e;

}


/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {

  width: 13px;

  background: #ffb6d9;

}


::-webkit-scrollbar-thumb {

  background:

    linear-gradient(
      #ff1493,
      #ff69b4,
      #7cff6b,
      #55d94b
    );

  border-radius: 10px;

  border: 2px solid #ffffff;

  box-shadow:

    0 0 8px #ff1493,

    0 0 12px #7cff6b;

}


/* =========================================================
   FOOTER
   ========================================================= */

footer {

  background:

    linear-gradient(
      rgba(255,20,147,.70),
      rgba(60,210,80,.70)
    ),

    url("https://friendrewind.com/uploads/gallery/21142/img_6a6bcd40d92297.48982608.webp") !important;

  background-size: cover !important;

  background-position: center !important;

  border-top: 4px solid #ffffff !important;

  padding: 18px;

  box-shadow:

    0 -5px 15px #ff1493,

    0 -5px 25px #7cff6b;

}


footer,
footer p,
footer span,
footer a {

  color: #ffffff !important;

  text-shadow:

    0 0 5px #ff1493,

    0 0 8px #24752e;

}


footer::before {

  content:

    "✦ THANKS FOR VISITING THE GLOOMY BEAR BAMBOO ZONE ✦";

  display: block;

  text-align: center;

  font-family: 'Permanent Marker', cursive;

  font-size: 16px;

  color: #ffffff !important;

  padding: 8px;

}


footer::after {

  content:

    "♡ PINK HEARTS • GREEN BAMBOO • GLOOMY BEARS ♡";

  display: block;

  text-align: center;

  font-size: 15px;

  color: #ffb6d9 !important;

  text-shadow:

    0 0 6px #ff1493,

    0 0 10px #7cff6b;

}

</style></style>