Last updated: 11/30/2025

Alt Tag

Table of contents

Link to live preview
Link to bot full profile template
Link to Radiance's CSS portfolio (Other CSS templates avaliable + just showcase of my work)

Bot card preview

Alt Tag

The code

ALL OF IT, yes ALL OF IT needs to be pasted for it to work!

⎗
✓
<style>
/*🖤  ------------ BOT CARD SECTION ---------- 🖤 
  (Credit is REQUIRED if you are going to use this template, @missradiance ) */
/* ===== MAIN CARD CONTAINER ===== */
.pp-cc-wrapper, .pp-cc-wrapper>*:not(.css-1s5evre){
    background: linear-gradient(to bottom, #242424, black) !important;
    border: 2px solid white;
    border-radius: 1px;
    outline: 1px solid white;
    outline-offset: 2px;
}
/* ===== Lots of positioning for grid lol ===== */
.pp-cc-list-container{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
.pp-cc-wrapper{/*bot card sizing, i recommend not touching it */
    flex: 0 1 350px;
    width: 350px;
    height: 400px;
    overflow: hidden;
    position: relative;
}
.css-1s5evre a{
    display: contents;
}
.css-1s5evre{
    background: transparent; 
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: auto 1fr 1fr;
    gap: 0px;
    height: calc(100% - 5px);
}

/* ===== BOT NAME ===== */
.css-nlxhw4{
    grid-area: 1 / 1 / 2 / 3;
    display: flex;
    align-items: center; 
    justify-content: center;
    max-width: 100%;
    width: 100%;
    z-index: 5;
    padding: 0.5rem 0;
    background: white;
    position: relative;
}
.css-nlxhw4>div.pp-cc-name, .profile-character-card-name-box {
    color: black; 
    font-family: Montserrat;
    font-size: 17px;
}

/* ===== BOT NAME ===== */
.css-nlxhw4{
    grid-area: 1 / 1 / 2 / 3;
    display: flex;
    align-items: center; 
    justify-content: center;
    max-width: 100%;
    width: 100%;
    z-index: 5;
    padding: 0.5rem 0;
    background: white;
    position: relative;
}
.css-nlxhw4>div.pp-cc-name, .profile-character-card-name-box {
    color: black; 
    font-family: Montserrat;
    font-size: 17px;
}

.css-nlxhw4::after {
    content: 'Hover for details.';
    font-family: Montserrat;
    font-size: 0.6rem;
    color: white;
    background: rgb(0, 0, 0, 0.5);
    padding: 3px 10px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 100%);
    border: 1px solid white;
    border-top: none;
    z-index: 5;
    opacity: 1;
    transition: opacity 300ms ease;
}

.pp-cc-wrapper:hover .css-nlxhw4::after {
    opacity: 0;
}
/* Mobile */
@media (max-width: 768px) {/* Mobile vers of "hover for details" do NOT edit or change this*/
    .css-nlxhw4::after {
        content: 'Tap for details.';
    }
}

/* ===== SVG DECORATION TOP RIGHT ===== */
.css-nlxhw4::before {/* do not delete ANY of the clip path numbers, ik it looks like a lot but they're needed i swear */
    content: '';
    position: absolute;
    top: -1.1rem;
    right: -0.9rem;
    width: 150px;
    height: 150px;
    background: rgb(255, 255, 255, 0.3);
    z-index: 7;
    transform: rotate(105deg);
    clip-path: path('M50.375 29.5c1.475 1.65 2.925 3 3.175 3 .625 0 .575-1.375-.1-1.775-3.2-1.975-4.1-7.1-1.975-11.35 1.55-3.125 1.5-4.475-.15-5.65-1.4-.975-1.825-.925-1.825.225 0 1.2-1.275 2.25-2.25 1.875-.975-.375-.975-2.775 0-4.15 2.325-3.325 7.875-1.325 7.125 2.575-.3 1.6.375 1.6 1.4.025 2.925-4.45-4.8-8.05-8.95-4.15-4.55 4.325-3.175 11.95 3.55 19.375Zm66.2 2.55C129.9 36.65 140.3 21.25 130.5 11.475c-3.35-3.375-6.825-4.6-13.75-4.85-5.95-.2-4.95-.425-19.45 4.05-3.275 1.025-7.625 2-9.7 2.175-3.075.25-3.55.4-2.575.775 2 .775 8.9.05 13.725-1.4 15.9-4.825 21.225-4.975 27.825-.775 10.8 6.825 2.7 23.9-8.775 18.525-5.275-2.475-7.15-9.85-3.475-13.55 2.05-2.025 4.875-2.15 6.5-.25 1.95 2.275 0 5.1-2.65 3.875-1.65-.75-1.675-.725-1.675.725 0 3 4.7 4.975 6.7 2.8 4.75-5.275-2-12.7-8.8-9.7-8.175 3.625-6.8 15.075 2.175 18.175ZM46 30.675c3.325 2.9 5 3.9 5 3.05 0-.15-1.75-2.025-3.875-4.175-5.775-5.75-8.05-9.525-8.1-13.325C39 14.5 40.2 12.5 41.275 12.5s.875-.825-.375-1.725c-2.95-2.075-5.975-.025-4.525 3.05.55 1.15.65 1.85.3 2.2-.825.825-2.1 0-2.675-1.75C33.25 12 31.875 10.9 29.325 10.5l-2.175-.325.225 2.3C27.6 14.75 29.25 17 30.7 17c.35 0 1.05.45 1.55 1 1.375 1.525.3 2.425-1.85 1.625-2.65-1-3.975 1-2.7 4.1.9 2.175 1.3 2.2 2.4.275 1.975-3.475 6.35-1.625 15.9 6.675ZM61 35.85c6.45 2.05 11.925-2.975 7.775-7.125-3.15-3.15-6.375-.4-4.55 3.9.525 1.225-.875 1.65-2.775.85-3.575-1.475-5.575-8.15-3.6-11.975 1.3-2.525 4.15-2.525 4.15 0 0 1.95 3.2 1.55 4.7-.575 1.85-2.65-.9-6.425-4.675-6.425-2.425 0-2.3-.65.3-1.75 2.4-1 3.75-.55 6.825 2.225 4 3.65 5.7 4.275 7.625 2.775.925-.7.925-.775.1-1.275C74.7 15.175 77 12.95 79.35 14.1c3.65 1.8 3.95 5.85.35 5.175-2.825-.525-2.35 1.625 1.1 5.125 2.675 2.725 2.8 2.95 2.55 5-.275 2.625.5 2.6 1.825-.075 1.175-2.375 1.25-6.925.15-9.525-1.25-2.95-.7-2.775 3.275 1.1 4.525 4.375 6.675 5.35 8.625 3.925.725-.525.8-.85.35-1.675-.425-.8-.4-1.175.125-1.625 1.925-1.575 1.275-5.225-1.175-6.675-1.8-1.075-3.125-1.125-1.625-.075.675.475 1.1 1.3 1.1 2.15 0 4.025-4.325 3.35-12.75-1.975-10.2-6.475-19.625-6.6-25.6-.375C51.275 21.25 53.175 33.35 61 35.85Zm-34.4 2.4c1.025 1.325 2.775 1.625 4.425.725 1.45-.775 1.175-1.3-.825-1.65-3.775-.6-4.8-3.3-2.25-5.875 1.55-1.525 2.95-1.85 3.95-.85.95.95.725 1.4-1 2.125l-1.575.65 1.55.825c2.15 1.1 4.7 1 7.65-.25 3-1.3 5.025-1.025 7.9 1.05 2.1 1.525 3.075 1.85 3.075 1.05 0-1.55-11.075-7.775-14.8-8.325-6.95-1.05-12.025 5.55-8.1 10.525Zm26.275 1.2c1.9 1.125 3.625.1 3.625-2.15 0-1.3-2.25-2.475-3.475-1.825-1.3.7-1.4 3.25-.15 3.975ZM33.325 80.175c.725.725 1.6 1.325 1.95 1.325 1 0 3.425-1 3.75-1.55.2-.3.925-.15 1.85.375 1.275.75 1.65.775 2.325.225 2.075-1.725.05-5.65-5.025-9.825-2.575-2.1-2.75-2.325-1.425-2.025 4.525 1.075 7.1.95 9.675-.45 2.4-1.325 4.225-3.375 2.2-2.475-2.825 1.25-4.525.9-5.55-1.125-1.625-3.225-7.175-4.525-6.4-1.5.625 2.35-2.45 3.2-4.525 1.275-2.45-2.3-.85-5.9 1.9-4.3l1.45.825V58.275c0-2.925-1.15-4.875-3.675-6.225-2.4-1.3-3.05-6.05-1.075-8 .675-.7.725-.55.45 1.5-.5 3.7 3.475 6.2 6.95 4.375 2.125-1.125 2.625-3.825.825-4.275-.825-.225-1-.625-.875-2.05.5-5.675 10.75-4.95 13.1.925 1.05 2.65.625 3.675-1.4 3.25-3.5-.75-4.45-.6-5.275.85-2.125 3.775 3.4 6.05 6.7 2.75C58.4 44.2 47.35 34.075 36.7 38.05c-10.65 4-13.05 17.35-5.025 27.925 5.225 6.9 6.375 9.9 4.55 11.75-.975.95-1.125.95-2.85.05-1.9-.975-1.925.525-.05 2.4Zm4.45 18.95c.425 2.975 1 3.05 1.4.175C39.8 94.75 37.7 91.2 32 87.225c-7.6-5.325-8.5-9.275-3.25-14.3 5.375-5.15 3.65-8.25-2.3-4.15-6.025 4.175-4.4 11.475 4.35 19.5 5.125 4.725 6.35 6.6 6.975 10.85Zm1.5 30.65C48.175 133.1 56 126.3 56 115.3c0-6.75-1.35-9.875-8.975-20.75C44.25 90.6 41.275 85.9 40.4 84.1c-1.925-3.9-2.4-3.325-.9 1.15.725 2.2 2.95 6.05 6.725 11.675 3.1 4.65 6 9.525 6.475 10.875 3.825 11.1-1.45 20.9-10.8 20.05-10.05-.9-12.675-13.35-3.8-17.9 4.9-2.5 11.075.925 9.425 5.25-1.225 3.225-5 2.6-5.025-.825 0-1.825-1.075-1.775-2.7.175-3.125 3.7 1.125 8.075 5.6 5.75 7.6-3.95 3.375-14.75-5.525-14.175-12.125.775-12.6 19.2-.6 23.65Z');
    pointer-events: none;
}
.profile-character-card-name-box {
    color: black; 
    font-family: Montserrat;
    font-size: 17px;
    text-shadow: none;
}

/* ===== BOT IMAGE ===== */
.css-1q7rmf0 {
    position: absolute;
    top: 35px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    z-index: 3;
    transition: right 400ms ease;
}

.css-1q7rmf0::after {/*The shadow over the bot card image */
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, #242424, transparent);
    z-index: 1;
}
.pp-cc-avatar {/*The bot card image itself */
    border-radius: 0;
    filter: grayscale(1);/*Get rid of this if you want no grayscale */
    transition: filter 300ms ease;
    object-fit: cover;
    object-position: center top;
    width: 100%;
    height: 100%;
}
.pp-cc-wrapper:hover .pp-cc-avatar { /*The shadow over the bot card image */
    filter: grayscale(0);
}
.pp-cc-wrapper:hover .css-1q7rmf0 { /*Bot image sliding to the side on hover */
    right: 50%;
}

/* ===== DESCRIPTION ===== */
.css-199gcrh {
    grid-area: 2 / 2 / 3 / 3;
    margin: 0;
    max-height: 100%;
    height: 100%;
    overflow: hidden auto;
    z-index: 1;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 400ms ease, transform 400ms ease;
    padding: 0.5rem;
}
.pp-cc-wrapper:hover .css-199gcrh {
    opacity: 1;
    transform: translateX(0);
}
.pp-cc-description p { /* color of the description text */
  color: white;
  font-family: Montserrat;
}
/* ===== TAGS CONTAINER ===== */
.pp-cc-tags {
    grid-area: 3 / 2 / 4 / 3;
    position: relative;
    bottom: unset;
    margin: 0;
    max-height: 100%;
    height: 100%;
    overflow: hidden auto;
    z-index: 1;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 400ms ease 100ms, transform 400ms ease 100ms;
    padding: 0.5rem;
    padding-bottom: 1rem;
}
.pp-cc-wrapper:hover .pp-cc-tags {
    opacity: 1;
    transform: translateX(0);
}

.css-k1urot {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 100%;
    width: 100%;
}

/* ===== HIDDEN ELEMENTS ===== */
.pp-cc-star-line, .pp-cc-creator-name.css-1wqmh16,.css-nip9dx img,.css-xrg4vd img,.css-1awld45,.css-1cui3us,.css-5v5qgx img,.css-1wqmh16     { /* username, star, star line, all the fuckass decorations for event bots */
    display: none;
}

/* ===== BOTTOM BAR ===== */
.css-10cv7r2,.css-1c9wmts {
    position: absolute !important;
    bottom: -2px !important; 
    top: unset !important;
    height: 15px;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    background: black;
    box-sizing: border-box;
    padding: 0 0.9rem;
    margin: 0;
    font-size: 0.65rem;
    overflow: visible;
    border-top: 1px solid white;
}

/* Token count - left side */
.css-1c9wmts {
    left: 0;
    right: unset;
}

/* ===== SVG DECORATION BOTTOM LEFT ===== */
.css-1c9wmts::before {
    content: '';
    position: absolute;
    bottom: -0.6rem;
    left: -0.6rem;;
    width: 150px;
    height: 150px;
    background: rgb(255, 255, 255, 0.3);
    z-index: 7;
    transform: rotate(270deg);
    clip-path: path('M50.375 29.5c1.475 1.65 2.925 3 3.175 3 .625 0 .575-1.375-.1-1.775-3.2-1.975-4.1-7.1-1.975-11.35 1.55-3.125 1.5-4.475-.15-5.65-1.4-.975-1.825-.925-1.825.225 0 1.2-1.275 2.25-2.25 1.875-.975-.375-.975-2.775 0-4.15 2.325-3.325 7.875-1.325 7.125 2.575-.3 1.6.375 1.6 1.4.025 2.925-4.45-4.8-8.05-8.95-4.15-4.55 4.325-3.175 11.95 3.55 19.375Zm66.2 2.55C129.9 36.65 140.3 21.25 130.5 11.475c-3.35-3.375-6.825-4.6-13.75-4.85-5.95-.2-4.95-.425-19.45 4.05-3.275 1.025-7.625 2-9.7 2.175-3.075.25-3.55.4-2.575.775 2 .775 8.9.05 13.725-1.4 15.9-4.825 21.225-4.975 27.825-.775 10.8 6.825 2.7 23.9-8.775 18.525-5.275-2.475-7.15-9.85-3.475-13.55 2.05-2.025 4.875-2.15 6.5-.25 1.95 2.275 0 5.1-2.65 3.875-1.65-.75-1.675-.725-1.675.725 0 3 4.7 4.975 6.7 2.8 4.75-5.275-2-12.7-8.8-9.7-8.175 3.625-6.8 15.075 2.175 18.175ZM46 30.675c3.325 2.9 5 3.9 5 3.05 0-.15-1.75-2.025-3.875-4.175-5.775-5.75-8.05-9.525-8.1-13.325C39 14.5 40.2 12.5 41.275 12.5s.875-.825-.375-1.725c-2.95-2.075-5.975-.025-4.525 3.05.55 1.15.65 1.85.3 2.2-.825.825-2.1 0-2.675-1.75C33.25 12 31.875 10.9 29.325 10.5l-2.175-.325.225 2.3C27.6 14.75 29.25 17 30.7 17c.35 0 1.05.45 1.55 1 1.375 1.525.3 2.425-1.85 1.625-2.65-1-3.975 1-2.7 4.1.9 2.175 1.3 2.2 2.4.275 1.975-3.475 6.35-1.625 15.9 6.675ZM61 35.85c6.45 2.05 11.925-2.975 7.775-7.125-3.15-3.15-6.375-.4-4.55 3.9.525 1.225-.875 1.65-2.775.85-3.575-1.475-5.575-8.15-3.6-11.975 1.3-2.525 4.15-2.525 4.15 0 0 1.95 3.2 1.55 4.7-.575 1.85-2.65-.9-6.425-4.675-6.425-2.425 0-2.3-.65.3-1.75 2.4-1 3.75-.55 6.825 2.225 4 3.65 5.7 4.275 7.625 2.775.925-.7.925-.775.1-1.275C74.7 15.175 77 12.95 79.35 14.1c3.65 1.8 3.95 5.85.35 5.175-2.825-.525-2.35 1.625 1.1 5.125 2.675 2.725 2.8 2.95 2.55 5-.275 2.625.5 2.6 1.825-.075 1.175-2.375 1.25-6.925.15-9.525-1.25-2.95-.7-2.775 3.275 1.1 4.525 4.375 6.675 5.35 8.625 3.925.725-.525.8-.85.35-1.675-.425-.8-.4-1.175.125-1.625 1.925-1.575 1.275-5.225-1.175-6.675-1.8-1.075-3.125-1.125-1.625-.075.675.475 1.1 1.3 1.1 2.15 0 4.025-4.325 3.35-12.75-1.975-10.2-6.475-19.625-6.6-25.6-.375C51.275 21.25 53.175 33.35 61 35.85Zm-34.4 2.4c1.025 1.325 2.775 1.625 4.425.725 1.45-.775 1.175-1.3-.825-1.65-3.775-.6-4.8-3.3-2.25-5.875 1.55-1.525 2.95-1.85 3.95-.85.95.95.725 1.4-1 2.125l-1.575.65 1.55.825c2.15 1.1 4.7 1 7.65-.25 3-1.3 5.025-1.025 7.9 1.05 2.1 1.525 3.075 1.85 3.075 1.05 0-1.55-11.075-7.775-14.8-8.325-6.95-1.05-12.025 5.55-8.1 10.525Zm26.275 1.2c1.9 1.125 3.625.1 3.625-2.15 0-1.3-2.25-2.475-3.475-1.825-1.3.7-1.4 3.25-.15 3.975ZM33.325 80.175c.725.725 1.6 1.325 1.95 1.325 1 0 3.425-1 3.75-1.55.2-.3.925-.15 1.85.375 1.275.75 1.65.775 2.325.225 2.075-1.725.05-5.65-5.025-9.825-2.575-2.1-2.75-2.325-1.425-2.025 4.525 1.075 7.1.95 9.675-.45 2.4-1.325 4.225-3.375 2.2-2.475-2.825 1.25-4.525.9-5.55-1.125-1.625-3.225-7.175-4.525-6.4-1.5.625 2.35-2.45 3.2-4.525 1.275-2.45-2.3-.85-5.9 1.9-4.3l1.45.825V58.275c0-2.925-1.15-4.875-3.675-6.225-2.4-1.3-3.05-6.05-1.075-8 .675-.7.725-.55.45 1.5-.5 3.7 3.475 6.2 6.95 4.375 2.125-1.125 2.625-3.825.825-4.275-.825-.225-1-.625-.875-2.05.5-5.675 10.75-4.95 13.1.925 1.05 2.65.625 3.675-1.4 3.25-3.5-.75-4.45-.6-5.275.85-2.125 3.775 3.4 6.05 6.7 2.75C58.4 44.2 47.35 34.075 36.7 38.05c-10.65 4-13.05 17.35-5.025 27.925 5.225 6.9 6.375 9.9 4.55 11.75-.975.95-1.125.95-2.85.05-1.9-.975-1.925.525-.05 2.4Zm4.45 18.95c.425 2.975 1 3.05 1.4.175C39.8 94.75 37.7 91.2 32 87.225c-7.6-5.325-8.5-9.275-3.25-14.3 5.375-5.15 3.65-8.25-2.3-4.15-6.025 4.175-4.4 11.475 4.35 19.5 5.125 4.725 6.35 6.6 6.975 10.85Zm1.5 30.65C48.175 133.1 56 126.3 56 115.3c0-6.75-1.35-9.875-8.975-20.75C44.25 90.6 41.275 85.9 40.4 84.1c-1.925-3.9-2.4-3.325-.9 1.15.725 2.2 2.95 6.05 6.725 11.675 3.1 4.65 6 9.525 6.475 10.875 3.825 11.1-1.45 20.9-10.8 20.05-10.05-.9-12.675-13.35-3.8-17.9 4.9-2.5 11.075.925 9.425 5.25-1.225 3.225-5 2.6-5.025-.825 0-1.825-1.075-1.775-2.7.175-3.125 3.7 1.125 8.075 5.6 5.75 7.6-3.95 3.375-14.75-5.525-14.175-12.125.775-12.6 19.2-.6 23.65Z');
    pointer-events: none;
}

.pp-cc-tokens-count {
  color: white;
  text-shadow: none;
  font-family: Montserrat;
}
/* Chat count - right side */
.css-10cv7r2 {
    right: 0;
    left: unset;
}

/* Ribbon styling */
.pp-cc-ribbon,._content_1chl9_11 {
    position: static !important;
    clip-path: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.pp-cc-chats {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ===== LIMITLESS TAG ===== */
.css-123m5uu {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    order: -1;
}
.pp-tag-limitless {
    width: 100%;
    display: block;
    text-align: center;
    font-size: 0; 
    position: relative;
    background: black !important; 
    border: 1px solid white !important;
    border-radius: 1px;
    padding: 0.25rem 0;
}
.pp-tag-limitless:hover { /* so it doesn't scale down on hover */
  transform: scale(1) !important;
}

span.pp-tag-limitless::after {
    content: '• LIMITLESS •'; /* Change this to whatever lol */
    font-size: 0.7rem;
    font-family: Montserrat;
    position: absolute;
    left: 0;
    right: 0;
    opacity: 0;
    transition: opacity 400ms ease;
    color: white;
}

.pp-cc-wrapper:hover span.pp-tag-limitless::before {
    opacity: 0;
}

.pp-cc-wrapper:hover span.pp-tag-limitless::after {
    opacity: 1;
}

/* ===== REGULAR TAGS (two-column layout) ===== */
.pp-cc-tags-wrap-regular,
.pp-cc-tags-wrap-custom,
.css-1yp4ln {
    flex: 0 0 calc(50% - 2px);
    max-width: calc(50% - 2px);
    overflow: hidden;
}
.pp-cc-tags-item,.pp-cc-tags-regular,.pp-cc-tags-custom {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    box-sizing: border-box; 
}
.pp-cc-tags-item{/* Tags styling */
  color: black;
  background-color: white;
  border: 1px solid white;
  border-radius: 1px
}
.pp-cc-tags-item:hover {/*Tags on hoverrr */
  color: white;
  background-color: #242424;
  border: 1px solid white;
  transform: scale(0.9)
}

.pp-cc-tags-regular::first-letter {/* This gets rid of the emoji on the tags credit to @tigerdropped */
    font-size: 0;
}

.pp-tag-deaddove { font-size: 0; }/* Dead dove get rid of emojis :3 */
.pp-tag-deaddove::after {
    content: "Dead Dove";
    font-size: 0.75rem;
}

</style>
Edit

Pub: 29 Nov 2025 01:31 UTC

Edit: 30 Nov 2025 20:55 UTC

Views: 1507