HTML Message Bubble with SVG Design

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>messages</title>
  <link rel="stylesheet" href="./styles.css">
</head>
    <body>
      <main>
        <article class="article">
          <section class="liquid_class"id="1">
            <h1 class="ai_gradient">Messages</h1>
            <div class="bubble">
              <svg class="bubble-inverte-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 614 94" preserveAspectRatio="none">
                <g transform="scale(-1,1) translate(-614,0)">
                  <path d="M598.708,68.2V46.847l-0.009.007A44.66,44.66,0,0,0,554.255,2.041L45.484,1.957a44.85,44.85,0,0,0-.052,89.7L554.2,91.739a44.091,44.091,0,0,0,29.025-10.847c0.054,0.063.1,0.127,0.157,0.192,13.2,15.237,27.881,9.657,27.881,9.657C603.816,89.025,598.708,78.722,598.708,68.2Z"></path>
								</g>
                <foreignObject x="29" y="12" width="100%" height="100%">
                  <p class="bubble-text-inverte"> </p>
                </foreignObject>
							</svg>
              
              	<svg class="bubble-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 628 510" preserveAspectRatio="none">
						    <path transform="scale(1, 0.85)" d="M597.967,425.7V358.788c0.01-1.075.025-2.15,0.031-3.225,0.032-5.247.03-10.493,0.03-15.74v-201.4c0-5.247,0-10.493-.03-15.74-0.027-4.42-.078-8.838-0.2-13.257a192.469,192.469,0,0,0-2.541-28.85,97.261,97.261,0,0,0-9.052-27.439A92.311,92.311,0,0,0,545.827,12.8a97.567,97.567,0,0,0-27.458-9.037,193.015,193.015,0,0,0-28.9-2.539c-4.424-.119-8.848-0.17-13.273-0.2C470.947,1,465.694,1,460.44,1H138.588c-5.253,0-10.506,0-15.76.03-4.425.027-8.849,0.078-13.273,0.2a193.021,193.021,0,0,0-28.9,2.539A97.567,97.567,0,0,0,53.2,12.8,92.313,92.313,0,0,0,12.82,53.135,97.291,97.291,0,0,0,3.768,80.574a192.414,192.414,0,0,0-2.54,28.85c-0.119,4.419-.171,8.837-0.2,13.257C1,127.928,1,133.174,1,138.421v201.4c0,5.247,0,10.493.029,15.74,0.027,4.42.078,8.838,0.2,13.257a192.405,192.405,0,0,0,2.54,28.85,97.291,97.291,0,0,0,9.052,27.439A92.307,92.307,0,0,0,53.2,465.439a97.573,97.573,0,0,0,27.458,9.037,192.94,192.94,0,0,0,28.9,2.539c4.424,0.119,8.848.17,13.273,0.2,5.254,0.031,10.507.029,15.76,0.029H460.44c5.254,0,10.507,0,15.76-.029,4.425-.028,8.849-0.079,13.273-0.2a192.934,192.934,0,0,0,28.9-2.539,97.573,97.573,0,0,0,27.458-9.037A92.356,92.356,0,0,0,563.751,453.5c0.111,0.132.212,0.271,0.326,0.4,29.183,33.379,61.661,21.155,61.661,21.155C609.264,471.3,597.967,448.731,597.967,425.7Z"></path>
						    	<foreignObject x="57" y="28" width="100%" height="100%" transform="translate(2,8) scale(0.80,0.80)">
						    		<p class="bubble-text"> </p>
						    	</foreignObject>
				</svg>
            </div>
      </main>
    </body>
</html>

CSS

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,100..1000&display=swap");
:root{
  --c-glass: #bbbbbc;
  --c-light: #fff;
  --c-dark: #000;

--c-content: #224;
  --c-action: linear-gradient(94deg, rgb(0, 144, 247), rgb(186, 98, 252), rgb(242, 65, 107), rgb(245, 86, 0));

--c-bg: #e8e8e9;

--m-bg :#a5a5a5 ;

--glass-reflex-dark: 1;
  --glass-reflex-light: 1;

--saturation: 150%;

font-size: 20px;
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  background: var(--c-bg);
  color: var(--c-content);

transition: background 400ms cubic-bezier(1, 0, 0.4, 1),
  color 400ms cubic-bezier(1, 0, 0.4, 1);
}

html {
  scroll-behavior: smooth;
}

html.dark-mode{
   --c-glass: #bbbbbc;
  --c-light: #fff;
  --c-dark: #000;

--c-content: #e1e1e1;

--c-bg: #1b1b1d;

--glass-reflex-dark: 2;
  --glass-reflex-light: 0.3;

--saturation: 150%;
}

header {
  z-index: 100;
  position: fixed;
  width: 100%;
  margin-top : 15px;
}
body {
    display: block;
    margin: 0px;
}
a {
  text-decoration: none;
  color: var(--c-content);
  text-decoration-thickness: 0.05em;
  text-underline-position: under;
  text-decoration-color: color-mix(in srgb, currentColor, transparent 70%);
  transition: color 160ms, text-decoration-color 160ms;
}

