Modal Maker

Modal Maker

Design, test and generate your Blogger modal.

Modal

Width

px % em rem vw vh auto

Maximum Width

% px em rem vw

Height

auto px % em rem vh

Maximum Height

vh px % em rem

Padding

px % em rem

Border Radius

px % em rem

Border Width

px em rem

Border Style none solid dashed dotted double groove ridge inset outset

Border Color

Shadow None Soft Large Soft Strong Small

Background

Type Solid Linear Gradient Radial Gradient Image Gradient + Image

Solid Color

Gradient Color 1

Gradient Color 2

Gradient Color 3

Direction Top Top Right Right Bottom Right Bottom Bottom Left Left Top Left

Image URL

Image Size cover contain auto

Image Position center top right bottom left

Image Repeat no-repeat repeat repeat-x repeat-y

Overlay

Color

Opacity 0% 15% 25% 35% 45% 55% 65% 75% 85% 100%

Blur 0px 2px 4px 6px 10px 15px

Close Button

Position Top Right Top Left Top Center Middle Right Middle Left Bottom Right Bottom Left Bottom Center

Size

px em rem %

Background Gradient Solid

Solid Color

Gradient 1

Gradient 2

Gradient 3

Gradient Direction Top Top Right Right Bottom Right Bottom Bottom Left Left Top Left

Text Color

Font Size

px em rem %

Radius

% px em rem

Animation None Flash Pulse Shake Rotate Glow Bounce

Animation Speed 0.5s 0.8s 1.2s 2s 3s

Content

HTML Content <h2>My Modal</h2><p>This is a working modal.</p><p>Edit this content from the Content menu.</p>

Text Color

Font Size

px em rem %

Text Alignment Left Center Right Justify

Behavior

Close with ESC

Custom Key

Key

Overlay Click Closes

Lock Page Scrolling

Auto Open

Auto Open Delay

ms s

Generated Output

Working Area