how to make speech bubble in html

3 Steps Simple Responsive CSS Speech Bubbles

Table of contents, download & notes.

Here is the download link to the example code, so you don’t have to copy-paste everything.

EXAMPLE CODE DOWNLOAD

Sorry for the ads..., responsive speech bubble.

All right, let us get into the steps of creating a speech bubble using pure HTML and CSS.

TUTORIAL VIDEO

Step 1) simple speech box.

Aye, all we need to create a speech bubble is just a normal <div> . The CSS shouldn’t be any trouble either. We are just creating a “normal rectangle box” by setting the background color, padding, font size, font color, etc…

STEP 2) ADD SPEECH BUBBLE “CALLOUT”

Step 3) position the  “callout”, the “magic triangle”, infographic cheatsheet, links & references, 1 thought on “3 steps simple responsive css speech bubbles”.

20+ CSS Speech Bubbles

Welcome to our collection of CSS speech bubbles ! Here, we have curated a comprehensive selection of hand-picked free HTML and CSS speech bubble code examples, sourced from reputable platforms such as CodePen, GitHub , and other valuable resources.

With our April 2023 update , we are thrilled to present six new additions to our collection, ensuring that you have access to the latest and most innovative speech bubble designs available. Speech bubbles are versatile elements that can add a touch of interactivity, engagement, and personality to your website or application. They are commonly used to display conversations, tooltips, comments, or any other form of textual communication .

Each speech bubble example in our collection showcases the power of CSS to create visually appealing and dynamic designs. From simple and minimalistic speech bubbles to more elaborate and animated ones, our collection offers a wide range of options to suit different design preferences and project requirements.

Whether you are a web designer or developer, our collection offers a wealth of resources to elevate the speech bubble system of your website or application. Start exploring our collection now and discover the creative ways to incorporate CSS speech bubbles into your design, adding that extra touch of interactivity and visual appeal.

Related Articles

• CSS Blockquotes

• Temani Afif
• August 18, 2022
• demo and code

About a code

Css only speech bubble.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

• March 6, 2022

Pure CSS Responsive Speech Bubble

• December 3, 2021

Speech Bubbles

• September 16, 2021
• HTML (Haml) / CSS (SCSS)

• Alvaro Montoro
• August 30, 2020

Hello... I guess...

• Remix Protocol
• June 15, 2020

Black Lives Matter Dialog Boxes

A minimalist illustration of two dialog boxes in pure CSS.

Responsive: no

• kirsten allen
• March 23, 2020
• HTML / CSS / JS

Hello, World

• July 11, 2019
• HTML / CSS (SCSS)

8-bit Pixel Speech Bubble Text Balloon

Responsive: partial

• May 16, 2019

Apple iMessage in CSS

Recreating an iMessage chat with CSS.

• April 28, 2019

Chat Bubbles

• Rik Schennink
• July 11, 2018

About the code

Speech bubble.

HTML and CSS simple responsive speech bubble.

• June 2, 2018

Pure CSS Thought Bubbles

• September 23, 2017

Responsive Speech Bubble

Box section can change dimensions independently of pointer. Pointer can be moved to different positions around box. Rounded corners. Glow or shadow around the whole thing that changes along with component shapes.

• August 12, 2016

Speech Bubble Caret

Making a triangle for a speech bubble and using transforms to help create the position.

• Kevin Østerkilde
• March 19, 2016

Alternating Speech Bubbles

• Dudley Storey
• February 20, 2016

Comic Book Speech Bubbles with SVG

A pattern for creating comic book speech bubbles using SVG.

• Joe Hastings
• December 17, 2015
• HTML / CSS (Less)

Pure CSS Speech and Thought Bubbles

Pure CSS thought and speech bubbles that grow to fit the text.

• December 28, 2013

CSS Speech Bubble

Simple speech bubble with CSS.

• Adam Argyle
• March 21, 2013

Comic Director Splash Animation

Comic Director is a Windows 8 app written in HTML and CSS. The first time run experience has a nifty little animation, here's how we did it.

• February 14, 2013

A complex CSS shape speaking bubble.

• Oliver Turner
• January 18, 2013

Single-element 3D Speech Bubble

Uses :before and :after pseudo elements with negative margin to generate effect.

How to Create CSS3 Speech Bubbles Without Images

Share this article

Have you used similar techniques to create other effects?

Frequently Asked Questions (FAQs) about Pure CSS3 Speech Bubbles

How can i create a speech bubble with a border in css3.

Creating a speech bubble with a border in CSS3 involves using the border property. First, you need to create a div for the speech bubble and assign it a class. Then, in your CSS, you can define the border property for that class. You can specify the border color, width, and style. For example: .bubble { border: 2px solid black; } This will create a black border around your speech bubble. You can customize the color, width, and style to suit your needs.

Can I add a shadow to my CSS3 speech bubble?

Yes, you can add a shadow to your CSS3 speech bubble using the box-shadow property. This property allows you to create a shadow effect around the box. You can specify the horizontal and vertical offsets, blur radius, spread radius, and color of the shadow. For example: .bubble { box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); } This will create a shadow that is offset 5px to the right and 5px down from the bubble, with a blur radius of 10px and a color of semi-transparent black.

How can I position the arrow of the speech bubble?

The position of the arrow of the speech bubble can be adjusted using the “top”, “bottom”, “left”, or “right” properties in CSS3. For instance, if you want the arrow to appear at the bottom of the bubble, you can use the “bottom” property and set it to a negative value. Here’s an example: .bubble:after { bottom: -20px; } This will position the arrow 20px up from the bottom of the bubble.

Can I create a speech bubble with rounded corners in CSS3?

Yes, you can create a speech bubble with rounded corners using the border-radius property in CSS3. This property allows you to define how rounded the border corners should be. For example: .bubble { border-radius: 10px; } This will create a speech bubble with corners that are rounded by 10px.

How can I change the color of the speech bubble?

The color of the speech bubble can be changed using the background-color property in CSS3. This property sets the background color of an element. For example: .bubble { background-color: #f00; } This will change the background color of the speech bubble to red.

Can I add text to the speech bubble?

Yes, you can add text to the speech bubble by simply including it within the div in your HTML. For example: <div class="bubble">This is a speech bubble.</div> This will display the text “This is a speech bubble.” inside the speech bubble.

How can I adjust the size of the speech bubble?

The size of the speech bubble can be adjusted using the width and height properties in CSS3. These properties set the width and height of an element. For example: .bubble { width: 200px; height: 100px; } This will create a speech bubble that is 200px wide and 100px tall.

Can I create a speech bubble with a gradient background in CSS3?

Yes, you can create a speech bubble with a gradient background using the linear-gradient function in CSS3. This function creates an image consisting of a progressive transition between two or more colors along a straight line. For example: .bubble { background: linear-gradient(to right, red, orange); } This will create a speech bubble with a background that transitions from red to orange from left to right.

How can I make the speech bubble responsive?

You can make the speech bubble responsive by using relative units such as percentages for the width and height properties instead of absolute units like pixels. This will allow the size of the speech bubble to adjust based on the size of the viewport. For example: .bubble { width: 50%; height: 30%; } This will create a speech bubble that takes up 50% of the width and 30% of the height of the viewport.

Can I animate the speech bubble in CSS3?

Yes, you can animate the speech bubble using keyframes in CSS3. Keyframes are used to specify the behavior of one cycle of a CSS animation. For example, you can create a simple fade-in animation like this: @keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} } .bubble { animation: fadeIn 2s; } This will make the speech bubble fade in over a period of 2 seconds.

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler .

25 Incredible CSS Speech Bubbles - Open Source

These are the best html and css speech bubble code examples we could find. they are perfect for adding a little spunk to your website / app., 1. pure css thought bubbles, 2. chat bubbles, 3. speech bubble, 4. speech bubble caret.

Making a triangle for a speech bubble and using transforms to help create the position. Fork this pen and share your solution in the comments. Note the angles of the triangle as you create your solution.

5. Comic Director Splash Animation

Comic Director is a Windows 8 app written in HTML and CSS. The first time run experience has a nifty little animation, here's how we did it.

6. Alternating Speech Bubbles

7. comic book speech bubbles with svg.

A pattern for creating comic book speech bubbles using SVG. Uses Nate Piekos' Sequentialist BB font. Full explanatory article on my site.

8. Pure CSS Speech And Thought Bubbles

Pure CSS thought and speech bubbles that grow to fit the text Adapted from http://codepen.io/shaman_tito/pen/GIdoy

9. Responsive Speech Bubble

quick demo to answer a question posed by an acquaintance: "How to make a speech bubble to fit into a responsive design?" Criteria: - box section can change dimensions independently of pointer - pointer can be moved to different positions around box - rounded corners - glow or shadow arou... Read More

10. CSS Speech Bubble

