What frame settings can I customize?

You can customize width, padding, border radius, shadow intensity, background color, border color, overlay color, overlay opacity, and entrance animation.

What animations are available?

Four entrance animations: Fade In, Slide Up, Scale, and Slide Down. Click Replay to preview the animation again.

Can I add text content to the popup?

Yes, use the optional Content section to add a title, body text, and CTA button. When content is provided, the generated HTML includes all content with inline styles.

Does it include the overlay backdrop?

Yes, the generated code includes both the overlay backdrop (with customizable color and opacity) and the popup container.

Completely free with no limitations.

●Poper 2.0 is Live. Build forms, quizzes, popups, widgets & more in minutes●11,000+ brands use Poper to engage visitors and drive conversions●No code. No credit card. Set up in under 2 minutes. Try it free →●Poper 2.0 is Live. Build forms, quizzes, popups, widgets & more in minutes●11,000+ brands use Poper to engage visitors and drive conversions●No code. No credit card. Set up in under 2 minutes. Try it free →

Built with

Poper

Free Popup Frame Style Generator

Design popup container styles with custom sizes, border radius, shadows, overlays, and animations. Get complete CSS.

Join Our Newsletter

Get the latest updates and exclusive offers delivered straight to your inbox.

Frame

Width480px

Height250px

Padding32px

Radius16px

Colors

Background

Title

Body

Button BG

Button Text

Border

Color

Width

0px

Overlay

Color

Opacity

50%

Animation

Content (Optional)

Title

Body Text

Button Text

Image (Optional)

Upload Image

Want to launch this as a real popup?

Poper lets you build, target, A/B test, and track high-converting popups without code.

Try free

How to Use Popup Frame Style Generator?

Customize Frame Settings

Adjust width, padding, border radius, shadow, colors, overlay, and animation.

Add Content & Preview

Add a title, body text, and CTA button. Preview your popup on desktop and mobile with live animation.

Copy CSS & HTML

Copy the generated CSS with overlay and animation, plus the HTML code to paste into your website.

Design Custom Popup Frames with Animations & Live Preview

Design popup container styles with full customization. Adjust width, padding, border radius, shadow intensity, background and border colors, overlay color and opacity, and entrance animations. Add optional popup content with title, body text, and CTA button. Preview everything live and copy the generated CSS and HTML code.

Full Frame Customization

Fine-tune the popup frame manually so the container matches your brand, layout, and campaign style.

Fine-tune every detail with sliders for width (280-700px), padding (8-64px), border radius (0-32px), and shadow intensity (0-5). Pick background, border, and overlay colors with color pickers. Choose from 4 entrance animations that preview live. Optionally add popup content with custom title, body text, and CTA button colors.