Speech Bubble Generator

CSS speech bubble generator or comment box generator lets you create speech bubbles with purely css using a single element and :before and :after CSS rules. You can preview and copy or download the generated CSS code.

1Arrow

Location

Position ({{vm.locPosition}}%)

Width ({{vm.locWidth}}px)

Length ({{vm.locLength}}px)

Fluid Positioning

Use Percentage

2Bubble Background

Width ({{vm.bubWidth}}px)

Height ({{vm.bubHeight}}px)

Padding ({{vm.bubPadding}}px)

Corner Radius ({{vm.bubRadius}}px)

Background

3Bubble Border

Thickness ({{vm.bborThickness}}px)

Color

Preview download

Snippet copy


        

HTML Code copy