Images

Image overlays/filters (for all images or for bot images only, with hover action)

The codes displayed below have the automatic hover feature, meaning that the overlay will stay on the elements unless you hover your cursor over it.

Credits to Iorveths

te:** if you don't want the filter to disappear upon hovering, delete the section of the code labeled HOVER ACTION. For the value FILTER, check this page to figure out how to add specific filters.

all images (including profile picture, bot image, images located in profile card)

<style>
/* FILTER CODE */
img{
filter: FILTER(100%);
-webkit-filter: FILTER(100%);
-webkit-transition: all 0.2s ease;
}
/* HOVER ACTION */
img:hover{
filter: none;
-webkit-filter: none;
transition: 0.2s ease;
}
</style>

bot image only

<style>
/* FILTER CODE */
.css-1yg1q7c{
filter: FILTER(100%);
-webkit-filter: FILTER(100%);
-webkit-transition: all 0.2s ease;
}
/* HOVER ACTION */
.css-1yg1q7c:hover{
filter: none;
-webkit-filter: none;
transition: 0.2s ease;
}
</style>

Image in rows/columns (putting content in tables)

This can be useable for anything other than images.

This code makes it possible to put images next to each other on the profile card, essentially making rows. The example below is taken from Iorveths' profile (profile linked after the code)

Credits to Iorveths

<div class="row">
<div class="column">
HTML CODES FOR IMAGES/GIFS
</div>
<div class="column">
HTML CODES FOR IMAGES/GIFS
</div>
</div>
<style>
/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}
/* (optional) Responsive design for mobile devices */
@media screen and (max-width: 600px) {
.column {
width: 100%; /* Full width on small screens */
}
}
</style>

Replace HTML CODES FOR IMAGES/GIFS with the HTML code that displays images on your profile card. You can access the code of images/gifs you have already uploaded before by opening the </> Source Code in the text editor. You may also use the code you used for clickable images, or go to this site that generates image code for you.

Image with fading parts (code default written for bot images)

Credits to Maddieismystar

<style>
.css-1yg1q7c{
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black, transparent);
}
</style>

If you want to decrease the faded part, add more black like so:

(black, black, black, transparent)For more info on messing around with the gradient property, look here

• Image Masks Using Clip-Path

The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset). Similar to doing masks, however this involves creating your own shapes.

(This is an alternate to doing image masks as url() has been disabled.)

To start, go to this page. This page is a generator and provides you a code for a shape. You are also able to use this page to create your own shapes.

en you form your shape, a code for it is generated here:

u can then include it in your code like so:

<class id> {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

For class IDs, go here!

These should work for both bot images and your profile pfp.

Updated on: 01/08/2025