11. speech bubble, 12. pure css speech bubbles.

Examples of CSS speech bubbles. Originally made by Nicolas Gallagher.

13. Speech Bubble

14. speech bubbles, 15. comic speech bubbles.

simple speech & think bubbles. (IE9 support) Now with yell-bubbles

16. Pure CSS WhatsApp Desktop Speech Bubble

WhatsApp Desktop Speech Bubble made from pure CSS...

17. CSS Speech Bubble With Animation Inside

18. css / sass speech bubbles, 19. simple css speech bubble.

CSS speech bubble w/ a text area, forked from example here http://css-tricks.com/examples/ShapesOfCSS/

20. Responsive Testimonial Quote Bubble (CSS)

21. chat bubbles in css.

Chat bubbles built in CSS with classes to customize the look and location of talk arrow. *Only tested in Chrome Built off the work of these fine fellows: Nicolas Gallagher https://twitter.com/necolas Craig Buckler https://twitter.com/craigbuckler and Chris Coyier https://twitter.com/chris... Read More

Press ESC to close

Or check our popular categories....

43 CSS Speech Bubble Design Examples

Imagine landing on a webpage and being greeted by a plain chunk of text—boring, right? Now, picture a stylish  CSS speech bubble  that seems to pop off the screen, guiding you through a conversation or highlighting key information. That’s web design with personality!

In the digital landscape, interactive elements like speech bubbles can transform a user interface from mundane to memorable.

Crafting these  CSS tooltips  or  chat boxes  not only enriches the user experience but showcases a savvy blend of aesthetics and function in web design.

By the end of this read, you’ll be equipped with the know-how to implement your very own  CSS speech bubble —those snazzy, eye-catching pieces of UI that make users take notice.

Diving into everything from  pure CSS talk bubbles  to responsive designs adaptable to various devices, you’ll become the maestro of dynamic, on-screen conversations.

Expect to explore  HTML speech bubble  integration,  CSS3 animations , and even  scalable shapes  that make responsiveness a breeze. Strap in; your UI is about to get a whole lot livelier.

CSS Speech Bubble Examples To Check Out

Pure css speech bubble by chonnychu.

See the Pen pure css speech bubble by ChonnyChu ( @chonny ) on CodePen .

Alternating Speech Bubbles by Kevin Østerkilde

See the Pen Alternating speech bubbles by Kevin Østerkilde ( @Kosai106 ) on CodePen .

This ain’t your typical speech bubble. Kevin spun it around, giving it a dash of mystery. Seriously, you gotta check it out.

Speech Bubble by skoupidia12000

See the Pen speech bubble by Panos ( @skoupidia12000 ) on CodePen .

Mad props to skoupidia12000. They whipped up this snazzy script and turned it into a bubble of brilliance.

Clean CSS Speech Bubble by projectxmatt

See the Pen Clean CSS Speech Bubble. by projectxmatt ( @projectxmatt ) on CodePen .

Yo, shout out to projectxmatt. He served up this sleek CSS speech bubble, whipped up using just HTML and CSS.

Speech Bubble Caret by grayghostvisuals

See the Pen Speech Bubble Caret by GRAY GHOST ( @grayghostvisuals ) on CodePen .

Got an online store? Need a sleek way for peeps to drop comments? This pen’s got you. That dark blue? Pops against the light blue speech bubble.

Pure CSS Speech Bubble with a Shadow by Ron

See the Pen Pure CSS Speech Bubble with a Shadow by Ron ( @keith0305 ) on CodePen .

Ron’s on the scene with this one. It’s pure, it’s CSS, and it’s rocking a subtle shadow. All done with HTML and CSS.

Speech Bubble Testimonial by Symbolic

See the Pen Speech bubble testimonial by Symbolic ( @symbolicx ) on CodePen .

Online sellers, where you at? Symbolic’s got this bubble that’s just perfect for showcasing customer love.

Animated Speech Bubble (Bouncy) by KhaledAhmedYounes

See the Pen Animated Speech Bubble (Bouncy) by Khaled Ahmed Younes ( @KhaledAhmedYounes ) on CodePen .

KhaledAhmedYounes has this bubble bouncing around using some jQuery and CSS magic. It’s alive!

Speech Bubble Outline by Florian Geierstanger

See the Pen CSS Speech Bubble Outline (svg data uri) by Florian Geierstanger ( @fgeierst ) on CodePen .

Florian’s got the game on lock with this outlined gem. Sleek, stylish and popping with just HTML and CSS.

Animated Speech Bubble Nav

See the Pen Animated Speech Bubble Nav by schadeck ( @schadeck ) on CodePen .

Online merchants, want something quirky? This speech bubble animation is all the rage right now.

Speech Bubble Wow by bchiang7

See the Pen Speech Bubble wow by Brittany Chiang ( @bchiang7 ) on CodePen .

bchiang7 jumped in and said “Wow!” with this jaw-dropping script.

Circular Speech Bubbles

See the Pen circular speech bubbles by rajeshdn ( @RajRajeshDn ) on CodePen .

RajRajeshDn’s circular masterpieces? A game changer. Boost sales, delight customers.

Speech Bubbles 3 by cool_lazyboy

See the Pen speech bubbles 3 by rajeshdn ( @RajRajeshDn ) on CodePen .

cool_lazyboy’s in the house! This script? Pure gold.

Speech Bubble Slider by Marc

See the Pen Speech Bubble Slider by Marc ( @mburgess0899 ) on CodePen .

Slide into Marc’s world with this slider speech bubble. A work of art for online shops.

Shakespearean Insult Generator by Kris Bocz

See the Pen Shakespearean Insult Generator – CodePen challenge by Kris Bocz ( @kbocz ) on CodePen .

A bit off-topic but, Kris Bocz went all Shakespeare on us with this one. Respect!

Flat Responsive Speech Bubbles by Faunk

See the Pen Flat Responsive Speech Bubbles by Fabian Fink ( @Faunk ) on CodePen .

Faunk’s doing things right. Simple, yet oh-so effective speech bubbles for client testimonials.

Responsive Speech Bubble by Peros

See the Pen responsive speech bubble by peros ( @perossing ) on CodePen .

Peros’ creation? It’s easy on the eyes. Super useful, super stylish speech bubbles.

Chat Bubbles by Dave Alger

See the Pen chat bubbles by Dave Alger ( @run-time ) on CodePen .

Chat it up with Dave’s creation. Chat bubbles made simple with HTML and CSS.

CSS Speech Bubble by Rm.satrya

See the Pen CSS Speech Bubble by Ga Satrya 🇮🇩 ( @satrya ) on CodePen .

Need something snappy? Rm.satrya’s got the answer. This CSS speech bubble? Minimal, yet so effective. The color play? Spot on!

Pure CSS Speech And Thought Bubbles by Joe Hastings

See the Pen Pure CSS speech and thought bubbles by Joe Hastings ( @JoeHastings ) on CodePen .

Alright, so, Joe nailed it with this one. A speech bubble that’s just straight up different from the rest. Fresh, neat and super user-friendly.

Speech Bubble W/ Drop Shadow by Syahrasi

See the Pen CSS speech bubble w/ dropshadow by Syahrasi ( @syahrasi ) on CodePen .

Whoa! A speech bubble with some sweet shadow action going on? Yep, that’s right. Stylin’ with just some good ol’ HTML and CSS.

Rik Schennink’s Speech Bubble

See the Pen Speech bubble by Rik Schennink ( @rikschennink ) on CodePen .

Picture this: A background that’s smooth with shades of grey and white. And then, BAM! That super lit white box in the middle. Super eye-catching and definitely does wonders for any conversation.

Skew’d Bubble Dink by Jase

See the Pen Skew’d Bubble Dink (CSS) by Jase ( @jasesmith ) on CodePen .

So Jase went all out and decided, “Why stay inside the box?” This design? Completely breaks it. It’s got that edgy skew thing going on. Funky, right?

SVG Speech Bubble by Timothy Miller

See the Pen SVG speech bubble by Timothy Miller ( @webinspect ) on CodePen .

Timothy dropped this bomb design. Straight up masterpiece.

Comic Book Speech Bubbles with Dudley Storey

See the Pen Comic Book Speech Bubbles with SVG by Dudley Storey ( @dudleystorey ) on CodePen .

For real, if you’re into popping designs, Dudley’s got you covered. It’s like a trip straight into a comic book. Super nostalgic.

Hello, World by kirsten allen

See the Pen Hello, World by kirsten allen ( @kirstenallen ) on CodePen .

kirsten brought this to the table. It’s sleek. It’s simple. It just works.

Black Lives Matter Dialog Boxes by Rio Jos

See the Pen Black Lives Matter Dialog Boxes by Rio Jos ( @riojosdev ) on CodePen .

Rio came through with a design that’s more than just a style. It’s a statement. Crafted beautifully with HTML and CSS.

