A unique collection of Design Sets for Oxygen Builder

DESIGN SETS FOR OXYGEN

MADE WITH BY SUPADEZIGN

Feel free to donate if you like my tutorials ;)

Customize the Modal Backdrop style

The backdrop color is the color that cover the entire page when you open a modal.
In the settings we can only choose a color:

Click on the icon below to open a modal with the default style:

Default Modal backdrop style

Now with a little bit of magic, we can customize that background.

If you only have one modal in your page, you can simply use that class .oxy-modal-backdrop to style it.

.oxy-modal-backdrop {
    background-image: linear-gradient(0deg, rgba(255,255,255,0) 25%, #000000 25%, #000000 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 75%, #000000 75%, #000000 100%);
    background-size: 8.00px 8.00px;
}
Horizontal lines

If you have several modals in the same page (just like this current page), and you want to have different backdrop styles for each of them, you will have to add a data attribute, just like this example:

.oxy-modal-backdrop[data-trigger-selector="#fancy_icon-40-635"] {
    background-image: linear-gradient(135deg, rgba(255,255,255,0) 25%, #000000 25%, #000000 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 75%, #000000 75%, #000000 100%);
    background-size: 11.31px 11.31px;
}
Some nice stripes

Here are some cool websites where you can generate some gradient or SVG backgrounds:

http://stripesgenerator.com/

https://www.svgbackgrounds.com/

https://www.heropatterns.com/

from svgbackgrounds.com

More cutomized backdrop styles in action are also available in my Design Set:

https://www.dezign4fun.com/off-canvas-menus/

crossmenu