a:hover {
  background: var(--c-action);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-decoration-color: color-mix(in srgb, currentColor, transparent 30%);
}

/*EFFET GLASS*/

.glass_menu {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
}

.glass_container {
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 70px;
  box-sizing: border-box;
  padding: 8px 12px 10px;
  border: none;
  border-radius: 99em;
  font-size: var(--fz);
  background-color: rgba(255, 255, 255, 0.1); /* fallback */
  background-color: color-mix(in srgb, var(--c-glass) 12%, transparent);
  backdrop-filter: blur(8px) saturate(var(--saturation));
  -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));

box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
    inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
    inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
    inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
    inset -0.3px -1px 4px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent),
    inset -1.5px 2.5px 0px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 2px -6.5px 1px -4px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
    0px 1px 5px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
    0px 6px 16px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
}
#box2{
  display: none;
}
.theme::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  display: block;
  width: 84px;
  height: calc(100% - 8.5px);
  border-radius: 99em;
  background-color: color-mix(in srgb, var(--c-glass) 36%, transparent);
  z-index: -1;
  pointer-events: none;

box-shadow: inset 0 0 0 1px
      color-mix(
        in srgb,
        var(--c-light) calc(var(--glass-reflex-light) * 10%),
        transparent
      ),
    inset 2px 1px 0px -1px color-mix(in srgb, var(--c-light)
          calc(var(--glass-reflex-light) * 90%), transparent),
    inset -1.5px -1px 0px -1px color-mix(in srgb, var(--c-light)
          calc(var(--glass-reflex-light) * 80%), transparent),
    inset -2px -6px 1px -5px color-mix(in srgb, var(--c-light)
          calc(var(--glass-reflex-light) * 60%), transparent),
    inset -1px 2px 3px -1px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 20%),
        transparent
      ),
    inset 0px -4px 1px -2px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
        transparent
      ),
    0px 3px 6px 0px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 8%),
        transparent
      );
}

.theme[data-selected="1"]::after {
  translate: 0 0;
  transform-origin: right;
  transition: background-color 400ms cubic-bezier(1, 0, 0.4, 1),
    box-shadow 400ms cubic-bezier(1, 0, 0.4, 1),
    translate 400ms cubic-bezier(1, 0, 0.4, 1);
  animation: scaleToggle 440ms ease;
  transform-origin: left;
}

.theme[data-selected="2"]::after {
  translate: 76px 0;
  transition: background-color 400ms cubic-bezier(1, 0, 0.4, 1),
    box-shadow 400ms cubic-bezier(1, 0, 0.4, 1),
    translate 400ms cubic-bezier(1, 0, 0.4, 1);
  animation: scaleToggle2 440ms ease;
  animation: scaleToggle2 440ms ease;
  transform-origin: right;
}

.theme_container {
  color: var(--c-content);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 16px;
  width: 68px;
  height: 100%;
  box-sizing: border-box;
  border-radius: 99em;
  opacity: 1;
  transition: all 160ms;
}

.theme_container:hover {
  cursor: pointer;
}

.theme_container:hover .switcher__icon {
  scale: 1.2;
}

.theme_container:has(input:checked) {
  color: var(--c-content);
  cursor: auto;
}

.theme_container:has(input:checked) .switcher__icon {
  scale: 1;
}