CSS Stacked Chat Bubbles by J.M. CIery

See the Pen CSS stacked chat bubbles (Messenger style) by J.M. CIery ( @jmpp ) on CodePen .

Okay, here’s a thing by J.M. – Stacked chat bubbles that are so on point, they remind you of those messenger chats. Love it!

Dustin Dowell’s Pure CSS iOS Chat Bubbles Sass Mixin

See the Pen Pure CSS iOS Chat Bubbles Sass Mixin by Dustin Dowell ( @dustindowell ) on CodePen .

Dustin decided to sprinkle some of his magic on the iOS style. And guess what? It’s all CSS. Mind = blown.

Ana Tudor’s Speech Bubble

See the Pen Speech bubble by Ana Tudor ( @thebabydino ) on CodePen .

Ana’s creation? Off the charts! It’s got a dark backdrop, a popping square bubble, and the word “Hello” packed right in. It’s like 3D but better.

Pure CSS WhatsApp Desktop Speech Bubble by Benni

See the Pen Pure CSS WhatsApp Desktop Speech Bubble by Benni ( @8eni ) on CodePen .

And lastly, Benni served us with a speech bubble that screams WhatsApp Desktop vibes. And guess what? No extra stuff, just CSS.

CSS Chat Bubbles by Andrew

See the Pen CSS Chat Bubbles by Andrew ( @andrewerrico ) on CodePen .

Okay, you know those super engaging full-page chat convos? Andrew’s got you. This theme? Perfect to show off those back-and-forths. Whether you’re building a chat app or adding some chat vibes to your site, this one’s a keeper.

Sassy Right Triangles? Katherine G Shaw’s Speech Bubble Blockquote

See the Pen Speech Bubble Blockquote with Sassy Right Triangles by Katherine G Shaw ( @KatherineGShaw ) on CodePen .

Katherine’s come up with something slick. It’s not just a project, it’s the project.

Mrbnsn’s Clip-Path Magic: Speech Bubble W/ Hover Effects

See the Pen Clip-path speech bubble w/ hover effects by Michael Robinson ( @mrbnsn ) on CodePen .

If you want your online shop visitors to stick around, mrbnsn’s got the trick. Simplicity + a splash of hover effects? Sold!

Just the Speech Bubble by Fivera

See the Pen Speech bubble by Fivera ( @fivera ) on CodePen .

Clean. Simple. Done right with HTML and CSS. It’s not just any bubble; it’s Fivera’s vision.

Jamesbarnett’s Take on CSS Speech Bubble

See the Pen CSS speech bubble by James Barnett ( @jamesbarnett ) on CodePen .

James dropped this super cool script. No biggie, just some stellar speech bubble action.

Convo Boxes Galore with Carles Codony

See the Pen speech bubbles by Carles Codony ( @bitblitter ) on CodePen .

Talk about leveling up stores with speech bubbles! Carles’ technique is killer. Grey boxes, a pop of green and red, and a design that feels like a list but looks a hundred times cooler.

Depthdev’s Callouts & Speech Bubbles

See the Pen CSS Callouts/Speech Bubbles by Adam ( @depthdev ) on CodePen .

Depthdev’s doing things differently. Four directions, one element, all CSS. It’s kind of the Swiss Army knife of speech bubbles.

Chat Bubbles on an iPhone by Stephen Zuniga

See the Pen Chat bubbles in iPhone by Stephen Zuniga ( @stezu ) on CodePen .

If you’re after that iPhone look but with a speech bubble twist, Stephen’s got your back. For those perfect two-party chats.

Grant’s Pure CSS Thought Bubbles

See the Pen Pure CSS Thought Bubbles by Grant ( @quadbaup ) on CodePen .

Thought bubbles? With just HTML and CSS? Yep, Grant went there and crushed it.

Apple iMessage Vibes by Matt Smith

See the Pen Apple iMessage in CSS by Matt Smith ( @AllThingsSmitty ) on CodePen .

Imagine the sleekness of Apple’s iMessage, but made by Matt. Done with HTML and CSS. Super chic.

Patrick Kleckner’s 8-Bit Balloon

See the Pen 8-Bit by Patrick Kleckner ( @pkleckner ) on CodePen .

Patrick’s hitting us with some nostalgic vibes. An 8-bit speech balloon? Count us in.

Argyleink’s Animated Comic Director Splash

See the Pen Comic Director Splash Animation by Adam Argyle ( @argyleink ) on CodePen .

It’s comic. It’s splashy. It’s animated. Argyleink’s mixing things up with HTML and CSS for this super fun piece.

Wanna jazz up your site or app? Dive into these CSS speech bubbles. Different vibes for different tribes!

FAQ On CSS Speech Bubble

How do i create a css speech bubble.

Alright, let’s get this show on the road. Crafting that nifty  CSS speech bubble  is all about the fine art of styling. You’re gonna play with CSS properties—think borders, pseudo-elements like  ::after  and  ::before  for that slick tail, and  position  to place it just right.

Use  border-radius  for rounded corners to soften the edges, and remember to add a pinch of  box-shadow  for depth.

Can I make speech bubbles responsive?

Absolutely. Welcome to the era of  responsive design . Make sure your bubbles are flexible by using relative units like percentages or ems for width, and max-width for scaling smarts.

Media queries are your best pals here; they’ll help you adjust the bubble size based on the device’s screen.

What’s the simplest method for adding arrows to speech bubbles?

Keep it simple, folks. Use the CSS pseudo-element  ::after  to create a small triangle that acts as the arrow. Position it snugly against your bubble with  position: absolute  and let  border-width  and  border-color  do the heavy lifting.

It’s like origami with code—folding edges to point the way.

Are CSS speech bubbles accessible for screen readers?

Now, we’re speaking the right language—accessibility matters. While the visuals are cool, ensure screen readers understand by using proper  HTML  structure.

Put your speech bubble text within an element that conveys its importance, like an  aria-live  region for dynamic content. It’s a blend of form and function.

How do animations enhance CSS speech bubbles?

Here’s where it gets vivid.  CSS animations  bring that pop to your bubbles, giving them life. Whether it’s fading in, bouncing, or sliding—it’s about grabbing attention smoothly.

Just a couple of keyframes for entrance or attention, and you’ve got movement that’s both eye-catching and professional.

Is it possible to have multi-line CSS speech bubbles?

Why stop at one when you can have more, right?  Dynamic speech bubbles  handle that chat-like look with ease.

Use  display: inline-block  and  white-space: pre-wrap  to respect line breaks and let your bubble grow with each new line, keeping those conversations flowing and natural.

How can CSS pseudo-elements be used in speech bubbles?

Think of pseudo-elements as your special toolkit.  ::before  and  ::after  make for crafty craftsmen in creating those extra details like tails or decorative marks, without additional  HTML .

With CSS, they position and style seamlessly, adding layers to your speech bubble masterpiece.

Do I need images to create speech bubbles in CSS?

Wave goodbye to image files! Pure  CSS speech bubbles  are totally doable and definitely recommended. Borders, shadows, and the magical pseudo-elements handle all the visuals.

It’s a performance-friendly approach—faster load times, and better scalability. A win-win scenario for today’s sleek web.

Can CSS speech bubbles include interactive elements?

Certainly! It’s the digital age; static is so last season. Make those  interactive web components  play nice within your speech bubbles. Think buttons, forms, or even links. With a dab of JavaScript , trigger them to appear on click or hover—interactivity is king.

What’s the best practice for positioning CSS speech bubbles?

Positioning can be tricky, but it’s all about context. Relative and absolute combos work wonders.

Nest your bubble inside a positioned container (hello,  position: relative ) and then, give yourself the freedom to move that bubble to your heart’s content with  position: absolute . Keep it contained, yet free-floating.

And that’s a wrap on the  CSS speech bubble  journey. You’ve crossed the bridge from simple text blocks to engaging conversational UI pieces. Throwing in some  CSS3 sparkle  has hopefully felt like mixing just the right ingredients for a gourmet visual dish.

Here’s the rundown:

• Crafted bubbles with tailor-made  CSS tooltips ? Check.
• Navigated the responsiveness rapids using media queries? Done.
• Aimed for the stars with  accessible web design ? Absolutely.

You’ve come a long way. Those bubbles are now less of a mystery and more of a tool in your belt, ready to be whipped out when your web page starts feeling like a silent movie that’s dying for dialogue. Whether it’s the party pop of an animation or the slick stealth of a tooltip, user conversations on your sites just got a whole lot snazzier.

Remember, it’s all about breathing life into pages. With these tips, go on, make the web not just informative but also undeniably interactive.

If you liked this article about CSS speech bubbles, you should check out this article about CSS range sliders .

There are also similar articles discussing javascript text animation , CSS dashboard , product card design , and CSS pagination .

