Nothing Pleases Me


    1.0.12 • Public • Published


    postcss-speech-bubble creates speech bubbles in just a couple of lines of CSS.


    npm install postcss-speech-bubble


    postcss-speech-bubble offers three rules that can be used to build different kinds of speech bubbles.

    bubble: borderSize borderRadius type color;

    • borderSize: border size in px
    • borderRadius: border radius on the speech bubble
    • type: solid or hollow Solid creates a speech bubble that uses the color provided here as background color. Hollow uses the color provided in this rule as the border color.
    • color: Background color of the bubble and the beaker if it is solid border color on bubble and beaker if it is hollow

    bubble-beaker: beakerSize positionOfBeaker;

    • beakerSize: size of the speech beaker. Please provide this in px.
    • positionOfBeaker: Where the beaker should be for the speech bubble. Below are possiblePosition's options:
      • top-right
      • top-left
      • top-center
      • bottom-right
      • bottom-left
      • bottom-center
      • left-top
      • left-bottom
      • left-middle
      • right-top
      • right-bottom
      • right-middle

    bubble-background: color; This is necessary if you need to provide a bubble with a border and a background color. You can define these bubbles by making them hollow and providing the border color and providing a background color through this property.

    Important Note: Please provide width and height for these bubbles or let the content specify the width/height. The bubbles will not look right without proper width/height.


    Solid bubble (No border)

    solid bubble

    .bubble {
      bubble-beaker: 12px top-right;
      bubble: 0 0 solid lightGrey;
      width: 140px;
      height: 80px;

    Hollow bubble

    hollow bubble

    .bubble {
      bubble: 1px 10px hollow black;
      bubble-beaker: 10px left-middle;
      width: 150px;
      height: 100px;

    Hollow bubble with a background

    hollow bubble with background

    .bubble {
      bubble-beaker: 12px right-middle;
      bubble: 3px 0 hollow black;
      bubble-background: #E44146;
      width: 100px;
      height: 120px;




    npm i postcss-speech-bubble

    DownloadsWeekly Downloads






    Last publish


    • archana-s