✦ Enchanted Fairy Forest CSS Template ✦

a dreamy fairycore css template for janitorai profiles & character cards


✧ overview

welcome to the enchanted fairy forest — a magical profile theme wrapped in moonlight, glowing sparkles, soft lavender skies, fluttering butterflies, and hidden fairy magic ♡

this template transforms your janitorai profile into a mystical fantasy realm filled with:

  • ✦ glowing glassmorphism panels
  • 🦋 floating sparkles & fairy accents
  • 🌙 celestial lavender fantasy palette
  • ✧ enchanted character cards
  • 🧚 magical hover animations
  • 💜 dreamy glowing buttons & tabs
  • 🌌 soft moonlit aesthetic
  • ✨ fully mobile friendly

perfect for:

  • fairycore
  • fantasy creators
  • magical girl themes
  • celestial aesthetics
  • mystical roleplay profiles
  • dreamy journals
  • enchanted oc showcases

✦ preview aesthetic

wandering through moonlit forests while tiny fairies dance beneath glowing trees and stars whisper ancient magic through the night sky ♡

beautiful
beautiful
beautiful
beautiful
beautiful


✧ features

🧚 profile section

  • glowing enchanted profile layout
  • animated sparkles
  • floating fairy symbols
  • magical glowing avatar borders
  • dreamy translucent panels

✦ character cards

  • glowing fantasy cards
  • soft magical shadows
  • animated shimmer effects
  • enchanted hover animations
  • pastel celestial accents

🌙 interface styling

  • magical top navigation bar
  • custom glowing search bars
  • fantasy buttons & menus
  • enchanted tabs
  • custom scrollbars

💜 extra widgets

  • about me section
  • magical music widget
  • dropdown sections
  • customizable fantasy panels

✦ installation

1. copy the css

copy the entire css template.

2. open janitorai profile settings

go to:

profile → edit profile → custom css

3. paste everything

paste the entire template into the css box.

4. save

save profile changes and refresh ♡


✧ customization

you can customize:

  • colors
  • titles
  • glowing effects
  • sparkles
  • profile text
  • widgets
  • fantasy symbols
  • character descriptions

search for text like:

content:"✦ fairy forest ✦";

and replace it with your own title ♡


this template looks best with:

  • Cormorant Garamond
  • Quicksand
  • Cinzel
  • Great Vibes

✧ credits

template made by: NagisaAsahina ♡

inspiration from dreamy fairycore aesthetics, glowing fantasy forests, moonlit skies, enchanted butterflies, and magical storybook worlds ✦


✦ notes

  • works best in dark mode
  • mobile responsive
  • supports html & markdown sections
  • fully customizable
  • designed for janitorai profiles & bot cards

✧ may your profile glow like an enchanted forest beneath the stars ✧

✧ code

<style>

/ ═══════════════════════════════════
✦ ENCHANTED FAIRY PROFILE THEME ✦
full profile + character cards
═══════════════════════════════════
/