And let’s not forget about articles on CSS scroll effects , CSS shadow effects , CSS lists , and CSS search boxes .

Categorized in:

Share Article:

Bogdan Sandu

I've been passionately working with WordPress since 2008 both as a publisher and as a theme developer. I know, the grey hairs on my head say that's a long time ago.

Related Articles

34 css tooltip examples to enhance user experience, 42 stunning css animation examples to inspire you, 38 effective css headers examples you can use, 37 inspiring css carousels for modern websites, other stories, 18 bootstrap tooltips you need to check out, 39 creative css masonry layouts.

Free Web Design Code & Scripts

Home / HTML5 & CSS3 / 9+ Simple Speech Bubble in CSS

9+ Simple Speech Bubble in CSS

This code provides a simple way to create a simple speech bubble in CSS. It allows you to style speech bubbles with various shapes, including square, round, and triangular, at different locations on the screen. This code is helpful for adding visually appealing speech bubbles to your web content.

You can use this code in your website’s design to create eye-catching speech bubbles for comments, tooltips, or messages. Moreover, it’s easy to customize and can improve the overall design of your web pages.

How to Create Simple Speech Bubble in CSS

1. First, include the HTML structure for your speech bubbles. You can create multiple bubbles by duplicating the provided HTML code blocks. Each code block represents a separate speech bubble.

2. The CSS code in the provided snippet defines the appearance of your speech bubbles. You can customize the bubble’s shape, border, and position by adding or modifying CSS classes.

For example, adding the “.round” class will give your bubble rounded corners, while “.border” adds a border to it.

To make your speech bubbles unique, adjust the CSS properties in the ".talk-bubble" and ".talktext" classes. You can change the background color, text alignment, padding, and more. Experiment with different styles until you achieve the desired look.

Use classes like ".tri-right," ".left-top," ".right-in," and others to position your speech bubbles as needed. For example, ".tri-right.left-top" will place a right triangle on the left side at the top of the bubble.

That’s all! hopefully, you have successfully created a Simple Speech Bubble in CSS. If you have any questions or suggestions, feel free to comment below.

Similar Code Snippets:

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.

Leave a Comment Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed .

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

How to create a speech bubble with CSS

How to create speech bubble with CSS and HTML. Speech bubbles can be used for testimonials or tooltips.

🔔 Table of contents

Before modern CSS, creating a speech bubble had tp involve a image or using JavaScript to inject DOM elements.

We will go through a few examples of different speech bubbles to show how they can be used on your

What are speech bubbles and when they are useful?

Speech bubbles are quite useful UI component that can improve your website design. They can be used

A basic speech bubble

To create a basic speech bubble, we just need to make use of a HTML element and the ::after pseudo element.

See the below codepen for the full code and how it looks.

Now we style the CSS speech-bubble class. We just want to make the text to be white and aligned in the

Now our approach is to have a box of 0 width and 0 height. Then we only color in the “top” border and hide the other border edges (left, right, bottom borders)

Example #1 - Testimonial CSS speech bubble

For this example, the arrow is to the point to the left. To get this effect, we still show the top border, but now hide left border.

Additionally for this example, instead of using the pseudo ::after element, we can use a div instead

Example #2 - Speech Bubble on button hover (Tooltip)

We follow the same pattern as in the basic example, but now the speech bubble will appear on the :hover state of the button.

high up the device’s screen. In this case we need to consider the screen position and place the tooltip accordingly (eg bottom, left, right)

Concluding thoughts

The trick to creating speech bubbles with CSS is using the ::after pseudo element and showing or hiding the top, left,

👋 About the Author

👉 see also 👈.

CSS Speech Bubbles

CSS Speech bubbles are awesome elements to use in online comic books or designs that mimic comic books. Even if you are not into comic books, you might still enjoy this tutorial about how to create speech bubbles with CSS. I have a lot of experience with CSS and there are many ways to create speech bubbles with CSS. For this tutorial I’ve chosen “the simple” way that is still like your own personal CSS speech bubble generator with customizable CSS variables and pluggable CSS classes. Read till the end to find out how to do this and also get some cool animations that you can apply on your CSS speech bubbles.

Without anymore fluff, let’s get into it.

Download the Speech Bubble CSS

⬇️ speech-bubble.css (4Kb)

You can place the contents of this CSS file inside your page between <style> tags, or you can upload the speech-bubble.css file to your server and then add this to your page:

< link  rel ="stylesheet"  href =" path/to/upload/folder/ speech-bubble.css" >

The whole idea for making this speech bubble in CSS came up when I saw this free comic strip template on PSDDude. I thought it would be a great idea to make a website with the layout of a comic book. Putting together the comic strip template with these CSS speech bubbles should not be too difficult. Let me know in the comments if you are into comic books and if you create something awesome with these.

Customize the Speech Bubble Design with Provided CSS Classes

Use the following CSS classes together with the base .speech-bubble class:

• t, l, r or b for placing the arrow top, left, right or bottom (by default the speech bubble arrow points downwards)
• round or circle for bubble shape (by default the dialog box has square corners); TIP: Circle works best for dialog bubbles, because in old comic books and newspaper doodle drawings, that’s how they were drawn.
• pop or float for animation (by default the text bubble is static)

You can also combine classes for the arrow position, border and animation. So something like class="speech-bubble round l pop" will give you a round dialog box with the arrow on the left and that will pop on appearing.

So, let’s see how the CSS speech bubble works:

Speech Bubble CSS & HTML Code

We’ll start with our HTML code for the speech bubble, which will be a simple div to which we apply a class name very ingeniously named speech-bubble:

Don’t worry!

I’ll explain each step along the way how to build the speech bubble elements and also, at the end of this article you will find the Codepen demo link where you can copy/paste the speech bubble CSS & HTML code.

By default, the code above doesn’t do much, except print out the text inside the div. This is basically the text bubble or message box where you can put your own text.

Boilerplate Conversation Bubble CSS Code And Customization with CSS Variables

Css code for basic settings:.

The provided CSS code defines a set of custom variables used for creating a speech bubble with various customizable properties:

• --arrow-w : This variable sets the width of the arrow of the speech bubble to 0.5em.
• --arrow-h : This variable sets the height of the arrow of the speech bubble to 1em.
• --bubble-corners : This variable determines the roundness of the bubble’s corners. A value of 0 indicates sharp corners (so a square text bubble) while something like 50% would make a circle or elliptical talking bubble.
• --w : This variable sets the maximum width of the speech bubble, which is 12em in this case.
• --border-size : It defines the size or thickness of the border around the speech bubble, which is set to 3px.
• --text-color : This variable sets the color of the text inside the speech bubble to black.
• --bubble-color : It determines the background color of the speech bubble itself, which is set to white.
• --border-color : This variable determines the color of the border around the speech bubble, also set to black.

These custom variables provide a convenient way to adjust the appearance of the conversation bubble by simply modifying their values. The variables are to the CSS class named .speech-bubble to style all speech bubbles throughout a webpage consistently. If you want to have different types of talking bubbles of various sizes, colours, etc. then you would define different CSS classes with different values for the CSS variables. Then, apply that class names to the speaking bubble alongside with the .speech-bubble class.

Quick note: For the arrow sizes I’ve used em. “em” is a relative unit of measurement in web design and typography. It is based on the font size of the element or its parent element. 1em is equal to the current font size of the element. For example, if the font size of an element is 16 pixels (px), then 1em is equivalent to 16px. This is only a convenient way to express sizes, if you like px more then use that.

The actual speech balloon CSS code:

Basically that’s all the code for a simple and pure CSS speech bubble. This code creates the following:

• a square CSS speech bubble; the text message bubble is square because the --bubble-corners is set to 0
• with cursive fonts as I think that’s the closest to comic book fonts
• text color is set to the --text-color variable value from the main .speech-bubble class
• the dialog bubble background color is set to white by the --bubble-color CSS variable
• using the box shadow we add the border

CSS Speech Bubble Tail or Arrow

For the speech bubble arrow (also known as the speech bubble tail), or the little pointer attached to the dialog box, I’ve used the following CSS:

I’ve implemented the arrow of the speech bubble as 2 overlapping triangles: one to match the bubble border and one for the bubble content. In one of my old posts I’m talking in-depth about how to create triangles in CSS , so you might want to give that a look if you’re interested. Basically, we invoke some pseud-elements magic here.We add thick border for an empty rectangle for which we make 3 of the borders transparent.

By default, the .speech-bubble class will paint the speech bubble arrow below. Use the l , r or t pre-made CSS classes to make the arrows to the left, right or top. Consult the chart at the top for a quick CSS class name reference.

What if you don’t need an arrow for the speech bubble and simply want to have a narration box or caption text box? Easy! Just set 0 to the CSS variables --arrow-h and --arrow-w and the speech bubble will become a comic book narration box (if it’s a square). If it’s circular, then it’s a comic book thinking bubble.

