CSS Tips, Tricks and Toolkit

This guide offers some tips and tricks you can use on your popup using the power of CSS alone! We've also included some free online resources that we use and are fantastic for upping your design game in a flash.

This guide is an ongoing resource we'll be updating regularly. Got any tips or suggestions? Drop us some feedback on the article by chatting with us.

Tips & tricks

Below we've got some cool ideas and tips you can use to add a little CSS magic to your popup.

To use the custom CSS snippets listed below

  1. Copy the CSS code to your clipboard.

  2. Open the widget style settings in the Popups app

  3. Scroll down the page and paste in the CSS.

  4. Click **Save** to see your changes.

Mini Popup

Here's a little CSS snippet you can add to produce a neat mini popup on desktop. We use CSS media queries here to ensure that the popup still looks good on mobile devices. You may need to adjust the pixel dimensions for the top CSS rule if you are using a logo or more text.


/* Rivo mini popup */

@media screen and (min-width: 600px) {
.ba_widget_main_design {
width: 450px !important;
height: 450px !important;
border-radius: 20px !important;

@media screen and (max-width: 600px) {
.ba_widget_main_design {
width: 90% !important;
max-height: 90% !important;
border-radius: 20px !important;

Play with animated gradients

Add some movement magic to your color background with CSS anmiated gradients. There's some great websites out there for generating these so you don't even have to do the hard work! Here's the site we used to create the animated background below. Make sure you use the right selector for the popup and add the !important rule once you've copied any code from third-party sites.

/* Animated gradient*/

.ba_widget_parent {
animation: animateBg 8s linear infinite !important;
background-image: linear-gradient(0deg,#bd4faf,#5794db,#bd4faf,#5794db) !important;
background-size: 100% 300% !important;
@keyframes animateBg {
0% { background-position: 0% 0% ; }
100% { background-position: 0% 100%; }

Adjusting your logo

The logo uploader accepts files that are 60px by 60px but if you have a wide logo and it appears too small in your popup, you may add this little CSS snippet to adjust your logo and make it look better! You can adjust the pixel dimension for the height according to your preference.

/* Logo adjustment */

.ba_widget_logo_holder svg, .ba_widget_logo_holder img {
height: 110px !important;
width: auto !important;

Add an alternate image for the popup on mobile

The popup is mobile friendly by default, however some images might look better on larger screens, and not as good on smaller screens. To add an alternate image for customers on mobile devices, paste the CSS below in to the in app CSS editor. Be sure to change out the URL section to your own image URL.

/* Show alternate image on mobile */
@media only screen and (max-width: 600px) {
.ba_widget_right_content {
background-image: url(https://images.unsplash.com/photo-1647163641067-c7ee34cfcb80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3328&q=80);

Online resources

Here's a list of some free, awesome resources to help you become a pro with CSS! We update this content regularly so if you have any recommendations, drop some feedback on the article below 🙂

General CSS sites

Learn CSS with W3 Schools - A fantastic site to get started or refreshed on CSS basics.

Learn CSS with Google web.dev - A complete course with the Google seal of quality.

Learn CSS with Mozilla - More developer-oriented but a great resource.

CSS Tricks - A great site for those more comfortable with CSS. Awesome selection of guides, articles and CSS tips and tricks.

💡 Pop Tip: If you're copy-and-pasting CSS from somewhere on the web make sure you add the !important rule to every declaration (i.e. before any semicolon.)

Color sites

Image Color Picker - Upload an image from your device or with a URL and use this to get the image's hex codes.

Pallette Generator - Simply enter a hex code and this site generates a variety of color pallettes. They also have a nice gradient generator.

Gradient Generator - A more robust gradient generator that allows you to fine-tune for a perfect gradient.

Coolors.co - An amazing site with lots of features for creating color schemes.

WebGradients - A curated collection of beautiful linear gradients ready to use!

Animated Gradient Generator - Awesome site for creating animated gradients like the one above!

Other useful sites

CSS Background Patterns - A nice selection of background patterns you could add to your popup.

Complex patterns using CSS gradients - Awesome blog post delving into the the more complex applications of CSS gradients.

Did this answer your question?