Bot Card

Bot card preview text

<style>
.css-96l1id {
color: COLOR;
}
</style>

Note: changes the color of the preview text on the bot card, aka the character bio that is being previewed on the bot card. Does not change the color of the text on the actual bot page.Change COLOR to your desired hexcode, rgb/rgba, or color name

Example:

Bot card background color, gradient or image/gif

Note: Go to the Class ID list to see the different class IDs for the bot cards.

For Gradient

<style>
.css-1s5evre {
background: GRADIENT !important;}
</style>

Replace

 GRADIENT...

... with linear-gradient -similar to the original gradient pattern of bot cards reference for linear gradient

... or radial-gradient -colors begin appearing from the middle reference for radial gradient

You may also refer to the Gradient Patterns for specific patterns.

For Solid Color

<style>
.css-1s5evre {
background-color: COLOR;
}
</style>

Replace

 COLOR with the word of the color, a specific hex code, or rgb.

Examples:

For Image/Gif Background

<style>
.css-1s5evre {
background-image: url('LINK');
}
</style>

Example:

Transparent bot card background

NOTE: this code is known to not work most of the time, likely due to the class IDs. I highly recommend to Inspect Element and check if the class IDs match the ones below. If they do not, replace the class IDs listed below with the ones for your bot cards.Credits to Silverado, Ikyokeye for the original code, and Crowbirdie for the new version.

<style>
.css-0 { background: rgba(1, 1, 1, 0) !important;} /*&#32;sets css-0 as transparent; removes gradients*/
@media screen and (min-width: 48em) {
}
</style>
<style>
/*bot card general color*/
.css-12vfojg {
background: transparent;
}
.css-dltla {
background: transparent;
}
.css-1jf56se {
background: transparent;
}
.css-1s5evre {
border: none;
border-radius: 0;
}
</style>

Example

Bot Card Custom Border

NOTE: This requires making .css-0 transparent. This will remove the default gradient and borders of the profile card, Public Characters box, bot card, and tags menu.

<style>
.css-0 { background: rgba(1, 1, 1, 0) !important;} /* sets css-0 as transparent. Remove if this was already previously set/unneeded */
.css-1s5evre {
border-width: NUMBERpx;
border-style: STYLE;
border-color: COLOR;
}
</style>

Change

 COLOR to any color. hexcode or rgba/rgb.

Change NUMBER to whatever thickness you want border to be.

Change STYLE to whatever style you want. Use this w3school page as a reference for this.

Credits to Ikyokeye for the previous code.

No Round Corners for Bot Cards

Credits to Maddieismystar

<style>
.css-1jf56se, .css-dltla, .css-19n2nzy, .css-0 {
border-radius: 0px; }
</style>

NOTE / EXPLANATION: .css-0 also needs to be affected IF you use .css-0 to change bot card borders.

Example:

Bot Card Specific Overlays/Filters

solid color (whole bot card, including image)

<style>
.css-1jf56se {
background: COLOR !important;
z-index: 10;
opacity: OPACITY;}
</style>

Credits to ikyokeye

Replace COLOR with the word of the color, a specific hex code, or rgb.

And replace OPACITY with a value from 0 to 1.0 (other values are in decimal; 0.1 to 0.9). The lower the value, the more transparent it is.

gradient (whole bot card, including image)

<style>
.css-0 {
background: GRADIENT !important;
z-index: 10;
opacity: OPACITY;}
</style>

Replace GRADIENT...

... with linear-gradient -similar to the original gradient pattern of bot cards reference for linear gradient

... or radial-gradient -colors begin appearing from the middle reference for radial gradient

And replace OPACITY with a value from 0 to 1.0 (other values are in decimal; 0.1 to 0.9). The lower the value, the more transparent it is.

Example:

Chat Count Ribbon Color

Credits to Iorveths

<style>.css-wexxj8 {background: COLOR/GRADIENT !important;}</style>
<div class="content css-wexxj8"></div>

Replace

 COLOR with the word of the color, a specific hex code, or rgb.

OR

Replace GRADIENT...

... with linear-gradient -similar to the original gradient pattern of bot cards reference for linear gradient

... or radial-gradient -colors begin appearing from the middle reference for radial gradient

Changing the Star in Bot Cards

Unfortunately, the original code for this is now obsolete as url() has been disabled. 

However, you can still change the color of the star or remove it altogether.

Credits to Maddieismystar for the original code posted here.

For changing the star's color, you can do so by using the filter property. Here's an example that turns makes the star gold:

.css-hl99y6 {
filter: brightness(0) saturate(100%) invert(76%) sepia(76%) saturate(651%) hue-rotate(357deg) brightness(101%) contrast(104%); }

You can use this generator to generate a value based on a color you feed it.

To completely remove the star, just give it the visibility property:

.css-hl99y6 {
visibility: hidden;

Updated on: 02/08/2025