Speech Bubbles With Names and Colors
These speech bubble designs provide visually appealing options for presenting a conversation between two people.
Example 1: One border color per name
Name
Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here.
Name
Dialogue here.
Example 1 Code to Copy
<div style="margin: 2.5rem 5%;">
<div style="margin: 1.5rem 0 1.5rem 15%; text-align: right;">
<p style="padding: 0 25px;">Name</p>
<div style="display: inline-block; border: solid #009CDE 2px; border-radius: 25px 25px 0 25px; padding: 0.75rem 2.25rem 1.5rem 2.25rem;">
<p style="text-align: left;">Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here.</p>
</div>
</div>
<div style="margin: 1.5rem 15% 1.5rem 0;">
<p style="padding: 0 25px;">Name</p>
<div style="display: inline-block; border: solid #1E407C 2px; border-radius: 25px 25px 25px 0; padding: 0.75rem 2.25rem 1.5rem 2.25rem;">
<p>Dialogue here.</p>
</div>
</div>
</div>
Example 2: One border color per name with drop-shadow
Name
Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here.
Name
Dialogue here.
Example 2 Code to Copy
<div style="margin: 2.5rem 5%;">
<div style="margin: 1.5rem 0 1.5rem 15%; text-align: right;">
<p style="padding: 0 25px;">Name</p>
<div style="display: inline-block; border: solid #transparent 2px; border-radius: 25px 25px 0 25px; background: #D6D6D6;">
<div style="display: inline-block; position: relative; top: -4px; left: -6px; border: solid #009CDE 2px; border-radius: 25px 25px 0 25px; padding: 0.75rem 2.25rem 1.5rem 2.25rem; background: #ffffff;">
<p style="text-align: left;">Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here.</p>
</div>
</div>
</div>
<div style="margin: 1.5rem 15% 1.5rem 0;">
<p style="padding: 0 25px;">Name</p>
<div style="display: inline-block; border: solid #transparent 2px; border-radius: 25px 25px 25px 0; background: #D6D6D6;">
<div style="display: inline-block; position: relative; top: -4px; left: -6px; border: solid #1E407C 2px; border-radius: 25px 25px 25px 0; padding: 0.75rem 2.25rem 1.5rem 2.25rem; background: #ffffff;">
<p>Dialogue here.</p>
</div>
</div>
</div>
</div>
Example 3: One background color per name
Name
Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here.
Name
Dialogue here.
Example 3 Code to Copy
<div style="margin: 2.5rem 5%;">
<div style="margin: 1.5rem 0 1.5rem 15%; text-align: right;">
<p style="padding: 0 25px;">Name</p>
<div style="display: inline-block; border: solid transparent 2px; border-radius: 25px 25px 0 25px; padding: 0.75rem 2.25rem 1.5rem 2.25rem; background: #1E407C; color: #ffffff;">
<p style="text-align: left;">Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here.</p>
</div>
</div>
<div style="margin: 1.5rem 15% 1.5rem 0;">
<p style="padding: 0 25px;">Name</p>
<div style="display: inline-block; border: solid transparent 2px; border-radius: 25px 25px 25px 0; padding: 0.75rem 2.25rem 1.5rem 2.25rem; background: #A5D4D3;">
<p>Dialogue here.</p>
</div>
</div>
</div>
Example 4: Gray only, one border/background shade combination per name
Name
Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here.
Name
Dialogue here.
Example 4 Code to Copy
<div style="margin: 2.5rem 5%;">
<div style="margin: 1.5rem 0 1.5rem 15%; text-align: right;">
<p style="padding: 0 25px;">Name</p>
<div style="display: inline-block; border: solid #EFF1F4 2px; border-radius: 25px 25px 0 25px; padding: 0.75rem 2.25rem 1.5rem 2.25rem; background: #EFF1F430;">
<p style="text-align: left;">Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here.</p>
</div>
</div>
<div style="margin: 1.5rem 15% 1.5rem 0;">
<p style="padding: 0 25px;">Name</p>
<div style="display: inline-block; border: solid #EFF1F4 2px; border-radius: 25px 25px 25px 0; padding: 0.75rem 2.25rem 1.5rem 2.25rem; background: #EFF1F499;">
<p>Dialogue here.</p>
</div>
</div>
</div>
Example 5: Quote bubble with source information
"Lorem ipsum dolor sit amet, consectetur adipiscing 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."
(Author, Date, p. X)
"Lorem ipsum dolor sit amet, consectetur adipiscing 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."
(Author, Date, p. X)
Example 5 Code to Copy
<div style="margin: 2.5rem 5%;">
<div style="margin: 2.5rem 5%;">
<div style="margin: 1.5rem 0 1.5rem 15%; text-align: right;">
<div style="display: inline-block; border: solid #009CDE 2px; border-radius: 25px 25px 0 25px; padding: 0.75rem 2.25rem 1.5rem 2.25rem;">
<p style="text-align: left;">"Lorem ipsum dolor sit amet, consectetur adipiscing 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."</p>
</div>
<p style="padding: 0 25px;">(Author, Date, p. X)</p>
</div>
<div style="margin: 1.5rem 15% 1.5rem 0;">
<div style="display: inline-block; border: solid #1E407C 2px; border-radius: 25px 25px 25px 0; padding: 0.75rem 2.25rem 1.5rem 2.25rem;">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing 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."</p>
</div>
<p style="padding: 0 25px;">(Author, Date, p. X)</p>
</div>
</div>
Example 6: Non-rounded corner closest to name, border extended and curved
Name
Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here.
Name
Dialogue here.
Example 6 Code to Copy
<div style="margin: 2.5rem 5%;">
<div style="margin: 1.5rem 0 1.5rem 15%; text-align: right;">
<div style="background: #1E407C;">
<p style="border: solid #ffffff 2px; border-radius: 0 0 25px 0; margin: 0; padding: 1rem 0.25rem; background: #ffffff;">Name</p>
</div>
<div style="display: inline-block; border: solid #1E407C 2px; border-radius: 25px 0 25px 25px; padding: 0.75rem 2.25rem 1.5rem 2.25rem; background: #1E407C; color: #ffffff;">
<p style="text-align: left;">Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here. Dialogue here.</p>
</div>
</div>
<div style="margin: 1.5rem 15% 1.5rem 0;">
<div style="background: #A5D4D3;">
<p style="border: solid #ffffff 2px; border-radius: 0 0 0 25px; margin: 0; padding: 1rem 0.25rem; background: #ffffff;">Name</p>
</div>
<div style="display: inline-block; border: solid #A5D4D3 2px; border-radius: 0 25px 25px 25px; padding: 0.75rem 2.25rem 1.5rem 2.25rem; background: #A5D4D3;">
<p>Dialogue here.</p>
</div>
</div>
</div>
Use with Caution: Guidelines and Modifications
- You can change the border and background colors, but please remember to use good color contrast, especially if you choose a style with a background color.
- Use this style sparingly as aligning text left and right can cause reading issues for some people.