Custom CSS Template Preview

Preview and test all available custom styling templates for novel chapters

Game Prompt Info (Blue)

Blue glowing box for quests, system notifications, and important information

πŸ“¦ Box
Quest Title
Quest description goes here. This is your mission to save the world.
View HTML Code 
<div class="game-prompt-info">
    <div class="game-prompt-info-title">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
        Quest Title
    </div>
    <div class="game-prompt-info-content">Quest description goes here. This is your mission to save the world.</div>
</div>

Game Prompt Warning (Red)

Red glowing box for warnings, penalties, and dangerous situations

πŸ“¦ Box
Warning!
Danger ahead! Critical situation detected.
View HTML Code 
<div class="game-prompt-warning">
    <div class="game-prompt-warning-title">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
        Warning!
    </div>
    <div class="game-prompt-warning-content">Danger ahead! Critical situation detected.</div>
</div>

Game Prompt Success (Green)

Green glowing box for achievements, success messages, and quest completions

πŸ“¦ Box
Achievement Unlocked
You have successfully completed the quest!
View HTML Code 
<div class="game-prompt-success">
    <div class="game-prompt-success-title">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
        Achievement Unlocked
    </div>
    <div class="game-prompt-success-content">You have successfully completed the quest!</div>
</div>

Game Prompt Purple (Magic)

Purple glowing box for magic, skills, and supernatural events

πŸ“¦ Box
Magical Effect
Ancient magic has been activated. Your power surges.
View HTML Code 
<div class="game-prompt-magic">
    <div class="game-prompt-magic-title">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
        Magical Effect
    </div>
    <div class="game-prompt-magic-content">Ancient magic has been activated. Your power surges.</div>
</div>

Game Prompt Small (Compact)

Compact blue box for status updates, stats, and brief notifications

πŸ“¦ Box
[Status: Active] | [Level: 42]
View HTML Code 
<div class="game-prompt-small">
    <div class="game-prompt-small-content">
        [<strong>Status:</strong> Active] | [<strong>Level:</strong> 42]
    </div>
</div>

Skill Notification (Gold)

Notification for skill level ups and ability unlocks

πŸ“¦ Box
Skill Level Up!
Sword Mastery Lv. 5 β†’ Lv. 6
ATK +10 | Critical Rate +5%
View HTML Code 
<div class="skill-notification">
    <div class="skill-notification-title">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
        Skill Level Up!
    </div>
    <div class="skill-notification-content">
        <strong>Sword Mastery</strong> Lv. 5 β†’ Lv. 6<br>
        ATK +10 | Critical Rate +5%
    </div>
</div>

Item Acquired (Gold)

Item acquisition with rarity and stats display

πŸ“¦ Box
β˜… LEGENDARY ITEM ACQUIRED β˜…
Sword of Dawn
ATK: +250 | DEF: +50
Special: Divine Light Slash
View HTML Code 
<div class="item-acquired">
    <div class="item-acquired-title">
        β˜… LEGENDARY ITEM ACQUIRED β˜…
    </div>
    <div class="item-acquired-content">
        <strong>Sword of Dawn</strong><br>
        ATK: +250 | DEF: +50<br>
        <em>Special: Divine Light Slash</em>
    </div>
</div>

Status Window (Cyan)

RPG-style status window for character stats

πŸ“¦ Box
CHARACTER STATUS
Name: Kaito Haruki
Level: 47 | Class: Sword Master
HP: 3,450 / 5,000
MP: 1,200 / 2,000
View HTML Code 
<div class="status-window">
    <div class="status-window-title">CHARACTER STATUS</div>
    <div class="status-window-content">
        <strong>Name:</strong> Kaito Haruki<br>
        <strong>Level:</strong> 47 | <strong>Class:</strong> Sword Master<br>
        <strong>HP:</strong> 3,450 / 5,000<br>
        <strong>MP:</strong> 1,200 / 2,000
    </div>
</div>

System Message (White)

System-level messages and announcements

