Colors & Backgrounds
Colors and backgrounds establish the visual foundation of your popup. From simple solid colors to complex gradients and images, XBuilder offers complete control.
Color Formats
Supported Formats
| Format | Example | Use |
|---|---|---|
| Hex | #4F46E5 | Most common |
| RGB | rgb(79, 70, 229) | Standard |
| RGBA | rgba(79, 70, 229, 0.8) | With transparency |
| Named | indigo | Simple colors |
Color Picker
XBuilder includes a visual color picker:
- Click color input field
- Use color wheel or sliders
- Enter values directly
- Pick from recent colors
Background Types
Solid Color
Single color background:
Background: #ffffff (white)
Background: #1e293b (dark)
Gradient
Multi-color gradient backgrounds:
Linear Gradient:
Direction: 180deg (top to bottom)
Colors: #667eea → #764ba2
Radial Gradient:
Shape: Circle
Position: Center
Colors: #ffffff → #f1f5f9
Image
Background image:
| Setting | Options |
|---|---|
| Source | URL or upload |
| Size | Cover, contain, custom |
| Position | Center, top, etc. |
| Repeat | No repeat, repeat |
| Attachment | Scroll, fixed |
None/Transparent
No background (content only).
Setting Backgrounds
Popup Background
- Go to Design tab
- Select background type
- Configure settings
Element Background
- Select element
- Go to Style section
- Find Background settings
- Configure
Solid Backgrounds
Common Choices
| Purpose | Color |
|---|---|
| Clean/minimal | White (#ffffff) |
| Dark mode | Dark gray (#1e293b) |
| Soft | Light gray (#f8fafc) |
| Brand | Your brand color |
| Alert | Red (#ef4444) |
| Success | Green (#22c55e) |
Transparency
Use RGBA for transparency:
rgba(255, 255, 255, 0.9) — 90% opaque white
rgba(0, 0, 0, 0.5) — 50% opaque black
Gradient Backgrounds
Linear Gradients
Direction options:
0deg— Bottom to top90deg— Left to right180deg— Top to bottom270deg— Right to left45deg— Diagonal
Popular Gradients
Sunset:
Direction: 135deg
#ff6b6b → #feca57
Ocean:
Direction: 180deg
#667eea → #764ba2
Nature:
Direction: 120deg
#11998e → #38ef7d
Minimal:
Direction: 180deg
#ffffff → #f1f5f9
Gradient Tips
- Use 2-3 colors maximum
- Subtle transitions are elegant
- Test on all backgrounds
- Consider text readability
Image Backgrounds
Image Settings
| Property | Options |
|---|---|
| Size | |
| Cover | Fill entire area |
| Contain | Fit within bounds |
| Auto | Natural size |
| Position | |
| Center | Center of area |
| Top | Align to top |
| Bottom | Align to bottom |
| Repeat | |
| No repeat | Single image |
| Repeat | Tile image |
Image Overlay
Add color overlay on images for text readability:
Image: background.jpg
Overlay: rgba(0, 0, 0, 0.5)
Image Optimization
- Compress images
- Use WebP format
- Appropriate dimensions
- Consider lazy loading
Color Schemes
Creating a Palette
Start with:
- Primary — Main brand color
- Secondary — Accent color
- Background — Page/popup background
- Text — Primary text color
- Muted — Secondary text
Example Palettes
Professional:
Primary: #4F46E5
Background: #ffffff
Text: #1e293b
Muted: #64748b
Dark Mode:
Primary: #818CF8
Background: #0f172a
Text: #f8fafc
Muted: #94a3b8
Vibrant:
Primary: #f43f5e
Background: #fef2f2
Text: #1e293b
Accent: #fbbf24
Text on Backgrounds
Contrast Requirements
| Background | Text Color |
|---|---|
| White | Dark (#1e293b or darker) |
| Black | White or light |
| Light colors | Dark text |
| Dark colors | Light text |
On Images
When using image backgrounds:
- Add dark overlay
- Use text shadow
- Use solid color box behind text
- Choose high-contrast text color
Overlay Settings
Popup Overlay
The dimmed background behind popup:
Color: #000000
Opacity: 50%
Blur: 0px (or add blur effect)
Content Overlay
For image backgrounds within popup:
Overlay Color: rgba(0,0,0,0.4)
Responsive Backgrounds
Device-Specific
Different backgrounds per device:
Desktop: Large hero image
Tablet: Smaller image
Mobile: Solid color (faster load)
Performance Tips
Images
- Compress — Use optimized images
- Right size — Don't use 4000px for 500px popup
- Format — WebP > JPEG > PNG
- Lazy load — When possible
Gradients
- Use CSS gradients (not images)
- Avoid very complex gradients
- Test on older browsers
Best Practices
- Consistent palette — Use 3-5 colors
- Contrast — Ensure text is readable
- Purpose — Every color should have meaning
- Test — Check on different devices
- Accessibility — Meet WCAG contrast
Troubleshooting
Background not showing:
- Check color value is valid
- Verify image URL works
- Look for CSS overrides
Image not covering:
- Set size to "Cover"
- Check container dimensions
- Verify image aspect ratio
Gradient looks wrong:
- Check color order
- Verify direction angle
- Ensure colors are valid