rushed thumb

CSS Codes for Chess.com!

Updated: Dec 30, 2025, 5:32 AM | 29

heyoo so alot of people have been asking me for the codes for my chess.com tricks thread and i think it's time to make a blog for it <3 this is going to be lengthy so if you wanna go back up, just click on the back to top button at the bottom! (if you're on light mode you can't see it, another reason why light mode sucks </3) the thumb took 5 mins btw... so don't judge... Back to Top

this is basix css skills, so yeah, just an intro to css if you're a newbie :>

oh gosh how long is this gonna take: it took 5 hours </3

i got the back to top thing from https://www.chess.com/blog/DocSimooo/html-codes-for-chess-blogging, please check it out, it also has some codes which i did not include here ^^

Here's a playlist I love listening to that you can also listen to while reading this long blog! All hail Valley <3:

Contents :0

Gradient Text ✧.* Notification Message ✧.* Banner ✧.* Coloured Text (Colours not found in cc formatting) ✧.* Glowing Text ✧.* Collapsible Menu ✧.* Checkbox ✧.* Dividers ✧.* Columns ✧.* Buttons ✧.* Table ✧.* Shadow Text ✧.* Outline Text ✧.* Marquee ✧.* Back To Top Button ✧.* Anchors ✧.* Glassmorphism Card ✧.* Spoiler Text ✧.* Hover Highlight ✧.* Hover Glow ✧.* hover me ✧.* Hover Colour Change

How to insert the code!

being formal is hard lol. anyway, before we get into the specifics, you needa know how to insert codeee! so, tap the video button. there will be an "embed" at the side, click on that and insert the code in the text box! done <3

Stuff you needa know:

EVERYTHING WITH ALL THOSE [ ] YOU HAVE TO EDIT YOURSELF.

[insert text here] - basixally what text you wanna put

[change to desired HEX code] - find the HEX code of the colour you wanna use, copy and paste after the hashtag. OR you can just put the colour, but it might not be the variant you want. so like, "blue" or "green", don't put like "dusty pink", ain't no way they have that in css

[change to direction you wanna align it to] - yk how the text goes to the side and stuff? yeah it's called text alignment. use any of these three: left, right or centre.

also! for the padding, its like how thick the back is, you can change that, i'm lwk too lazy to put a [change to desired px]

plz remember that all of these are just the ground basics for css, and more stuff can be added to it, like for checkboxes you can also make it glow. i'm not adding everything, but most of the decorative stuff is covered here, you can take a part from another code to make it even cooler

so.... yeah! have fun <33

Gradient Text

So! I'm just gonna go straight to the code, and this will be same for all the other sections <3.

Code:

[insert text here]

</span>

⋆｡˚ ☽˚｡⋆

Example:

Gradient Text Example

⋆｡˚ ☁︎ ˚｡⋆

Alternatively, you can also use https://www.cssportal.com/css-text-gradient-generator/ to create your own custom gradient, if you don't want to manually enter the hex codes. You change the HEX codes by changing #ff0, #f0f, #0ff, find the HEX code for your preferred colour and replace the current one with your new one!

Notification Message

Code:

[insert text here]

</div>

⋆｡˚ ☽˚｡⋆

Example:

Notification Message Example

⋆｡˚ ☁︎ ˚｡⋆

You can change the colour for everything, for the vertical line down, change the HEX after solid, for the background, after the background, and the text colour, after color.

Banner

Code:

Solid Colour:

<div style="
padding: 12px;
text-align: [change to direction you want it to align to];
font-size: 20px;
color: white;
border-radius: 6px;
background-color: #[change to desired HEX code];
">
[insert text here]
</div>

Diagonally Checkered Banner:

<div style="

padding: 12px;

text-align: [change to direction you want it to align to];

font-size: 20px;

border-radius: 6px;

color: #[change to desired HEX code];

background:

repeating-linear-gradient(

45deg,

#[change to desired HEX code] 0 15px,

#[change to desired HEX code] 15px 30px

);

[insert text here]

</div>

Grid Banner:

<div style="
padding: 12px;
text-align: [change to direction you want it to align to];
font-size: 20px;
color: white;
border-radius: 6px;
background:
linear-gradient([change to desired HEX code] 1px, transparent 1px),
linear-gradient(90deg, [change to desired HEX code] 1px, transparent 1px),
#1f2937;
background-size: 20px 20px;
">
[insert text here]
</div>