body{
background:
radial-gradient(circle at top, rgba(255,255,255,.14), transparent 35%),
linear-gradient(to bottom,#120b24,#1b1433,#261b47,#120b24);

background-attachment:fixed;
overflow-x:hidden;

color:#f8ecff;
font-family:"Quicksand",sans-serif;
}

/ floating sparkles /

body::before{
content:"✦ ✧ 🦋 ✧ ✦ 🧚 ✦";
position:fixed;
top:10px;
left:0;
width:100%;
text-align:center;

font-size:1rem;
opacity:.5;

animation:floaties 10s ease-in-out infinite;

pointer-events:none;
z-index:9999;
}

@keyframes floaties{
0%{transform:translateY(0px);}
50%{transform:translateY(7px);}
100%{transform:translateY(0px);}
}

/ ═════════ PROFILE TOP BAR ═════════ /

.pp-top-bar{
background:
linear-gradient(
145deg,
rgba(255,255,255,.08),
rgba(255,255,255,.03)
) !important;

backdrop-filter:blur(18px);

border-bottom:
1px solid rgba(255,255,255,.1);

box-shadow:
0 0 25px rgba(190,145,255,.25);
}

.pp-top-bar-logo-name,
.pp-top-bar-logo-sub-name{
font-size:0;
}

.pp-top-bar-logo-name::after{
content:"✦ fairy forest ✦";

font-size:1.5rem;

font-family:"Cormorant Garamond",serif;

color:#ffeaff;

text-shadow:
0 0 10px rgba(255,255,255,.5),
0 0 20px rgba(210,170,255,.7);
}

/ ═════════ PROFILE CONTAINER ═════════ /

.profile-uc-background-flex{
background:
linear-gradient(
145deg,
rgba(255,255,255,.08),
rgba(255,255,255,.03)
) !important;

border-radius:28px;

border:1px solid rgba(255,255,255,.12);

backdrop-filter:blur(16px);

box-shadow:
0 0 30px rgba(195,145,255,.28);

position:relative;
overflow:hidden;

padding:24px;
}

.profile-uc-background-flex::before{
content:"";
position:absolute;
inset:-2px;

background:
linear-gradient(
120deg,

ffb8ff,

1
2
3
4
  #c5a3ff,
  #9de7ff,
  #ffb8ff
);

border-radius:30px;

opacity:.25;

z-index:-1;

filter:blur(20px);

animation:aura 8s linear infinite;
}

@keyframes aura{
0%{filter:hue-rotate(0deg) blur(20px);}
100%{filter:hue-rotate(360deg) blur(20px);}
}

.profile-uc-background-flex::after{
content:"🦋 ✦ 🧚 ✧";

position:absolute;

right:18px;
top:14px;

font-size:1.1rem;

opacity:.7;
}

/ ═════════ PROFILE TITLE ═════════ /

.profile-title-heading{
font-family:"Cormorant Garamond",serif;

font-size:3rem;

letter-spacing:2px;

color:#ffeaff;

text-shadow:
0 0 10px rgba(255,255,255,.5),
0 0 25px rgba(210,170,255,.7);
}

/ followers /

.profile-followers-count{
background:rgba(255,255,255,.06);

border:1px solid rgba(255,255,255,.1);

border-radius:18px;

padding:8px 18px;

color:#eddfff;

backdrop-filter:blur(10px);

box-shadow:
0 0 12px rgba(195,145,255,.2);
}

/ ═════════ AVATAR ═════════ /

.profile-avatar-container{
background:
linear-gradient(
145deg,
rgba(255,255,255,.08),
rgba(255,255,255,.03)
);

border-radius:50%;

padding:12px;

box-shadow:
0 0 30px rgba(205,160,255,.4);

position:relative;
}

.profile-avatar-container::before{
content:"";

position:absolute;
inset:-8px;

border-radius:50%;

border:2px dashed rgba(255,255,255,.18);

animation:spin 20s linear infinite;
}

@keyframes spin{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}

.profile-avatar{
border-radius:50%;

border:2px solid rgba(255,255,255,.18);

box-shadow:
0 0 20px rgba(255,255,255,.2);
}

/ ═════════ BUTTONS ═════════ /

.profile-uc-follow-button,
.pp-uc-options-menu{
background:
linear-gradient(
145deg,
rgba(255,255,255,.12),
rgba(255,255,255,.04)
) !important;

border:1px solid rgba(255,255,255,.15) !important;

border-radius:18px !important;

backdrop-filter:blur(12px);

box-shadow:
0 0 16px rgba(195,145,255,.25);

transition:.35s;
}

.profile-uc-follow-button:hover,
.pp-uc-options-menu:hover{
transform:translateY(-3px);

box-shadow:
0 0 24px rgba(220,180,255,.5);
}

.profile-uc-follow-text{
font-size:0;
}

.profile-uc-follow-text::after{
content:"✧ enter forest";

font-size:1rem;

color:#ffeaff;

font-family:"Cormorant Garamond",serif;
}

/ ═════════ SEARCH BAR ═════════ /

.profile-character-search-input-group{
background:
linear-gradient(
145deg,
rgba(255,255,255,.08),
rgba(255,255,255,.03)
);

border-radius:999px;

border:1px solid rgba(255,255,255,.1);

backdrop-filter:blur(14px);

box-shadow:
0 0 16px rgba(195,145,255,.18);
}

.profile-character-search-input-group::after{
content:"search enchanted souls...";

color:#ecd9ff;

font-family:"Cormorant Garamond",serif;
}

.pp-fl-search-input{
color:#fff !important;
}

/ ═════════ CHARACTER CARDS ═════════ /

.profile-character-card-wrapper{
margin:8px !important;

transition:.35s;
}

.profile-character-card-wrapper:hover{
transform:translateY(-6px);
}

.profile-character-card-stack{
background:
linear-gradient(
145deg,
rgba(255,255,255,.08),
rgba(255,255,255,.03)
);

border-radius:26px;

border:1px solid rgba(255,255,255,.12);

backdrop-filter:blur(16px);

box-shadow:
0 0 24px rgba(195,145,255,.25);

overflow:hidden;

position:relative;
}

.profile-character-card-stack::before{
content:"✦";

position:absolute;

top:12px;
left:14px;

color:#ffeaff;

opacity:.7;
}

.profile-character-card-stack::after{
content:"🧚";

position:absolute;

bottom:12px;
right:14px;

opacity:.7;
}

/ avatar /

.profile-character-card-avatar-image{
border-radius:22px !important;

border:2px solid rgba(255,255,255,.12) !important;

box-shadow:
0 0 18px rgba(210,170,255,.3);

transition:.35s;
}

.profile-character-card-wrapper:hover
.profile-character-card-avatar-image{
transform:scale(1.03);
}

/ character name /

.profile-character-card-name-box{
font-family:"Cormorant Garamond",serif !important;

font-size:1.5rem !important;

color:#ffeaff !important;

text-align:center;

text-shadow:
0 0 12px rgba(255,255,255,.35);
}

/ description /

.profile-character-card-description-markdown-container{
background:rgba(255,255,255,.05);

border-radius:18px;

border:1px solid rgba(255,255,255,.08);

color:#ecdfff !important;

line-height:1.6;

backdrop-filter:blur(10px);
}

/ tags /

.pp-cc-tags-item{
background:rgba(255,255,255,.08) !important;

border-radius:999px;

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

color:#ffeaff !important;

transition:.25s;
}

.pp-cc-tags-item:hover{
transform:scale(1.05);

background:rgba(255,255,255,.15) !important;
}

/ bottom bar /

.profile-character-card-box{
background:
linear-gradient(
145deg,
rgba(255,255,255,.08),
rgba(255,255,255,.03)
) !important;

border-top:
1px solid rgba(255,255,255,.08);
}

.profile-character-card-tokens-count{
color:#e9d7ff;
}

/ remove stars /

.profile-character-card-star,
.profile-character-card-star-line,
.profile-character-card-creator-name-link{
display:none !important;
}

/ chats ribbon /

.pp-cc-chats{
background:
linear-gradient(
45deg,

d7a8ff,

  #9de7ff
);

border-radius:999px;

padding:6px 14px;

color:white;

font-family:"Cormorant Garamond",serif;

box-shadow:
0 0 18px rgba(210,170,255,.45);
}

/ ═════════ SCROLLBAR ═════════ /

::-webkit-scrollbar{
width:8px;
height:8px;
}

::-webkit-scrollbar-track{
background:#1b1433;
}

::-webkit-scrollbar-thumb{
background:
linear-gradient(
to bottom,

ffb8ff,

  #bfa3ff
);

border-radius:999px;
}

/ ═════════ CUSTOM SECTIONS ═════════ /

.about-box,
.cute-widget,
.cute-drop{
background:
linear-gradient(
145deg,
rgba(255,255,255,.08),
rgba(255,255,255,.03)
);

border-radius:24px;

border:1px solid rgba(255,255,255,.1);

backdrop-filter:blur(14px);

box-shadow:
0 0 22px rgba(195,145,255,.22);
}

/ ═════════ MOBILE ═════════ /

@media screen and (max-width:768px){

.profile-title-heading{
font-size:2rem !important;
}

.profile-character-card-stack{
border-radius:20px;
}

}

</style>

<div class="about-box" style="padding:24px; margin-top:20px;">

<div style="
font-size:2.4rem;
text-align:center;
font-family:'Cormorant Garamond',serif;
color:#ffeaff;
text-shadow:0 0 18px rgba(255,255,255,.45);
margin-bottom:14px;
">

✦ enchanted fairy forest ✦

</div>

<div class="cute-widget" style="
padding:18px;
text-align:center;
margin-bottom:20px;
">

<div style="
letter-spacing:2px;
text-transform:uppercase;
font-size:.75rem;
color:#e7d3ff;
">

status

</div>

<div style="
margin-top:8px;
font-size:1rem;
color:#fff;
">

wandering through moonlit forests ♡

</div>

<div style="
margin-top:16px;
color:#dcb4ff;
">

♪ fairy lullaby

</div>

<div style="
width:100%;
height:7px;
background:rgba(255,255,255,.08);
border-radius:999px;
margin-top:10px;
overflow:hidden;
">

<div style="
width:45%;
height:100%;
background:linear-gradient(to right,#ffb8ff,#bfa3ff);
border-radius:999px;
"></div>

</div>

</div>

<div class="about-box" style="padding:20px;">

<div style="
font-size:1.4rem;
text-align:center;
margin-bottom:12px;
font-family:'Cormorant Garamond',serif;
color:#ffeaff;
">

🦋 about me 🦋

</div>

<div style="
max-height:170px;
overflow-y:auto;
line-height:1.7;
color:#ecdfff;
">

welcome to my enchanted little realm filled with glowing mushrooms, fairy wings, moonlit rivers and hidden magic ✧

the stars whisper softly through the trees while tiny fairies dance beneath the night sky.

stay awhile traveler ♡

</div>

</div>

</div>

Edit

Pub: 26 May 2026 17:40 UTC

Views: 89