TUTORIAL: 5 "Elegant & Cute" Blockquote Styles
Are your quotes looking a little plain? Whether you are posting poetry, book excerpts, or just aesthetic ramblings, your blockquotes deserve to look as cute as the rest of your theme!
Today I’m sharing 5 New Blockquote Designs inspired by coquette, soft, and minimal aesthetics. We have washi tape, sparkles, and even a love letter style! ✨
SEE THE LIVE PREVIEW OF THE BLOCKQUOTE STYLES HERE
🛠️ How to Install
Go to your blog’s Customize page.
Click Edit HTML.
Scroll down to your CSS section (usually inside <style> tags).
Paste the code for your favorite style below!
⚠️ Please read until the end on how to customize the codes!
Style 1: The "Love Letter"
Perfect for soft/coquette themes. Features a tiny heart icon.
.whereinmnl-bq-cute-v1 { position: relative; background: #fff0f3; border: 1px solid #ffccd5; border-radius: 15px; padding: 30px; margin: 30px 0; text-align: center; font-family: 'Playfair Display', serif; font-style: italic; color: #d63384; font-size: 16px; } .whereinmnl-bq-cute-v1::before { content: '♥'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #fff; color: #ff8fa3; padding: 0 10px; font-size: 18px; line-height: 1; }
Style 2: The "Dreamy Cloud"
A soft sticker-style look with rounded edges and pastel shadow.
.whereinmnl-bq-cute-v2 { background: #fff; border-radius: 25px; box-shadow: 5px 5px 0 #e0f2fe; border: 2px solid #bae6fd; padding: 25px 30px; margin: 25px 10px; font-family: 'Inter', sans-serif; color: #555; font-size: 14px; line-height: 1.6; }
Style 3: The "Stitched Diary"
Dashed borders that look like a scrapbook entry.
.whereinmnl-bq-cute-v3 { border: 2px dashed #b197fc; background: #f8f0fc; padding: 20px; margin: 30px 0; border-radius: 10px; font-family: monospace; font-size: 13px; color: #7950f2; }
Style 4: The "Sparkle"
Elegant indentation with a hanging sparkle icon.
.whereinmnl-bq-cute-v4 { border-left: 3px solid #ffd43b; background: linear-gradient(to right, #fff9db, transparent); padding: 15px 15px 15px 30px; margin: 30px 0; position: relative; font-family: 'Playfair Display', serif; font-size: 17px; color: #664d03; } .whereinmnl-bq-cute-v4::before { content: '✦'; position: absolute; left: -9px; top: 15px; color: #fab005; background: #fff; border-radius: 50%; width: 15px; height: 15px; font-size: 10px; display: flex; align-items: center; justify-content: center; border: 1px solid #ffd43b; }
Style 5: The "Washi Tape"
Looks like a note taped to your blog.
.whereinmnl-bq-cute-v5 { background: #fff; border: 1px solid #eee; padding: 35px 25px 25px 25px; margin: 30px 0; position: relative; box-shadow: 0 4px 10px rgba(0,0,0,0.03); font-family: serif; font-size: 16px; color: #444; } .whereinmnl-bq-cute-v5::before { content: ''; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 80px; height: 25px; background-color: #a5d8ff; background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,0.3) 5px, rgba(255,255,255,0.3) 10px); opacity: 0.8; }
How to use these codes (PLEASE READ):
Option A: Make it your default style (Easiest) - If you want every quote on your blog to look like this, take the code you chose above and change the class name (e.g., .whereinmnl-bq-cute-v1) to simply blockquote. Then paste it at the bottom of your CSS!
Option B: Use it occasionally - Keep the code as is. When writing a post, switch to the HTML editor (the <> icon) and wrap your text like this: <div class="whereinmnl-bq-cute-v1">Your text here</div>
---
I designed these using soft pinks and blues, but they might not match your specific theme. Don't worry—changing the colors is super easy! You don't need to be a coding expert; you just need to know which "Hex Codes" to swap.
(Tip: Go to Google and search "Color Picker" to find the Hex code for the exact color you want, like #ff0000 for red.)
Here is a quick guide on what to change for each style:
🎀 For Style 1 (The Love Letter)
To change the box color: Look for background: #fff0f3; and border: 1px solid #ffccd5;.
To change the Heart Icon: Look inside the ::before section. Change color: #ff8fa3; to make the heart red, black, or whatever you like!
☁️ For Style 2 (The Dreamy Cloud)
To change the Shadow: This style relies on box-shadow to look cute. Find box-shadow: 5px 5px 0 #e0f2fe;. Change that code to a darker version of your border color.
To change the Border: Find border: 2px solid #bae6fd;.
🧵 For Style 3 (The Stitched Diary)
To change the "Stitches": Find border: 2px dashed #b197fc;.
To change the Text Color: Find color: #7950f2;.
✨ For Style 4 (The Sparkle)
To change the Sparkle: Look inside the ::before section. Change color: #fab005; (the star icon) and border: 1px solid #ffd43b; (the circle around it).
To change the Gradient: Look for background: linear-gradient(...). You can change #fff9db to another light pastel color.
🩹 For Style 5 (The Washi Tape)
To change the Tape Color: This one is a bit tricky! Look inside the ::before section.
Find background-color: #a5d8ff;. Change this to make the tape pink, green, or grey!
Note: Do not touch the "repeating-linear-gradient" part unless you want to remove the stripes on the tape.
💡 General CSS Cheat Sheet:
color: = The color of the text or icon.
background: = The background color of the box.
border: = The line around the box.
If you get stuck or the code breaks, just come back to this post, copy the original code again, and start fresh! Happy customizing! 🎨