Stripes Banner:

<div style="
padding: 12px;
text-align: [change to direction you want it to align to];
font-size: 20px;
color: white;
border-radius: 6px;
background:
repeating-linear-gradient(
0deg,
[change to desired HEX code] 0 20px,
[change to desired HEX code] 20px 40px
);
">
[insert text here]
</div>

Polka Dots Banner:

<div style="
padding: 12px;
text-align: [change to direction you want it to align to];
font-size: 20px;
color: [change to desired HEX code];
border-radius: 6px;
background:
radial-gradient([change to desired HEX code] 20%, transparent 21%) 0 0 / 20px 20px,
[change to desired HEX code];
">
[insert text here]
</div>

Zigzag Banner:

<div style="
padding: 12px;
text-align: [change to direction you want it to align to];
font-size: 20px;
color: white;
border-radius: 6px;
background:
linear-gradient(135deg, transparent 75%, [change to desired HEX code] 75%) 0 0 / 20px 20px,
linear-gradient(225deg, transparent 75%, [change to desired HEX code] 75%) 0 0 / 20px 20px,
[change to desired HEX code];
">
[insert text here]</div>

Noise Texture Banner:

<div style="
padding: 12px;
text-align: [change to direction you want it to align to];
font-size: 20px;
color: white;
border-radius: 6px;
background:
repeating-radial-gradient(circle at 0 0,
rgba(255,255,255,.1) 0 1px,
transparent 1px 3px),
[change to desired HEX code];
">
[insert text here]
</div>

⋆｡˚ ☽˚｡⋆

Example:

Noise

ZigZag

Diagonally Checkered

Solid

Grid

Stripes

Polka Dots

⋆｡˚ ☁︎ ˚｡⋆

Yeah, so there's like alotta patterns, if you want more, just search it up <3

Coloured Text

Code:

<p style="color: #[insert desired HEX code];">[insert text here]</p>

⋆｡˚ ☽˚｡⋆

Example:

i don't like red cuz it means wrong :[

⋆｡˚ ☁︎ ˚｡⋆

If you wanna add a background, add background-color: #[insert desired HEX code]; padding: 20px; :>

Glowing Text

Code:

<p style="

color: #[change to desired HEX code];

text-shadow: 0 0 5px #[change to desired HEX code], 0 0 10px #[change to desired HEX code], 0 0 20px #[change to desired HEX code]; [try to make the hex codes all the same]

[insert text here]

</p>

Outlined Glowing Text

<h3 style="
color: transparent;
-webkit-text-stroke: 2px [change to desired HEX code];
text-shadow: 0 0 5px [change to desired HEX code], 0 0 10px [change to desired HEX code], 0 0 20px [change to desired HEX code];
font-size: 60px;
">
[insert text here]
</h1>

⋆｡˚ ☽˚｡⋆

Example:

Glowing Text Example :0

Outlined Neon

⋆｡˚ ☁︎ ˚｡⋆

yeah i think it's kinda cool imo, it's pretty.. It's more of like pixlr e drop shadow, then blur a hella lot

Collapsible Menu

Code:

<summary> [insert the text, like the one at the top] </summary>

[insert the text, which only appears after the top text is opened]

</details>

⋆｡˚ ☽˚｡⋆

Example:

[insert the text, like the one at the top]

[insert the text, which only appears after the top text is opened]

⋆｡˚ ☁︎ ˚｡⋆

yeah, so if you want the opened text to also open, after the first text, repeat the code and end before the og </summary>

Checkbox

Code:

<input type="checkbox" id="[insert the text for id here]">[insert text here]<label for="[repeat the text for id]"></label>

⋆｡˚ ☽˚｡⋆

Example:

Dove spent at least one hour on this blog

⋆｡˚ ☁︎ ˚｡⋆

yeah so if you read the stuff you needa know part, you prolly can add glowy stuff to this too, you can take part of the glowing text code to put here :>>

Dividers

Codes:

Gradient Divider

Dashed Divider

Dotted Divider

Vertical Divider

Candy Divider

Double Lines

⋆｡˚ ☽˚｡⋆

Example:

⋆｡˚ ☁︎ ˚｡⋆

yeh its just to make your stuff look fancy loll

Columns

Code:

Left column

</div>

Right column

</div>

