if you're renewing or upgrading your pro plan, use my referral code greengrass or click here!
it'll help me out a lot & won't cost you anything!!
text effects








bouncy link + cr koiwaprimevera for popping text


link for tumblr wobble and light-up text

shaky text is animated & can be used on imgs too!

text borders

number 1 (standard)

h1 {
text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000;

number 2

h1 {
filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black);

number 3 (best for large/bolded text)

h1 {
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #000000;

image borders

scroll for more + even more borders here

image masks

↑ cr imiyaimi for 2nd & octopathfan for 3rd ↑

cr viliarreai


for transparent images. won't appear on ios


↑ cr koiwaprimevera for the popping code

animations are slowed as to not be overwhelming


some text to enable scrolling. did you know i really like octopath traveler?

fun fact about me: my favorite pokemon ever are bulbasaur, milcery, toxel, salamence and sylveon.

my favorite octopathers are therion, alfyn & primrose they drive me absolutely nuts.

lace but pink
my favorite video game soundtracks are probaby octopath, lisa, deltarune's. they're all so good i highly recommend if you're reading this for some reason.
this is a link to my spotify playlist if you want to study me

image bg
um. some more filler text here. i absolutely love video game music i think its one of the best genres of music out there.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
2 in 1
mizuki akiyama is wanted in every state for vehicular manslaughter
rotating things

works on text, containers etc. as well

#image01 { transform: rotate(20deg); }

custom fonts

go to dafont (or any fonts website of your choice) and download the font you want.
unzip the file in file explorer and upload either the .ttf or .otf file into dropbox
get the link for the file and remove the ?dl=0 from the back and the www from the front. replace the www with dl

@font-face {
font-family: starborn;
src: url(https://dl.dropbox.com/s/5zgb9l9rpahgls7/Starborn.otf);

visual tutorial + more detailed tut

custom fonts v2


this thing

change to your needs. works on all elements

#text01 {
position: relative;
top: 1em;
z-index: 5; }

hover effects

↑ example of the zoom effect ↑

tap effects

(i discourage using the regular clicksplosion due to lag on older phones!)


<html> <head>
<script language="javascript" type="text/javascript">
alert("GAY SEX")
</head> </html>

image next to text

this can be used to put images in scrollboxes
if you wanna put a gif next to text, the text needs to be in an embed. you can put <img src="image.gif"> in the places you want a gif/image to be.

you just need to replace "image.gif" with the link of that image/gif. you can do that by copying the image address, for example:
<img src="https://palecolor.crd.co/assets/images/image01.png?v=355d7445">

like this
selection color

if you're on pc or android, select some text on this page to see what i mean<!DOCTYPE html> <html> <head> <style>
::selection {
color: #B09CB6;
background: white;
</style> </head> </html>

dia approved fonts

more cool fonts found here

krona one

fredoka one



comic neue

special elite



crimson text

kosugi maru


times new roman

these ones are available on standard carrd

sites that own

i don't use many sites that aren't my own so these
are very recommended!

graphics neocities has loads of graphics for just about anything
htmlcolorcodes comes in handy for making color palettes & getting hex codes
stackoverflow helpful for finding & fixing my codes. saves my life every now and then
pixelbank neocities pixels collection i absolutely adore, highly recommend for rentrys
ishimori crd has loads of fonts, helpful resources & neat codes

misc stuff

this section includes things i didn't think fit into my code section but wanted to include nonetheless

styling embed text

step 1: paste this

meow {
font-family: Arial;
font-size: 2em;
color: #000000;

at the bottom of the code after </div>, or in a new embed.
step 2: you can remove, add or change the parts as much as you want
step 3: tag your text with <meow> </meow>

(<meow>hello internet</meow>)

formatting text

to center elements, add margin: auto; to your code
to center text, add text-align: center;
to bold certain words, tag your text with <b> </b>
to italicize words, tag your text with <em> </em>
to add a link to embedded text, use <a href="your.link.here">text</a>
adding a link to an embedded images is just <a href="link here"><img src="img link"></a>

section appear thing

what i'm referring to is whats going on with this carrd basically. when you open a new section it appears under the index

add a header under your index, add a section under that then add another section under that one.the first section doesn't matter so that can be named anything, and you only need to do this once so you can just add sections normally afterwards.if you wanna do what i did in this crd with sections appearing in between the index & footer, add a footer start before your footer.. your footer also has to be at the very bottom of the page

page thing

set background style to image, change position to top, tile to horizontal, and change the transparency color to whatever you want

there's no way to make a pattern go under the background image, i just make the pattern very light so it just looks like there's no overlap

the cbox

direct urgent questions or concerns to
@octopather on ig or claris ୨୧#9058 on disc