Sprinkles

Donut shop: pink frosting dripping from every block, sprinkles all over the background.

0 uses · 0 likes

Using a template swaps your colors, font and custom CSS. Your name, bio, avatar and links stay.

See the CSS

/* Sprinkles */
body.zbr-page {
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><g stroke-linecap='round' stroke-width='5'><path d='M14 20l10-5' stroke='%23ff5fa2'/><path d='M70 12l4 10' stroke='%23fff'/><path d='M120 30l10 4' stroke='%2300b8d9'/><path d='M40 70l9-6' stroke='%23ffd23f'/><path d='M96 80l-4 10' stroke='%237c5cff'/><path d='M140 110l-10 3' stroke='%23ff5fa2'/><path d='M20 120l5 9' stroke='%2300b8d9'/><path d='M76 140l10-4' stroke='%23fff'/><path d='M120 150l3-10' stroke='%23ffd23f'/></g></svg>") 0 0 / 160px 160px,
    #ffd3e4;
}
.zbr-col { gap: 22px; }
.zbr-card {
  position: relative; padding-top: 52px; backdrop-filter: none; border-radius: 28px;
  box-shadow: 0 7px 0 rgba(214, 40, 111, .28), 0 16px 30px rgba(214, 40, 111, .18);
}
/* frosting with drips */
.zbr-card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 40px; border-radius: 28px 28px 0 0;
  background:
    radial-gradient(circle at 21px 0, #ff7eb6 0 15px, transparent 16px) 0 0 / 42px 100% repeat-x,
    radial-gradient(circle at 12px 0, #ff7eb6 0 9px, transparent 10px) 18px 0 / 61px 100% repeat-x,
    linear-gradient(#ff7eb6, #ff7eb6) 0 0 / 100% 14px no-repeat;
}
.zbr-box-title { font-size: 1.3rem; font-weight: 600; color: #d6286f; line-height: 1.1; }
.zbr-avatar { border: 5px solid #ff7eb6; border-radius: 50%; }
.zbr-name { font-size: 2rem; font-weight: 600; color: #d6286f; }
.zbr-link { background: none; border: 0; border-radius: 999px; padding: 9px 14px; font-weight: 500; }
.zbr-link::before { content: '● '; color: #00b8d9; }
.zbr-link:nth-child(3n+2)::before { color: #ffb400; }
.zbr-link:nth-child(3n)::before { color: #7c5cff; }
.zbr-link:hover { background: #ffe3ef; color: #d6286f; transform: none; }
.zbr-table th, .zbr-table td, .zbr-comment, .zbr-links .zbr-link, .zbr-posts .zbr-link { border-color: rgba(214, 40, 111, .16); }
.zbr-table th { color: #d6286f; opacity: 1; }
.zbr-friend img, .zbr-friend .zbr-noavatar, .zbr-comment-author img, .zbr-comment-author .zbr-noavatar { border-radius: 50%; }
.zbr-noavatar { background: #ff7eb6; }
.zbr-online { color: #15803d; }
.zbr-btn { background: #d6286f; color: #fff; box-shadow: 0 4px 0 #9d1c52; }
.zbr-btn:hover { transform: translateY(2px); box-shadow: 0 2px 0 #9d1c52; filter: none; }
.zbr-views { color: #8a1d4a; opacity: 1; font-weight: 500; }