πŸ“¦ Box
[ SYSTEM ]
The tutorial has been completed. Good luck on your journey.
View HTML Code 
<div class="system-message">
    <div class="system-message-title">[ SYSTEM ]</div>
    <div class="system-message-content">
        The tutorial has been completed. Good luck on your journey.
    </div>
</div>

Quest Complete (Green)

Quest completion notification with rewards

πŸ“¦ Box
Quest Complete
The Beginning of Adventure

Rewards:
β€’ 5,000 EXP
β€’ 1,000 Gold
β€’ Rare Item Box x3
View HTML Code 
<div class="quest-complete">
    <div class="quest-complete-title">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
        Quest Complete
    </div>
    <div class="quest-complete-content">
        <strong>The Beginning of Adventure</strong><br><br>
        <em>Rewards:</em><br>
        β€’ 5,000 EXP<br>
        β€’ 1,000 Gold<br>
        β€’ Rare Item Box x3
    </div>
</div>

Letter/Note (Gold)

Elegant letter with gold glow effect

πŸ“¦ Box

β€”

To my beloved,

The spring breeze carries my thoughts to you across the mountains. Each day without you feels like an eternity.

Until we meet again,

β€” Seraphina

β€”

View HTML Code 
<div class="letter-elegant">
    <div class="letter-content">
        <p style="text-align: center;">β€”</p>
        <p><em>To my beloved,</em></p>
        <p><em>The spring breeze carries my thoughts to you across the mountains. Each day without you feels like an eternity.</em></p>
        <p><em>Until we meet again,</em></p>
        <p style="text-align: right;"><em>β€” Seraphina</em></p>
        <p style="text-align: center;">β€”</p>
    </div>
</div>

Ancient Scroll (Brown)

Ancient scroll or prophecy with ornate styling

πŸ“¦ Box
⚜ ANCIENT PROPHECY ⚜
When the crimson moon rises and the stars align, the chosen one shall emerge from the darkness to restore balance to the world.
View HTML Code 
<div class="ancient-scroll">
    <div class="scroll-title">⚜ ANCIENT PROPHECY ⚜</div>
    <div class="scroll-content">
        <em>When the crimson moon rises and the stars align, the chosen one shall emerge from the darkness to restore balance to the world.</em>
    </div>
</div>

Location Card (Cyan)

Location introduction card

πŸ“¦ Box
Kingdom of Elendria
Capital City β€’ Population: 500,000
Known for its grand library and magical academy
View HTML Code 
<div class="location-card">
    <div class="location-card-title">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
        Kingdom of Elendria
    </div>
    <div class="location-card-content">
        Capital City β€’ Population: 500,000<br>
        Known for its grand library and magical academy
    </div>
</div>

Combat Notification (Orange)

Combat action notification

πŸ“¦ Box
CRITICAL HIT!
Shadow Strike dealt -9,999 HP
Enemy defense penetrated!
View HTML Code 
<div class="combat-notification">
    <div class="combat-notification-title">CRITICAL HIT!</div>
    <div class="combat-notification-content">
        <strong>Shadow Strike</strong> dealt <strong>-9,999 HP</strong><br>
        Enemy defense penetrated!
    </div>
</div>

Debuff Warning (Purple)

Status effect or debuff notification

πŸ“¦ Box
Status: Cursed
All stats reduced by 30%
Duration: 5 minutes
View HTML Code 
<div class="debuff-warning">
    <div class="debuff-warning-title">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
        Status: Cursed
    </div>
    <div class="debuff-warning-content">
        All stats reduced by 30%<br>
        Duration: 5 minutes
    </div>
</div>

Shop Window (Brown)

Shop or merchant interface

πŸ“¦ Box
βš’ Blacksmith's Forge βš’
Steel Sword ...................... 500 G
Iron Shield ......................... 350 G
Health Potion x10 ............. 200 G
View HTML Code 
<div class="shop-window">
    <div class="shop-window-title">βš’ Blacksmith's Forge βš’</div>
    <div class="shop-window-content">
        <strong>Steel Sword</strong> ...................... 500 G<br>
        <strong>Iron Shield</strong> ......................... 350 G<br>
        <strong>Health Potion x10</strong> ............. 200 G
    </div>
</div>