⋆｡˚ ☽˚｡⋆

Example:

Left column

Right column

⋆｡˚ ☁︎ ˚｡⋆

So! you can also change the gap, the smaller the px, the smaller the gap!

Buttons

Code:

Gradient Button

<button style="
background: linear-gradient(to right, [change to desired HEX code], [change to desired HEX code]);
color: white;
padding: 12px 20px;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
">
[insert text here]
</button>

Hover Button

<button style="
background-color: [change to desired HEX code];
color: white;
padding: 12px 20px;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
transition: transform 0.2s;
" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'">
[insert text here]
</button>

Outline Button

<button style="
background: transparent;
color: [change to desired HEX code];
padding: 12px 20px;
border: 2px solid [change to desired HEX code];
border-radius: 8px;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
" onmouseover="this.style.backgroundColor='[change to desired HEX code]'; this.style.color=[change to desired HEX code]';" onmouseout="this.style.backgroundColor='transparent'; this.style.color='[change to desired HEX code]';">
[insert text here]
</button>

Neon Button

<button style="
background-color: [change to desired HEX code];
color: [change to desired HEX code];
padding: 12px 20px;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
box-shadow: 0 0 8px [change to desired HEX code], 0 0 16px [change to desired HEX code];
transition: 0.3s;
" onmouseover="this.style.boxShadow='0 0 12px [change to desired HEX code], 0 0 24px [change to desired HEX code]';" onmouseout="this.style.boxShadow='0 0 8px [change to desired HEX code], 0 0 16px [change to desired HEX code]';">
[insert text here]
</button>

3D Button

<button style="
background-color: [change to desired HEX code];
color: white;
padding: 12px 20px;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
box-shadow: 3px 3px 0 [change to desired HEX code];
transition: 0.2s;
" onmouseover="this.style.transform='translate(-2px,-2px)'; this.style.boxShadow='5px 5px 0 [change to desired HEX code]';" onmouseout="this.style.transform='translate(0,0)'; this.style.boxShadow='3px 3px 0 [change to desired HEX code]';">
[insert text here]
</button>

HOW TO LINK THE BUTTON TO SOMETHING

Use code:

<a href="[insert link here]" target="_blank">
[insert button code here]
</a>

⋆｡˚ ☽˚｡⋆

Example:

⋆｡˚ ☁︎ ˚｡⋆

Lowkey a bit too lazy to change everything... but I did it anyway....

Table

Code:

<th style="padding:6px;">[insert text here]</th>

</tr> <tr style="background:[change to desired HEX code]; [change to desired HEX code];">

<td style="padding:6px;">[insert text here]</td>

</tr>

</table>

⋆｡˚ ☽˚｡⋆

Example:

Who?	Why?
Dove!	Bored!

⋆｡˚ ☁︎ ˚｡⋆

yeah why did i do this...

Shadow Text

Code:

<p style="
color: [change to desired HEX code];
text-shadow: 2px 2px 0 #fad0c4, 4px 4px 0 [change to desired HEX code];
font-size: 36px;
">
[insert text here]
</p>

⋆｡˚ ☽˚｡⋆

Example:

3D Shadow Text

⋆｡˚ ☁︎ ˚｡⋆

um yes!

Outline Text

Code:

