✦ 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 ♡





✧ 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:
and replace it with your own title ♡
✦ recommended fonts
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,
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,
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,
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>