Choice Prompt (Blue)

Choice or decision prompt

πŸ“¦ Box
What will you do?
β–Ά Fight the dragon
β–Ά Negotiate peacefully
β–Ά Run away
View HTML Code 
<div class="choice-prompt">
    <div class="choice-prompt-title">What will you do?</div>
    <div class="choice-prompt-content">
        β–Ά Fight the dragon<br>
        β–Ά Negotiate peacefully<br>
        β–Ά Run away
    </div>
</div>

Title Card (Gold)

Epic chapter title card

πŸ“¦ Box
CHAPTER 47
The Final Battle
Fate of the World
View HTML Code 
<div class="title-card-epic">
    <div class="title-card-chapter">CHAPTER 47</div>
    <div class="title-card-name">The Final Battle</div>
    <div class="title-card-subtitle">Fate of the World</div>
</div>

Divine Message (Gold)

Message from gods or divine beings

πŸ“¦ Box
✦ DIVINE MESSAGE ✦
The voice of the goddess echoes in your mind:
"Chosen hero, the time has come to fulfill your destiny."
View HTML Code 
<div class="divine-message">
    <div class="divine-message-title">✦ DIVINE MESSAGE ✦</div>
    <div class="divine-message-content">
        <em>The voice of the goddess echoes in your mind:</em><br>
        "Chosen hero, the time has come to fulfill your destiny."
    </div>
</div>

Party Status (Cyan)

Party member status display

πŸ“¦ Box
PARTY MEMBERS
Kaito ........... HP: β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–‘β–‘ 80%
Elena ............ HP: β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ 100%
Marcus ......... HP: β–ˆβ–ˆβ–ˆβ–ˆβ–‘β–‘β–‘β–‘β–‘β–‘ 40%
View HTML Code 
<div class="party-status">
    <div class="party-status-title">PARTY MEMBERS</div>
    <div class="party-status-content">
        <strong>Kaito</strong> ........... HP: β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–‘β–‘ 80%<br>
        <strong>Elena</strong> ............ HP: β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ 100%<br>
        <strong>Marcus</strong> ......... HP: β–ˆβ–ˆβ–ˆβ–ˆβ–‘β–‘β–‘β–‘β–‘β–‘ 40%
    </div>
</div>

Time Stamp (Silver)

Medieval-style time stamp

πŸ“ Text
Year 564 of the Imperial Calendar, Spring
View HTML Code 
<div class="timestamp-medieval">
    <strong>Year 564 of the Imperial Calendar, Spring</strong>
</div>

Silver Text (Emphasis)

Silver glowing text for atmospheric emphasis

πŸ“ Text
The moonlight illuminated the path ahead.
View HTML Code 
<div class="text-silver">
    <strong>The moonlight illuminated the path ahead.</strong>
</div>

Gold Text (Important)

Gold glowing text for major plot points

πŸ“ Text
⟨ The Ancient Seal Has Been Broken ⟩
View HTML Code 
<div class="text-gold">
    <strong>⟨ The Ancient Seal Has Been Broken ⟩</strong>
</div>

Blood Text (Ominous)

Blood red text for dark/ominous moments

πŸ“ Text
The curse cannot be undone...
View HTML Code 
<div class="text-blood">
    <strong>The curse cannot be undone...</strong>
</div>

Ethereal Text (Magic)

Ethereal cyan text for magical moments

πŸ“ Text
✧ο½₯ﾟ: ✧ο½₯ﾟ: Mana flows through your veins :ο½₯ﾟ✧:ο½₯ﾟ✧
View HTML Code 
<div class="text-ethereal">
    <em>✧ο½₯ﾟ: ✧ο½₯ﾟ: Mana flows through your veins :ο½₯ﾟ✧:ο½₯ﾟ✧</em>
</div>

Chapter Break

Decorative chapter or scene break

πŸ“ Text
⟑ ⟑ ⟑
View HTML Code 
<div class="chapter-break">
    <div class="chapter-break-line"></div>
    <div class="chapter-break-text">⟑ ⟑ ⟑</div>
    <div class="chapter-break-line"></div>
</div>