Micro.blog Styles
A collection of styles to spice up your blog.
Just copy the styles you like, head over to ‘Design β Edit CSS’, and paste them in. Tada! π
Please note that you might have to do some tweaking to make some of the styles play nicely with your theme (I’m using the mnml theme myself).
Contents
π Rainbow logo
β¨ Sparkling title
πΌ Avatar shapes
π Notes styles
π Rainbow logo

Want to sprinkle some rainbow magic over your blog? Use it during Pride Month, or why not keep the joy going all year round? Rainbows never go out of style!
Title
/* Rainbow title */
.site-title {
font-size: 2.5rem; /* Your title size */
background: linear-gradient(to right, #ef5350, #f48fb1, #7e57c2, #2196f3, #26c6da, #43a047, #eeff41, #f9a825, #ff5722);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Avatar
/* Rainbow avatar */
.u-photo {
height: 50px; /* Your avatar size */
width: 50px;
background: linear-gradient(to right, #ef5350 0%, #f9a825 25%, #43a047 50%, #26c6da 75%, #2196f3 100%) border-box;
background-clip: border-area;
-webkit-background-clip: border-area;
border: 3px solid #0000;
border-radius: 50%;
}
β¬οΈ Back to menu
β¨ Sparkling title

Inspired by the lovely gradient sparkles by Sylvia, this little snippet of code will make your blog title sparkle with eternal joy β like fairy dust for your header!
/* Colors: Light mode */
:root {
--text-color: #4c4f69;
--gradient: linear-gradient(90deg, #4c4f69 0%, #8839ef 50%, #ea76cb 100%);
}
/* Colors: Dark mode */
@media (prefers-color-scheme: dark) {
:root {
--text-color: #cdd6f4;
--gradient: linear-gradient(90deg, #cdd6f4 0%, #cba6f7 50%, #f5c2e7 100%);
}
}
/* Sparkling the magic */
.site-title::after {
padding-left: 5px;
content: "*:ο½₯οΎβ§";
background: var(--gradient);
color: transparent;
background-clip: text;
}
β¬οΈ Back to menu
πΌ Avatar shapes

Pump up your blog one notch by giving your avatar a little makeover. You can choose between three stylish shapes: flower, octagon, or a spiked star. Because who says your face canβt be framed like a work of art?
Flower
/* Flower avatar */
.u-photo {
height: 50px; /* Your avatar size */
width: 50px;
--g:/20.56% 20.56% radial-gradient(#000 calc(71% - 1px),#0000 71%) no-repeat;
mask: 100% 50% var(--g),93.301% 75% var(--g),75% 93.301% var(--g),50% 100% var(--g),25% 93.301% var(--g),6.699% 75% var(--g),0% 50% var(--g),6.699% 25% var(--g),25% 6.699% var(--g),50% 0% var(--g),75% 6.699% var(--g),93.301% 25% var(--g),radial-gradient(100% 100%,#000 38.366%,#0000 calc(38.366% + 1px));
}
Octagon
/* Octagon avatar */
.u-photo {
height: 50px; /* Your avatar size */
width: 50px;
clip-path: polygon(100% 50%,90.45% 79.39%,65.45% 97.55%,34.55% 97.55%,9.55% 79.39%,0% 50%,9.55% 20.61%,34.55% 2.45%,65.45% 2.45%,90.45% 20.61%);
}
Star
/* Star avatar */
.u-photo {
height: 50px; /* Your avatar size */
width: 50px;
clip-path: polygon(100% 50%,78.98% 57.76%,93.3% 75%,71.21% 71.21%,75% 93.3%,57.76% 78.98%,50% 100%,42.24% 78.98%,25% 93.3%,28.79% 71.21%,6.7% 75%,21.02% 57.76%,0% 50%,21.02% 42.24%,6.7% 25%,28.79% 28.79%,25% 6.7%,42.24% 21.02%,50% 0%,57.76% 21.02%,75% 6.7%,71.21% 28.79%,93.3% 25%,78.98% 42.24%);
}
β¬οΈ Back to menu
π Notes styles

Want to make your short posts stand out? Use this little snippet of code to turn your tiny posts into mighty digital post-its. Small but impossible to ignore!
Please note (no pun intended): Change the .notes
part to match the name of the category you’d like to give the post-it look.
/* Notes styles */
.notes {
background-color: #ffc;
background-size: 20px 20px;
background-image: repeating-linear-gradient(0deg, #ddd, #ddd 1px, #ffc 1px, #ffc);
}
.notes p {
font-family: monospace;
font-size: 1.6rem;
color: #555;
letter-spacing: -.5px;
}
.notes a {
color: #555;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 0.25em;
}
.notes .post-date a {
text-decoration: none;
}
β¬οΈ Back to menu
Watch this space
I will continue to update this page with more styles. If youβve created some styles you think would be a good fit for this page, please let me know. Iβll gladly give you credit if I include them!