Overview
Design and styling options allow you to create popups that perfectly match your brand identity. From color controls to advanced styling options, HashBar gives you complete creative control over your popup's appearance.
Popup Dimensions
Width Control
Set the base width of your popup. Width settings apply to most popup positions including center modal, floating box, and side panels.
- Pixel-based width (300px to 800px typical)
- Responsive on mobile (automatically adjusts)
- Recommended: 500px for balanced appearance
Max-Width
Set the maximum width your popup can expand to. This ensures your popup doesn't become too wide on large monitors while remaining readable.
- Prevents excessive width on large screens
- Typical range: 600px to 1000px
- Works with responsive design
Background Styling
Solid Background Color
Simple, solid color background. Choose from the color picker or enter a specific hex color code. Solid backgrounds are clean and professional.
- Choose any color
- Hex color support
- Ideal for minimalist designs
- Works with all popup positions
Gradient Background
Create dynamic gradients with two colors and customizable direction. Gradients add visual interest and sophistication to your popups.
- Two-color gradient
- Color 1 and Color 2 selection
- Direction control (linear gradients)
- Angle adjustment (0° to 360°)
Image Background
Use an image as your popup background. Select from your media library or upload a new image.
- Image upload from media library
- Background size options:
- Cover: Image fills entire background (may crop)
- Contain: Entire image visible (may have empty space)
- Auto: Image displayed at original size
- Perfect for branded or photo-based popups
Text Colors
Heading Color
Control the color of your main heading text. Choose a color that contrasts well with your background for readability.
- Independent heading color control
- Hex color support
- Ensure sufficient contrast with background
Description/Body Text Color
Set the color for your main description and body text. This is one of the most frequently read elements, so choose a readable color.
- Body text color control
- Hex color or color picker
- Should contrast well with background
Border Styling
Border Radius
Control the roundness of your popup corners. Range from sharp corners (0px) to fully rounded (50px+).
- 0px: Sharp, angular corners
- 10px-20px: Slightly rounded, modern look
- 30px+: Highly rounded, bubble-like appearance
- Matches modern UI design trends
Border Width
Add a border around your popup. Range from 0px (no border) to 10px for thick borders.
- 0px: No border (default)
- 1px-2px: Subtle border for definition
- 3px-5px: Prominent border for emphasis
- Combines with border color and radius
Border Color
Choose the color of your popup border. Works in combination with border width and radius for complete control.
- Any color via color picker
- Hex color support
- Typically matches brand colors
Shadow Effects
Add depth and dimension to your popup with shadow effects. Shadows make popups appear to float above the page.
Shadow Presets
- None: No shadow effect
- Small: Subtle shadow for slight elevation
- Medium: Moderate shadow for clear depth
- Large: Prominent shadow for maximum elevation
Choose the shadow preset that matches your design aesthetic. Larger shadows work well for overlay modals, while subtle shadows suit floating boxes.
Overlay Styling
Overlay Color and Opacity
Control the semi-transparent overlay that appears behind your popup (for modal-style popups). The overlay dims the background content and focuses attention on your popup.
- Overlay color selection
- Opacity control (0-100%)
- 0%: Transparent (invisible)
- 50%: Semi-transparent (typical)
- 100%: Solid black (maximum obscuring)
Lower opacity creates a subtle effect that doesn't completely obscure background content, while higher opacity focuses all attention on your popup.
Content Padding
Individual Padding Control
Control the space between your popup content and the popup borders. Set padding independently for each side.
- Top Padding: Space above content
- Right Padding: Space to the right of content
- Bottom Padding: Space below content
- Left Padding: Space to the left of content
Typical padding values range from 20px to 40px per side. Balanced padding (20px on all sides) creates a clean, professional appearance.
CTA Button Styling
Button Background Color
The primary color of your call-to-action button. Use your brand color or a contrasting color to make the button stand out.
- Any color via color picker
- High contrast recommended
- Impacts click-through rates
Button Text Color
The color of the text inside your button. Ensure good contrast with the button background color for readability.
- Text color selection
- White text on dark backgrounds recommended
- Ensure readability
Button Hover State
Control how your button appears when users hover over it. Hover states provide visual feedback that the button is clickable.
- Hover background color
- Hover text color
- Subtle color shift recommended
- Improves user experience
Button Border Radius
Control the roundness of button corners, independent from popup border radius.
- 0px: Sharp rectangular button
- 5px-10px: Slightly rounded button (modern)
- 20px+: Pill-shaped button (rounded capsule)
Button Font Size
Control the size of text inside your button. Larger text makes buttons more clickable.
- 14px-20px typical range
- 18px recommended for mobile usability
- Impacts readability
Close Button Styling
Close Button Color
The color of the X close button (typically in the top-right corner). Should contrast with the background for visibility.
- Any color via color picker
- High contrast recommended
- Typically dark gray or black
Close Button Hover Color
The color of the close button when users hover over it. Provides visual feedback that the button is interactive.
- Hover state color
- Slightly different from default color
- Improves user experience
Close Button Size
Control the size of the close button. Larger close buttons are easier to hit on mobile devices.
- 20px-40px typical range
- 32px recommended for mobile
- Balance visibility with aesthetics
Content Wrapper Styling
The content wrapper is the container that holds all your popup content (text, images, forms). Control the appearance of this container independently from the outer popup.
Content Background
Set the background color or image for the content area specifically. This can differ from the overall popup background.
Content Padding
Control spacing inside the content wrapper, independent from the overall popup padding.
Content Border
Add a border to the content wrapper for visual separation and emphasis.
Design Best Practices
Brand Consistency
Use your brand colors for buttons and text. Popups should feel like a natural part of your website, not an intrusive element. Consistent branding builds trust.
Color Contrast
Ensure sufficient contrast between text and background colors. Poor contrast reduces readability and accessibility. Test your designs on both desktop and mobile.
White Space
Use generous padding and white space to create an uncluttered, professional appearance. Crowded popups feel overwhelming and reduce conversion rates.
Mobile Optimization
Test your popup design on mobile devices. Buttons should be large enough to click (44px minimum height). Text should be readable without zooming.
Visual Hierarchy
Use color, size, and spacing to create visual hierarchy. Make your CTA button the most prominent element. Ensure heading is more prominent than description text.
Example Designs
Minimalist Design
- Solid white background
- Dark gray/black text
- Small subtle shadow
- Minimal padding (20px)
- 0px border radius (sharp corners)
Modern Design
- Solid color or gradient background
- High-contrast white text
- Medium shadow for depth
- 20px border radius (rounded)
- 30px padding
Bold Design
- Vibrant gradient background
- Contrasting white text
- Large shadow for prominence
- 30px border radius (highly rounded)
- 40px padding
Next Steps
After styling your popup, set up smart triggers to show it at the right time. Learn more in our Smart Triggers guide.