Speech Bubble CSS Border Shape

Going from a square dialog box to a rounded comic book speech box or to a circular bubble is just a matter of adding one of the CSS class names round or circle

Speech Bubble CSS Codepen Demo

See the Pen Speech Bubble CSS by Ion Emil Negoita (@inegoita) on CodePen.

Be a cool dude – share this CSS speech bubble tutorial!

John Negoita

Related posts.

Scrolling Text Using HTML

September 8, 2024

April 1, 2024

CSS User Interface Basics

January 18, 2024

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

Coding is Love

Css speech bubbles.

In this article, I’m going to show you guys how to create the different kinds of speech bubbles. In past creating a speech bubbles was considered as a very difficult task due to the usage of the images in it. but nowadays we can create the speech bubbles very easily by using CSS3 Properties.

Speech bubbles: Speech bubbles are the very nice way to indicate the content on the web and nowadays the speech bubbles are mostly used in the chat rooms. and we can see the speech bubbles used in the WhatsApp chat box and in many other applications. Speech bubble gives a great and very effective look.

Before jumping into the coding —  let me explain the basic concept behind creating an speech bubble, First we need to create a rectangle/box/circle using div element or any other HTML elements and after that we need to incorporate the different shapes of triangles/circles to form the different kinds of the speech bubbles.

