Gradient background for Chat Bubble

Question

I read a lot about Gradient background for Chat Bubble but i cannot find any article to solve my problem. Here is my gradient chat bubble i need to make: https://i.stack.imgur.com/WP379.png

See [this post](https://stackoverflow.com/questions/9428893/how-do-you-make-a-gradient-background-in-css) about the gradient background and [here](https://stackoverflow.com/questions/7073484/how-do-css-triangles-work) or [here](https://css-tricks.com/snippets/css/css-triangle/) about making the little triangle at the bottom. You can add the triangle as a pseudo element. There's no way to make that shape in one singular element without using an SVG. — cjl750, Sep 06 '17 at 04:39

Anish K. · Accepted Answer · 2017-09-06T07:55:21.803

Here's how you can achieve this result using HTML and CSS :

.bubble {
  background : linear-gradient(to right, #67b04e , #40bede);
  padding: 20px;
  position: relative;
  font-family: sans-serif;
  letter-spacing: 0.8px;
  color: #fff;
  line-height: 20px;
  width: 100%;
    -webkit-clip-path: polygon(100% 0, 100% 92%, 74% 92%, 70% 100%, 66% 92%, 0 92%, 0 0);
  clip-path: polygon(100% 0, 100% 92%, 74% 92%, 70% 100%, 66% 92%, 0 92%, 0 0);
}


body {
  padding: 50px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="bubble">
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 


----------


 </div> 
</body>
</html>

anyway to make the triangle dynamic change color to match its gradient parent when screen size change? — Lee, Sep 06 '17 at 07:29

score 1 · Answer 2 · answered Sep 06 '17 at 04:18

It is pretty tricky to get is exactly right, but here's my attempt.

The part about to bottom right should be simple enough - it shows the direction of color change on the element. Then you need to get the top left and bottom right colors. Then, just to make it even closer to the image you have, you can add a 50% mark color as well.

.bubble {
  width: 100%;
  height: 100px;
  background: linear-gradient(to bottom right, #67b04d 0%, #54b796 50%, #a1d9e8 100%);
}

<div class="bubble">

</div>

score 0 · Answer 3 · answered Sep 06 '17 at 05:38

0

for gradient use gradient left

check https://jsfiddle.net/z1qxtqok/1/

background: linear-gradient(left,#67b04f , #40bede);

answered Sep 06 '17 at 05:38

lalit bhakuni

607
5
15

Gradient background for Chat Bubble

3 Answers3