Modal Maker for Blogging

Modal Maker

Design, test and generate your Blogger modal.

Working Area

Modal

Width

Width Unitpx%vw

Max Width

Max Width Unit%pxvw

Height

Height Unitpx%vhauto

Max Height

Max Height Unitvh%px

Padding

Padding Unitpx%em

Border Radius

Border Width

Border Stylenonesoliddasheddotted

Border Color

Border Opacity0%20%40%60%80%100%

ShadowNoneSoftMediumStrong

Modal Position Center Top Left Top Center Top Right Middle Left Middle Right Bottom Left Bottom Center Bottom Right Draggable

Choose a fixed position or “Draggable”. Switching away from Draggable resets the modal.

Background

Background Type Solid Linear Gradient Radial Gradient Image Gradient + Image

Color

Gradient Color 1

Gradient Color 2

Add 3rd Color

Gradient Color 3

Direction0deg45deg90deg135deg180deg225deg270deg315deg

Image URL

Image Sizecovercontainauto

Image Positioncentertoprightbottomleft

Image Repeatno-repeatrepeatrepeat-xrepeat-y

Background Opacity0%20%40%60%80%100%

Background Blur0px2px4px6px10px15px

Overlay

Overlay Type Solid Linear Gradient Radial Gradient Image Gradient + Image

Overlay Color

Overlay Color 1

Overlay Color 2

Add 3rd Color

Overlay Color 3

Direction0deg45deg90deg135deg180deg225deg270deg315deg

Overlay Image URL

Image Sizecovercontainauto

Image Positioncentertoprightbottomleft

Image Repeatno-repeatrepeatrepeat-xrepeat-y

Overlay Opacity0%20%35%45%55%65%75%85%100%

Overlay Blur0px2px4px6px10px15px

Buttons

Button Size

Button Background Linear Gradient Solid Radial Gradient No Color

Button Color

Button Color 1

Button Color 2

Add 3rd Color

Button Color 3

Gradient Direction0deg45deg90deg135deg180deg225deg270deg315deg

Text Color

Font Size

Radius

Button Animations

On Hover none flash pulse shake rotate glow bounce

On Mouse Out none flash pulse shake rotate glow bounce

Animation Times 1× 2× 3× Infinite

Animation Speed 0.4s 0.6s 0.8s 1.2s 1.8s

Optional Window Controls

Show Close Button

At least one close method (ESC, Custom Key or Overlay Click) must stay enabled when the Close button is hidden.

Include Minimize [_]

Minimizes the modal + hides the overlay so you can still use the page.

Include Maximize/Restore [☐]

Behavior

ESC closes modal

Custom Key

Custom Key

Overlay Click Closes

Lock Page Scrolling

Auto Open

Auto Open Delay0.5 second1 second2 seconds3 seconds5 seconds

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

Text Alignmentleftcenterrightjustify

HTML

CSS

JavaScript

Complete Code

Modal