• Start with markup, For creating a simple speech bubble we need a single markup element, here I’m going with div element with two classes in it. one class is for styling the box and one more class is for creating the speech bubble triangle. /* HTML Structure */ &lt;div class="box sb1"&gt;I'm speech bubble&lt;/div&gt; &lt;div class="box sb2"&gt;I'm speech bubble&lt;/div&gt; &lt;div class="box sb3"&gt;I'm speech bubble&lt;/div&gt; &lt;div class="box sb4"&gt;I'm speech bubble&lt;/div&gt;
• Check the styling for the class:box which I’ve mentioned above.
• Now style the same div element with class:sb1 ( this class is for creating the triangle for speech bubble), here I’m using :before pseudo element for creating the triangle. .sb1:before { content: ""; width: 0px; height: 0px; position: absolute; border-left: 10px solid #00bfb6; border-right: 10px solid transparent; border-top: 10px solid #00bfb6; border-bottom: 10px solid transparent; right: -20px; top: 6px; }
• just by changing the top, left, bottom, right properties we can create the different kinds of the speech bubbles in this genre.

See the Pen speech bubbles by rajeshdn ( @cool_lazyboy ) on CodePen .0

• Start with markup, For creating a simple speech bubble we need a single markup element, here I’m going with div element with two classes in it. one class is for styling the box and one more class is for creating two triangles. /* HTML Structure */ &lt;div class="box1 sb5"&gt;I'm speech bubble&lt;/div&gt; &lt;div class="box1 sb6"&gt;I'm speech bubble&lt;/div&gt; &lt;div class="box1 sb7"&gt;I'm speech bubble&lt;/div&gt; &lt;div class="box1 sb8"&gt;I'm speech bubble&lt;/div&gt;
• Check the styling for the class:box1 which I’ve mentioned above.
• Now here we need a two triangles, where one triangle will overlay on other triangle. for achieving this effect, I’m going with :after :before pseudo elements. Now style the same div element with class:sb5  ( this class is for creating the triangles for speech bubbles).
• I’m using :before pseudo element for creating the one triangle. .sb5:before { content: ""; width: 0px; height: 0px; position: absolute; border-left: 10px solid #00bfb6; border-right: 10px solid transparent; border-top: 10px solid #00bfb6; border-bottom: 10px solid transparent; right: -20px; top: 6px; }
• Now I’m using :after pseudo element for creating one more triangle and by adjusting the top,right properties we can overlay this triangle on other triangle. and by given white border-color border-left: 7px solid #fff; border-top: 7px solid #fff; we can achieve the effect which we can see in above image. .sb5:after { content: ""; width: 0px; height: 0px; position: absolute; border-left: 7px solid #fff; border-right: 7px solid transparent; border-top: 7px solid #fff; border-bottom: 7px solid transparent; right: -11px; top: 10px; }

See the Pen BWxggN by rajeshdn ( @cool_lazyboy ) on CodePen .0

• Start with markup, For creating a simple speech bubble we need a single markup element, here I’m going with div element with two classes in it. one class is for styling the box and one more class is for creating two triangles. /* HTML Structure */ &lt;div class="box2 sb9"&gt;I'm speech bubble&lt;/div&gt; &lt;div class="box2 sb10"&gt;I'm speech bubble&lt;/div&gt; &lt;div class="box2 sb11"&gt;I'm speech bubble&lt;/div&gt; &lt;div class="box2 sb12"&gt;I'm speech bubble&lt;/div&gt;
• Check the styling for the class:box2  which I’ve mentioned above.
• Now here we need a two triangles, where one triangle will overlay on other triangle. for achieving this effect, I’m going with :after  :before pseudo elements. Now style the same div element with class:sb9  ( this class is for creating the triangles for speech bubbles).
• I’m using :before pseudo element for creating the one triangle. .sb9:before { content: ""; width: 0px; height: 0px; position: absolute; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #00bfb6; border-bottom: 10px solid transparent; right: 50%; bottom: -23px; }
• Now I’m using :after pseudo element for creating one more triangle and by adjusting the bottom,right properties we can overlay this triangle on other triangle. and by given white border-color border-top: 10px solid #fff; we can achieve the effect which we can see in above image. .sb9:after { content: ""; width: 0px; height: 0px; position: absolute; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #fff; border-bottom: 10px solid transparent; right: 50%; bottom: -18px; }

See the Pen speech bubbles 1 by rajeshdn ( @cool_lazyboy ) on CodePen .0

Have a look at the above image, for creating the above rectangular speech bubbles, Just go through my first demo in this article and in addition to that we need to add the border-radius property to a rectangular box that’s it.

See the Pen speech bubbles 3 by rajeshdn ( @cool_lazyboy ) on CodePen .0

• Look at the above image, for creating the Circular speech bubbles, I’m going to consider a div element with class:circular-sb and two more div elements inside the parent div element. /* HTML Structure */ &lt;div class="circular-sb"&gt; I'm Circular speech bubble &lt;div class="circle1"&gt;&lt;/div&gt; &lt;div class="circle2"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="circular-sb"&gt; I'm Circular speech bubble &lt;div class="circle3"&gt;&lt;/div&gt; &lt;div class="circle4"&gt;&lt;/div&gt; &lt;/div&gt;
• Now style the parent div element with class:circular-sb , this is the larger circle with content in it. .circular-sb { width: 250px; border: 5px solid #00bfb6; padding: 80px 0px; margin: 30px auto; border-radius: 50%; text-align: center; font-size: 24px; font-weight: 900; font-family: arial; position: relative; color: #00bfb6; }
• Now here we need a total of three circles, which we are going to incorporate into the parent circle. which we can see clearly in the above image. first we need to style the child div element with class:circle1 and then use the :before pseudo-element to get the above effect by overlaying the pseudo element on it. and by using top, right, left, bottom properties we can place the child circles where ever we want in the parent element. .circle1 { border: 5px solid #00bfb6; position: absolute; width: 25px; padding: 20px; border-radius: 50%; right: -15px; bottom: 23px; } .circle1:before { content: ""; position: absolute; width: 25px; padding: 20px; border-radius: 50%; right: 0px; bottom: 0px; background: #fff; }
• Now style the child div element with class:circle2 .circle2 { border: 5px solid #00bfb6; position: absolute; width: 5px; padding: 10px 15px; border-radius: 50%; right: -60px; bottom: 5px; }
• Follow the above steps and we can create many different circular speech bubble.

See the Pen circular speech bubbles by rajeshdn ( @cool_lazyboy ) on CodePen .0

Check out the below demo, In which I’ve created few more different kinds of speech bubbles.

See the Pen different speech bubbles by rajeshdn ( @cool_lazyboy) on CodePen .0

• Recent Posts

• CSS Speech bubbles - July 20, 2020
• Simple Button Hover effect – Border Hover effect - October 9, 2017
• Glowing Social icons hover effect - September 11, 2017

Sign me up for the newsletter!

awesome!thanks for share.

thanks for this job , I’m going to use it now .

This is a very clever and easy solution, many thanks!

How to Make Comment Speech Bubbles Using Pure CSS

Today we’ll run through how to make speech bubbles using nothing but CSS (and our HTML of course). No images, no faff, no fluff and certainly no fom-toolery.

Without further ado…

First thing is first, we need our HTML.

Nothing special there, just two incredibly simple lines of code containing some truly engaging conversation. Next up? Let’s get all into the CSS.

Okay we’re just getting started, but the above code does two things. Firstly, it sets up our <p> tag to have a little padding, a little styling, something we can be proud to show mom. I’m also using the Open Sans font in my screenshots, but of course any font you want will work just fine. Secondly, we’re using the :after pseudo element to create a little triangle. Essentially, we create the triangle by making a content-less, 0 width, 0 height element with some fancy tweaks to our borders. The absolute positioning works specifically well for this application, but you may need to adjust top and right values depending on what the size of your paragraphs will be.

That gives us something like this:

Still, that’s a wee bit bland.

Let’s alternate things a bit. Try replacing your CSS with the following:

Which gives us something like this:

We could go on and on, try adjusting the positioning and swapping out the borders on the :after triangles to get them to go vertically and horizontally. Add in an avatar or two, maybe a non-obtrusive time stamp and you’ve got yourself a smorgasbord of possibilities.

Up Next: How to Test Localhost on iPhone

Create CSS Speech Bubble with Border

A speech bubble is a visual element that shows the quote or special text that points to something. In web design, it is used in the testimonial to indicate the reviews , tooltips, and text chat interface. Besides this, speech bubbles are also used in the tour wizard to introduce the users to the new interface. In this tutorial, you will come to know how to create a speech bubble using CSS border property with different sizes and colors.

Before going further, I would suggest you check the demo page to see the various examples of the speech bubbles. Generally, it is a div element styled as a speech bubble. You can place any HTML element (like image, hyperlink, or button) inside it that you want to show in the speech bubble.

Whether you want to make a CSS message box , a tooltip container, or something like that, you can easily integrate this speech bubble example.  Similarly, you can also apply any additional CSS to the speech bubble in order to fit your needs.

The HTML Structure

In order to create a speech bubble, we just need to wrap text into a div element. So, create a div element with a class name "speech-bubble" and place your text inside it.

As you have seen in the above image, there are various speech bubbles of different colors and sizes. The CSS code is common for each speech bubble. Anyhow, you can add some additional classes to make it different. Like, you can add a class name "rounded" to make its corner rounded.

Similarly, if you want to place multiple speech bubbles with different colors. Then you can add another class name for the custom color of the background.

You can also change the size of a speech bubble by adding a class name for the size. Later, this class can be styled for the large text extra padding for the speech bubble. So, define a class name "large" for the speech bubble as follows:

The following HTML example for the speech bubble contains everything combined.

You are not limited to place only text inside the speech bubble, you can also add any other HTML elements like image, links, etc or whatever you want to add.

CSS Styles for the Speech Bubble

After creating HTML, now it’s time to style the speech bubble with CSS. So, target the "speech-bubble" class and define its background, color, font-size, mini-width, and margin property as described below. Here, the important thing is the CSS position property that should be relative. So, specify the position and set the "top" value for the vertical-align property.

After that, use the CSS :after pseudo selector in order to make the arrow icon with CSS border property. The trick is that we’ll transparent the border of the other three sides and set the color for only one side border. As a result, the border looks like an arrow icon.

Therefore, define the CSS border property with 1em width/thickness and transparent color.  Then set a color value for the top side using the “border-top-color” property. Keep its absolute position, define the 100% top value in order to attach with a speech bubble container. Here, the content is a necessary property, so define it and keep the blank value. Similarly, define the 0 value for the width and height.

Basically, the style for a general-purpose speech bubble has been completed. Now, we’ll define some styles for the extra classes in order to make the speech bubble more attractive.

Style Variant for Speech Bubble

Now, define the styles for the “large” class name. You can set the custom values for the font-size and padding property as you want. Similarly, the min-width property defines the minimum width of the speech bubble. So, you can also control the width in this class name.

In order to make the rounded border, we just need to define the CSS border-radius property for the "rounded" class name. You can set the custom values for the border-radius according to your needs. If you want to make a speech balloon or circular speech bubble, then set the "50%" value for the border-radius.

Finally, define the background color for the custom background color class. Here, the important thing to notice is that you’ll also need to change the border color to keep the same.

You have done it! hopefully, now you are able to create a CSS speech bubble with an arrow icon with border property. If you have any questions or suggestions, let me know by comment below.

You Might Be Interested In:

• CSS Tutorial
• CSS Exercises
• CSS Interview Questions
• CSS Selectors
• CSS Properties
• CSS Functions
• CSS Examples
• CSS Cheat Sheet
• CSS Templates
• CSS Frameworks
• CSS Formatter

How to Create Speech Bubbles Without Images using CSS ?

We can create awesome speech bubbles using HTML and CSS with no image, no JavaScript, no extra frameworks, or anything.

With a single HTML div, element we are creating a speech bubble, you may choose any other element. We will make a simple box with some styles which we can adjust according to our choices. After that, we will make a triangular tip to our box to make it look like a speech bubble. The important part is the positioning relative or absolute .

Example: The following code helps in creating a speech bubble using HTML and CSS3.

Similar Reads

• Web Technologies
• CSS-Properties
• CSS-Questions

Please Login to comment...

• Top AI Writing Assistants with No Login, No Sign-Up, and Unlimited Use in 2024
• Top Free AI Sentence Rewriter Tools in 2024
• Best Transcription Software in 2024 (October Updated)
• Top AI Drawing Apps in 2024: Most Used in the USA
• GeeksforGeeks Practice - Leading Online Coding Platform

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

• ▼HTML CSS Exercises, Practice, Solution
• Introduction
• HTML Basic Exercises
• ▼HTML and CSS Exercises
• Create a simple HTML page with title heading paragraph emphasis strong and image elements
• Create a complex HTML table
• Create a simple HTML Form covering major form elements
• Embed Video in an HTML page
• Create a Navigation bar (with dropdown) with CSS
• Create a CSS Grid
• Create a CSS based sticky footer
• Create a CSS3 based Zebra striped table
• Create a CSS3 based button
• Use CSS3 to make an image rounded shape
• Create a stitched look
• Create CSS3 Corner Ribbon
• Create CSS3 blurry text effect
• Create CSS3 speech bubble shape
• Create image cross fade with CSS3 transition
• Use Google Font
• Use Font Awesome Vector Icons with Bootstrap3
• Calculating Values With CSS3 calc()
• Style first letter and first line
• Style first and last element
• Style the element which is not empty
• Select elements by attribute
• Target attribute begins with a certain value
• Set count and insert it before elements
• Let padding and border not affect available width and height
• create linear, radial, repeating linear and repeating radial gradients with CSS3
• Create a border image With CSS3
• Create columns With CSS3
• Set style for link hover active and visited states of hyperlink
• Type selector
• Descendant selector
• Child selectors
• Adjacent sibling selectors
• Style placeholder text

HTML CSS Exercise - Create a speech bubble shape with CSS3

Html css exercise - 14.

In this exercise you will Create a speech bubble shape with CSS3.

On completion, the page will look like following

Use the following editor to complete the exercise.

See the solution in the browser

See the Pen html css common editor by w3resource ( @w3resource ) on CodePen .

Previous: Create a Blurry text with CSS3. Next: Image cross effect with CSS3 transition.

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.

Follow us on Facebook and Twitter for latest update.

It will be nice if you may share this link in any developer community or anywhere else, from where other developers may find this content. Thanks.

https://www.w3resource.com/html-css-exercise/speech-bubble.php

• Weekly Trends and Language Statistics

Create a free profile to get unlimited access to exclusive videos, sweepstakes, and more!

Dr. Contessa Had a “Horrible” Mishap on Below Deck Sailing Yacht That Didn’t Air

Married to Medicine 's Dr. Contessa Metcalfe dished on an unseen moment from her time on Below Deck Sailing Yacht Season 5.

During the Season 5 premiere of Below Deck Sailing Yacht ,  Married to Medicine 's  Dr. Contessa Metcalfe made a star appearance as co-primary charter guest for the first charter of the season but behind the scenes, things weren't exactly ship-shape during her trip.

How to Watch

Watch Below Deck Sailing Yacht on Bravo on Monday, October 7 at 9/8c and next day on  Peacock . Catch up on the Bravo app . 

As Contessa revealed in an exclusive interview with The Daily Dish , she had "a bit of a situation" onboard. "My luggage did not come," she said. "It was horrible, [but] everybody was so sweet."

Basically, while Dr. Contessa's entire group made it through their layover, her luggage didn't.

So, to remedy this, she borrowed some clothes and shopped around at some "cutesy little shops close to the pier" to build her vacation wardrobe. 

The new Season 5 crew  also came in clutch. "Everybody was so nice. They even offered to go out in town and go shopping for me," Contessa shared. "I just have to just sing the praises of everybody."

Chief stew  Daisy Kelliher  got a special shoutout, too. Why? Because she loaned Contessa her very own skirt. "Daisy was great," the doctor noted. "It was amazing."

Here's What You May Have Missed on Bravo:

What Daisy Kelliher's Been Up to Ahead of Below Deck Sailing Yacht Season 5 (EXCLUSIVE)

Meet the Below Deck Sailing Yacht Season 5 Crew Taking on Ibiza (PHOTOS)

Daisy Kelliher Shares the Latest on Her Egg Freezing Journey: "I Have Decided..."

Dr. Contessa Metcalfe's experience on Below Deck Sailing Yacht Season 5

All in all, Contessa said her and trip was a blast. "We just had so much fun. Everybody was just so awesome. We didn't want to get off the ship," she recalled.

Dr. Contessa Metcalfe Shares Big Career News Ahead of Below Deck Sailing Charter: "A Blessing"

"We love to travel in style, so this was absolutely amazing. I've always wanted to go to Ibiza, and I had this belief in my heart that I was kind of approaching the age of being too old to go, so it was nice to kind of be able to do it in an elegant fashion, so to speak," Contessa continued. "Because when we go on vacation, we believe in really letting your hair down."

Because the doctor and her friends live such "buttoned-up" lives at home, they like to let loose on vacation.

"The idea of going to the biggest party place in the world ... I've always wanted to go, but almost felt like I was missing my opportunity. So when this came about, it was like, 'Oh, we've got to do it.' And then to be able to do it on a yacht — a huge sailboat — that's just icing on the cake," she concluded. "And being catered to every moment of every day, it was just an exquisite experience from the moment we stepped on the yacht. It was just luxury, from the beginning to the end."

• Contessa Metcalfe
• Daisy Kelliher

Below Deck Sailing Yacht

• Married To Medicine

Related Stories

Daisy Sheds New Light On the “Hard to Watch” Dinner Disaster

Daisy Has a Hilarious Reaction to Season 5's Chef Being 22

Daisy Reveals a Behind-the-Scenes Below Deck Sailing Secret

Are Daisy Kelliher & Colin on Good Terms? See His Last Text

Dr. Contessa Metcalfe Shares Career News Ahead of BDSY Charter

What Daisy Kelliher's Been Up to Since Last Season

Daisy Kelliher Shares an Update on Freezing Her Eggs

Meet the Below Deck Sailing Yacht Season 5 Crew

Below Deck Sailing Yacht Season 5 Trailer, Cast, Premiere Date

Did Daisy Kelliher Play a Part in Lindsay's Pregnancy News?

Daisy Shares an Update on Her Sister Following an Accident

What Daisy's Been Up to Since Season 4 of Below Deck Sailing Yacht

Trending videos.

Stacey Rusch Tells Ashley Darby She Doesn't Have Sex with Her Boyfriend

Hell Has Frozen Over: Gizelle Bryant Invites Wendy Osefo to Lunch

Gary King Crashes a Tender

The First Below Deck Sailing Yacht Charter Guest Is a Familiar Face

Mia Thornton Gives an Update on Her Relationship with Gordon... and Inc

Your First Look at the Below Deck Mediterranean Season 9 After Show

Bri Muller: "I Was Suspicious of Ellie"

Your First Look at Below Deck Sailing Yacht Season 5

Kate Chastain Defends Bri Muller's Laundry Burn Book

Daisy Kelliher Is Shocked to Learn How Young Chef Cloyce Martin Is

Chef Cloyce Martin Shows Off His Secret Rapping Skills

Kyle Richards on Why She Filmed That Music Video with Morgan Wade

Latest Videos

Recommended for You

Bravo Fan Fest Is Heading to Miami in November

Where Did the MDLLA Cast Go to College?

Shop "Receipts! Proof! Timeline! Screenshots!" Merch

Add a speech bubble to your projects

Snagit’s powerful callout tool feature makes your screenshots and images stand out.

How to add a speech bubble to a photo or document

Whether you’re creating how-to guides, presentations, or tutorials, Snagit’s Callout Tool adds clarity and context to your visuals. With a variety of customizable options, Snagit makes it easy to emphasize key areas and communicate your message effectively.

Use Snagit to take a screenshot or import an image that needs added context. You can also upload a document in image format that needs edits.

Open the Snagit Editor and choose the Callout option from the toolbar. Explore a wide range of styles and colors to match your image. You can even create multi-tail callouts to point out multiple sections of your image.

Type your message directly into the speech bubble. Snagit’s flexible text tool allows you to customize the font, size, and color to match your design.

Why Snagit is the best choice for adding speech bubbles

Wide variety of options.

Snagit offers an extensive selection of callouts, arrows, and other shapes. Customize each one to suit your specific needs and ensure your visuals are both clear and attractive.

Focus on details

Use the magnify tool to highlight intricate parts of your image. Pair this with the step tool to ensure your tutorials, how-tos and other documentation are crystal clear.

Create reusable speech bubbles

Did you create the perfect callout? Save it as a QuickStyle for easy future reference so all of your documentation has the same style of presentation.

Looking for help with speech bubbles?

Get Snagit today

Ready to create images that communicate clearly? Get started with Snagit today and unlock a new, improved level of communication.

Best for quick screenshots and recordings

Snagit’s easy and powerful screen capture tool with:

Snagit connect bundle.

Best for sharing and collaborating

Everything in Snagit, plus:

Snagit pro bundle.

Best for complex documentation and creation

Everything in the Snagit Connect Bundle, plus:

Can i customize the shape and color of speech bubbles.

Yes, Snagit allows you to fully customize the shape, color, and size of speech bubbles. You can also adjust the text style within the bubbles to match your project’s aesthetic.

Is it easy to add multiple speech bubbles to a single image?

Absolutely! You can add as many speech bubbles as you need to an image, each with its own unique text and style. This is perfect for detailed explanations or multi-step instructions.

Can I save my customized speech bubbles for future use?

Yes, Snagit allows you to save customized speech bubbles as preset styles, making it easy to apply the same style across multiple projects. This is a great time-saver if you frequently use speech bubbles in your visuals.

Does Snagit offer other tools to enhance my images along with speech bubbles?

Definitely! Snagit includes tools like the magnify feature, arrows, and the step tool to complement your speech bubbles. These features help you create clear and detailed visuals that effectively communicate your message.

Is Snagit suitable for professional use?

Yes, Snagit is trusted by professionals across various industries for its powerful and easy-to-use features. Whether you’re creating training materials, presentations, or marketing content, Snagit’s speech bubbles and other tools will help you produce polished and professional visuals.

Can I reposition or resize speech bubbles after adding them?

Yes, you can easily reposition and resize speech bubbles in Snagit. Simply click on the speech bubble to drag it to a new location or adjust its size to fit your image perfectly.

Are there any templates in Snagit?

Snagit provides a variety of pre-designed templates that you can use directly or customize to meet your needs. This makes it quick and easy to add professional-looking bubbles to your visuals.

Can I use speech bubbles with animated GIFs in Snagit?

Snagit allows you to add speech bubbles to your visuals, which can be turned into videos and animated GIFs. This option is great for creating engaging, informative GIFs that include clear communication through text.

How do I ensure my callouts are aligned properly on the image?

Snagit includes alignment tools that help you position accurately. You can snap bubbles to gridlines or align them with other elements on your image for a clean, organized look.

Is there a way to add speech bubbles to multiple images?

Yes, Snagit allows you to easily copy and paste callouts and other annotations from one image to others. Or save your customized speech bubble styles for reuse whenever you like. Snagit is ideal for creating consistent visuals across a series of screenshots or images.

Still can’t find what you need? Contact us and we’ll help you out.

• Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers
• Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand
• OverflowAI GenAI features for Teams
• OverflowAPI Train & fine-tune LLMs
• Labs The future of collective knowledge sharing
• About the company Visit the blog

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Get early access and see previews of new features.

Staging Ground badges

Earn badges by improving or asking questions in Staging Ground.

How to make speech bubble appear on hover in text

I want to appear a speech box which contains text information or image on hover. When a mouse moved hovered text then the speech box appears just like Wikipedia. I had tried by creating some code but the problem is that the box not aligned with the hovered text and I can't able to use a speech box in a paragraph when I add a speech box in a text that text gets make a separate para. I hope you will understand what I want to know, If not try me help out to create an information box just like Wikipedia.

The code which I have written:--

.hide { display: none; } .speech { position: relative; width: 400px; height: 100px; text-align: center; line-height: 100px; background-color: #fff; border: 8px solid #666; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; -webkit-box-shadow: 2px 2px 4px #888; -moz-box-shadow: 2px 2px 4px #888; box-shadow: 2px 2px 4px #888; display: none; } .speech:after { content: ' '; position: absolute; width: 0; height: 0; left: 38px; top: 100px; border: 15px solid; border-color: #fff transparent transparent #fff; } .speech:before { content: ' '; position: absolute; width: 0; height: 0; left: 30px; top: 100px; border: 25px solid; border-color: #666 transparent transparent #666; } .myDIV:hover+.speech { display: block; color: red; } <h2>Display an Element on Hover</h2> <div class="myDIV">Hover over me.</div> <div class="speech">I am shown when someone hovers over the div above.</div>

• 1 Like this? jsfiddle.net/khrismuc/rd6hy9gz –  user5734311 Commented Apr 18, 2020 at 16:47
• the same I had made I want that I a para I can put hover on any text without getting Divison that is text should be in the same para. –  Joohu Kumari Commented Apr 19, 2020 at 1:54
• Put your div's inside another relative positioned div.
• Speech div should be the first child of the relative parent div, and positioned absolute.
• Then you can adjust the speech div by styling as such: "top: xxpx; left:xxpx".
• Change css to show .speech when parent div is hovered.

You should have the relative position parent div so your speech bubble can be adjusted depending on the parent's position.

Here's a example below:

• I can't able to understand please make changes code I provide. Please –  Joohu Kumari Commented Apr 18, 2020 at 17:03

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Sign up or log in

Post as a guest.

Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy .

Not the answer you're looking for? Browse other questions tagged html css or ask your own question .

• The Overflow Blog
• Meet the AI-native developers who build software through prompt engineering
• Rust is evolving from system-level language to UI and frontend development
• Featured on Meta
• Preventing unauthorized automated access to the network
• Upcoming initiatives on Stack Overflow and across the Stack Exchange network...
• Feedback Requested: How do you use the tagged questions page?
• Proposed designs to update the homepage for logged-in users

Hot Network Questions

• Help identifying a rare version of Fiend Folio
• How would a Magic-Fueled Industrial Revolution shape social classes in cities?
• Why does only the Septuagint have "Cainan" in the genealogy in Genesis 10 and 11?
• How conservation of charge explains Kirchoff's current law
• Error handling: catch a TerminatedEvaluation[_]
• How is AES-128 still considered to be quantum resistant?
• Does the bottom rotor on a Coaxial quadcopter spins faster?
• using cat command with different outputs in a loop
• How to itemise with a loop for a given variable with ; as delimiters
• Why not send a Mars rover to Titan?
• Implications of posting copyrighted material on Stack Exchange
• How did “way to go” come to mean “well done”?
• Which part of the Bible supposedly talks of a leader with a mark on his forehead?
• Why does the Schwarzschild solution describe a black hole?
• What does Kant mean by pure intuitions, and why are they not separate from the faculty of sensibility?
• Does study power impact on type 1 error?
• If a semigroup embeds into a group, then is it a subdirect product of groups?
• Limit file IO speed
• ogrinfo always says "Geometry: Unknown (any)" with KML
• How can I troubleshoot and fix an SSH “connection corrupted” issue on a work managed Mac after upgrade to macOS Sequoia?
• Is it practical in real life to drill magnetic screws into someone's skull in order to wear a wig?
• Can weapon special abilities be activated at the same time with a single command?
• Unable to bond two 2.5 Gbps Realtek RTL8156 Ethernet adapters via LACP on Linux
• Can you arrange ABCD...Z into a straight line so that consecutive letters of the alphabet have an odd number of letters between them?

• Today's news
• Reviews and deals
• Climate change
• 2024 election
• Newsletters
• Fall allergies
• Health news
• Mental health
• Sexual health
• Family health
• So mini ways
• Unapologetically
• Buying guides

Entertainment

• How to Watch
• My watchlist
• Stock market
• Biden economy
• Personal finance
• Stocks: most active
• Stocks: gainers
• Stocks: losers
• Trending tickers
• World indices
• US Treasury bonds
• Top mutual funds
• Highest open interest
• Highest implied volatility
• Currency converter
• Basic materials
• Communication services
• Consumer cyclical
• Consumer defensive
• Financial services
• Industrials
• Real estate
• Mutual funds
• Credit cards
• Balance transfer cards
• Cash back cards
• Rewards cards
• Travel cards
• Online checking
• High-yield savings
• Money market
• Home equity loan
• Personal loans
• Student loans
• Options pit
• Fantasy football
• Pro Pick 'Em
• College Pick 'Em
• Fantasy baseball
• Fantasy hockey
• Fantasy basketball
• Download the app
• Daily fantasy
• Scores and schedules
• GameChannel
• World Baseball Classic
• Premier League
• CONCACAF League
• Champions League
• Motorsports
• Horse racing

New on Yahoo

• Privacy Dashboard

MI5 spy chief says Russia and Iran are behind a 'staggering' rise in deadly plots

Britain mi5.

LONDON (AP) — Britain is facing a “staggering rise” in attempts at assassination, sabotage and other crimes on U.K. soil by Russia and Iran, as the two states recruit criminals to “do their dirty work,” the head of Britain's domestic intelligence agency said Tuesday.

MI5 Director General Ken McCallum said his agents and police have tackled 20 “potentially lethal” plots backed by Iran since 2022 and warned that it could expand its targets in the United Kingdom if conflicts in the Middle East deepen.

So far, the threats have been aimed at Iranians abroad who oppose the country's authorities. But McCallum said there is the risk “of an increase in — or broadening of — Iranian state aggression in the U.K.” if the Middle East crisis escalates with Israel launching a major attack in response to Iran’s recent missile barrage.

In a rare public speech setting out the major threats to the U.K. from both states and militant groups, McCallum argued that hostile states, radicalized individuals and a revived Islamic State group have combined to create “the most complex and interconnected threat environment we’ve ever seen.”

McCallum said there also is a risk that Israel’s conflicts with Iran-backed groups — the militant Hamas in Gaza, Hezbollah in Lebanon as well as the Houthi rebels in Yemen — could trigger attacks in the U.K., though so far the crisis has not translated “at scale into terrorist violence” in Britain.

The number of state-threat investigations undertaken by MI5 has risen by 48% in the past year, with Iran, Russia and China the main perpetrators, McCallum told journalists at the U.K.’s counterterrorism command center in London.

McCallum said that since the death of Mahsa Amini , who died in Iranian police custody in September 2022 after being detained for allegedly violating the Islamic republic’s mandatory headscarf law, “we’ve seen plot after plot here in the U.K., at an unprecedented pace and scale.”

He said MI5 and the police have responded to 20 potentially lethal Iran-backed plots since January 2022, up by a third from the figure of 15 the government gave at the end of January.

McCallum said Russia’s military intelligence agency was trying to use “arson, sabotage and more” to create “mayhem” on the streets of Britain and other European countries.

Both Russia and Iran often turn to criminals, “from international drug traffickers to low-level crooks,” to carry out their illegal deeds, he said.

Several alleged state-backed plots have led to criminal charges. In December, a Chechen man was jailed for allegedly carrying out reconnaissance on the offices of a dissident Iranian broadcaster in London. Separately, several suspects are awaiting trial in London over an alleged Russia-linked plan to attack Ukrainian-owned businesses.

Britain is not alone in pointing a finger at Moscow and Tehran. Germany has arrested several people for allegedly spying or planning attacks on behalf of Russia. In May, Sweden’s domestic security agency accused Iran of using criminal networks to target Israeli or Jewish interests in the Scandinavian country.

Past speeches by McCallum and other U.K. intelligence chiefs have emphasized China's increasingly assertive behavior, which in 2022 McCallum called Britain’s greatest "strategic challenge.” On Tuesday, McCallum stressed the importance of the U.K.-China economic relationship but said there were “risks to be managed.”

The U.K.’s official terror threat level stands at “substantial,” the middle of a five-point scale, meaning an attack is likely, and McCallum said that since 2017, MI5 and the police have disrupted 43 late-stage plots, saving “numerous lives.”

While about three-quarters of the plots stem from Islamic extremist ideology and a quarter from the extreme right, he said those labels “don’t fully reflect the dizzying range of beliefs and ideologies we see,” drawn from a soup of “online hatred, conspiracy theories and disinformation." Young people are increasingly involved, he said, with 13% of the subjects of MI5 terror investigations under the age of 18.

He also said there were worrying signs that the Islamic State group is attempting a comeback, despite the collapse of its self-declared caliphate in Iraq and Syria several years ago.

McCallum said that “after a few years of being pinned well back, they’ve resumed efforts to export terrorism," and cited a March attack that killed more than 140 people at a Moscow concert hall and was claimed by IS, as “a brutal demonstration of its capability.”

MI5 has faced criticism for its failure to stop deadly attacks , including a 2017 suicide bombing that killed 22 people at an Ariana Grande concert in Manchester .

“The first 20 years of my career here were crammed full of terrorist threats,” McCallum said. “We now face those alongside state-backed assassination and sabotage plots, against the backdrop of a major European land war.”

MI5, he said, “has one hell of a job on its hands.”

Associated Press writer Jan M. Olsen in Copenhagen contributed to this story.