<h1 style="
color: transparent;
-webkit-text-stroke: 2px [change to desired HEX code;
font-size: 40px;
">
[insert text here]
</h1>

⋆｡˚ ☽˚｡⋆

Example:

Outlined Text

⋆｡˚ ☁︎ ˚｡⋆

uhhhh yeah!

Marquee (Text)

Code:

Normal Marquee (scroll left)

<marquee behavior="scroll" direction="left" scrollamount="5" style="
font-size: 24px;
color: [change to desired HEX code];
">
[insert text here]
</marquee>

Normal Marquee (scroll right)

<marquee behavior="scroll" direction="right" scrollamount="5" style="
font-size: 28px;
color: [change to desired HEX code];
font-weight: bold;
">
[insert text here]
</marquee>

Vertical Scroll Up Marquee

Bouncing Marquee

<marquee behavior="alternate" scrollamount="20" style="
font-size: 28px;
color: [change to desired HEX code];
font-weight: bold;
">
[insert text here]
</marquee>

Glowing Text Marquee

<marquee behavior="scroll" direction="left" scrollamount="4" style="
font-size: 32px;
color: [change to desired HEX code];
font-weight: bold;
text-shadow: 0 0 5px [change to desired HEX code], 0 0 10px[change to desired HEX code], 0 0 20px [change to desired HEX code];
">
[insert text here]
</marquee>

⋆｡˚ ☽˚｡⋆

Example:

Right Marquee Left Marquee Hey!!
This is the...
Vertical Scrolling Up Marquee!
So slay, I know <3

Bouncing Marquee Glowing Marquee ⋆｡˚ ☁︎ ˚｡⋆

You can change how fast it goes by the scroll amount part, I put all as 10 :>

Back to Top

Code:

<a href="#top" style="background-color: [change to desired HEX colour]; color: [change to desired HEX colour]; padding: 10px 20px; text-align: [change to direction you wanna align it too]; border-radius: 5px; text-decoration: none; position: fixed; bottom: 10px; right: 10px;"> [insert text here]</a>

⋆｡˚ ☽˚｡⋆

Example:

The Back to Top button below :>

⋆｡˚ ☁︎ ˚｡⋆

For my own button, I added Gradient to the text, made the button diagonally checkered, and added a black shadow. I would lowkey change it to white, maybe.

Anchors

Code:

<a id="[insert the name you want for the id]">[insert text here]</a>

insert the code in the embed, and for the text where you link it, click the link button, choose anchors, and its id

⋆｡˚ ☽˚｡⋆

Example:

Everything I've been using to link my sections

⋆｡˚ ☁︎ ˚｡⋆

Glassmorphism Card

Code:

<div style="
background: rgba(255,255,255,0.15);
backdrop-filter: blur(10px);
padding:20px;
border-radius:12px;
border:1px solid rgba(255,255,255,0.3);
color:white;
">
[insert text here]
</div>

⋆｡˚ ☽˚｡⋆

Example:

Glass :0

⋆｡˚ ☁︎ ˚｡⋆

Spoiler Text

Code:

<span style="
filter: blur(6px);
transition: 0.3s;
" onmouseover="this.style.filter='blur(0)'" onmouseout="this.style.filter='blur(6px)'">
[insert spoiler text]
</span>

⋆｡˚ ☽˚｡⋆

Example:

[insert spoiler text]

⋆｡˚ ☁︎ ˚｡⋆

hover over it to see!

Hover Highlight

Code:

<span style="
background: linear-gradient(transparent 60%, [change to desired HEX code] 60%);
transition: 0.3s;
"
onmouseover="this.style.background='linear-gradient(transparent 30%, [change to desired HEX code] 30%)'"
onmouseout="this.style.background='linear-gradient(transparent 60%, [change to desired HEX code] 60%)'">
[insert text here]
</span>

⋆｡˚ ☽˚｡⋆

Example:

[insert text here]

⋆｡˚ ☁︎ ˚｡⋆

Hover over it so it fully highlights!

Hover Glow

Code:

<span style="
transition: 0.3s;
"
onmouseover="this.style.textShadow='0 0 10px [change to desired HEX code]'"
onmouseout="this.style.textShadow='none'">
[insert text here]
</span>

⋆｡˚ ☽˚｡⋆

Example:

[insert text here]

⋆｡˚ ☁︎ ˚｡⋆

hover over it for it to glow <33

Secret Message

Code:

<span
onmouseover="this.innerText='[insert text you see after hovering]'"
onmouseout="this.innerText='[insert text you see]'">
[insert text here]
</span>

⋆｡˚ ☽˚｡⋆

Example:

hover me

⋆｡˚ ☁︎ ˚｡⋆

hover over it for it to change message~~

Hover Colour Change

<span style="transition:0.3s;"
onmouseover="this.style.color='[insert desired HEX code]'"
onmouseout="this.style.color='inherit'">
[insert text here]
</span>

⋆｡˚ ☽˚｡⋆

Example:

[insert text here]

⋆｡˚ ☁︎ ˚｡⋆

hover over it for it to change colour ^^

ITS THE END OMG

i hope you enjoyed the blog <3 and the song ofc (all hail valley) it's very long, i apologise SO MUCH for that...

hover over me and the last sentence!

OKAY BYEEEEEEEEEEEEEEEEEEEEEEEEEYAA

CSS Codes for Chess.com!

Outlined Neon

Outlined Text

Dove's Journey!