.theme_input{
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

.theme_icon {
  fill: var(--c-content);
  display: block;
  width: 100%;
  transition: transform 200ms cubic-bezier(0.5, 0, 0, 1),
              fill 200ms ease-in-out;
}

.theme_icon:hover {
  transform: scale(1.1);
  fill: url(#themeGradient); /* applique le dégradé défini dans le <defs> */
}

.theme_filter {
  position: absolute;
  width: 0;
  height: 0;
  z-index: -1;
}

.glass_hour {
  display: flex;
  justify-content: center;
  width: 80px;
  max-width: 80px;
  text-align: center;
}

.glass_hour p {
  line-height: 0;
  margin: 0;
}

.glass_nav{
  width: 550px;
}

.nav_list{
    display: flex;
    align-items: center;
    padding: 0 10px;
    justify-content: center;
}

.nav_list li{
    list-style: none;
}

.nav_link {
    padding: 20px 10px;
}

.active{
  background: var(--c-action);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.bouton-off {
  pointer-events: none; /* empêche tout clic */
  cursor: default; /* change le curseur */
}

/*ANNIMATIONS*/

@keyframes scaleToggle {
  0% {
    scale: 1 1;
  }
  50% {
    scale: 1.1 1;
  }
  100% {
    scale: 1 1;
  }
}

@keyframes scaleToggle2 {
  0% {
    scale: 1 1;
  }
  50% {
    scale: 1.2 1;
  }
  100% {
    scale: 1 1;
  }
}

/* //////////////////////////////////////////
/  Article Styles //////////////////////// */

.article {
  display: flex;
  flex-direction: column;
  align-items: center;
}

section{
  padding-top: 50px;
}

h1,
h2,
p,
blockquote {
  width: 100%;
  max-width: 700px;
  box-sizing: border-box;
}

h1 {
  font-size: 3em;
  margin: 1.4em 0 0.6em;
}

h2 {
  font-size: 2em;
  margin: 1.4em 0 0.6em;
}

p {
  line-height: 160%;
  margin: 0 0 1em;
}

blockquote {
  margin-left: 0;
  margin-right: 0;
  font-size: 2em;
  padding-left: 1em;
  border-left: 0.1em solid currentColor;
}

figure {
  margin: 1em 0 2em;
  display: flex;
  flex-direction: column;
  align-items: center;
}

figcaption {
  max-width: 600px;
  margin-top: 1em;
  font-size: 0.8em;
  color: color-mix(in srgb, var(--c-content) 60%, var(--c-bg));
}

img {
  display: block;
  border-radius: 0.8em;
  width: 100%;
  max-width: 700px;
  aspect-ratio: 5 / 3;
  object-fit: cover;
}

.box {
  padding: 1em 1.4em;
  border-top: 4px solid color-mix(in srgb, var(--c-action) 50%, transparent);
  border-radius: 0.8em;
  background-color: color-mix(in srgb, var(--c-action) 8%, var(--c-bg));
  transition: background 400ms cubic-bezier(1, 0, 0.4, 1);
}

.bubble {
  display: grid;
  justify-content: center;
  gap: 20px;
}
.bubble-svg {
  margin-left: 60px;
  fill: #007aff;
  width: 300px;
}

.bubble-inverte-svg{
  margin-left: -50px;
  fill: var(--m-bg);
  width: 300px;
}

.bubble-text-inverte {
    color: white;
    font-size: 65px;
    text-align: left;
    margin: -15px 0px 0px 35px;

white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;               
}

.bubble-text{
  color:white;
  font-size: 70px;
  margin: 0px 0px 0px 40px;

white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;  
}

@media screen and (max-width: 940px) {

:root {
    font-size: 16px;
  }

header {
    margin-top: 10px;
  }

#box4 {
    display:none;
  }

#box4.show {
    top: 70px;
    display: flex;
    justify-content: center;
  }

.glass_menu,
  .nav_list {
        display: flex;
        gap: 10px;
        flex-direction: row;
        justify-content: center;
  }
.glass_menu {
  display: flex;
}
.glass_nav {
  width: 330px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#box1 {
  order: 2;
}

#box2 {
  order: 3;
}

#box3 {
  order: 1;
}
#box4{
  order: 4;
}

#box2 {
    display: block;
  }
  .nav__toggle {
    color: var(--c-content);
    font-size: 1.5rem;
    cursor: pointer;
    margin-top: 5px;
  }

.glass_container {
    gap: 6px;
    height: auto;
    display:flex;
  }

.theme_container {
    justify-content: center;
  }

h1 {
    font-size: 1.8em;
  }

h2 {
    font-size: 1.4em;
  }

.box {
    padding: 0.8em 1em;
  }

img {
    aspect-ratio: auto;
  }
}

@media screen and (max-width: 480px) {
  :root {
    font-size: 16px;
  }

header {
    margin-top: 10px;
  }

#box4 {
    display:none;
  }

#box4.show {
    top: 70px;
    display: flex;
    justify-content: center;
  }

#box1 {
  order: 2;
}

#box2 {
  order: 3;
}

#box3 {
  order: 1;
}
#box4{
  order: 4;
}

#box2 {
    display: block;
  }
  .nav__toggle {
    color: var(--c-content);
    font-size: 1.5rem;
    cursor: pointer;
    margin-top: 3px;
  }

.glass_container {
    gap: 6px;
    height: auto;
    display:flex;
  }

.theme_container {
    justify-content: center;
  }

h1 {
    font-size: 1.8em;
  }

h2 {
    font-size: 1.4em;
  }

.box {
    padding: 0.8em 1em;
  }

img {
    aspect-ratio: auto;
  }

.bubble {
  display: grid;
  justify-content: center;
  gap: 20px;
}
.bubble-svg {
  margin-left: 50px;
  fill: #007aff;
  width: 250px;
}

.bubble-inverte-svg{
    margin-left: 10px;
    fill: gray;
    width: 250px;
}

.bubble-text-inverte {
    color: white;
    font-size: 65px;
    text-align: left;
    margin: -15px 0px 0px 35px;

white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;               
}

.bubble-text{
  color:white;
  font-size: 70px;
  margin: 0px 0px 0px 30px;

white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 80%;  
}

HTML Message Bubble with SVG Design

Recommended

HTML SVG Navigation Bar Code

Dark Mode Website Footer HTML CSS Code

Arabic Login Form HTML CSS

HTML

CSS

JS

Recommended

HTML SVG Navigation Bar Code

Dark Mode Website Footer HTML CSS Code

Arabic Login Form HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS