How to achieve and edit this css style visually using Design Panel?

I initially created this style using DW CSS Panel, now I copied the style into my Wappler website and want to customize it further using Design Panel. But there’s issue I need help to achieve it:

The style:

>     .bg-custom {
>       background-image: -webkit-gradient(linear,left top, left bottom,from(rgba(255,255,255,0.00)),color-stop(0%, rgba(191,0,0,0.54))), url("background/04.jpg")!important;
>       background-image: -webkit-linear-gradient(top,rgba(255,255,255,0.00) 0%,rgba(191,0,0,0.54) 0%), url("background/04.jpg")!important;
>       background-image: -moz-linear-gradient(top,rgba(255,255,255,0.00) 0%,rgba(191,0,0,0.54) 0%), url("background/04.jpg")!important;
>       background-image: -o-linear-gradient(top,rgba(255,255,255,0.00) 0%,rgba(191,0,0,0.54) 0%), url("background/04.jpg")!important;
>       background-image: linear-gradient(180deg,rgba(255,255,255,0.00) 0%,rgba(191,0,0,0.54) 0%), url("background/04.jpg")!important;
>     } 

The issue (s):

• There’s no option to select background image when Type: Linear Gradient is chosen
• No code automatically generated for webkit, moz, o ~
• Difficulty to add !important due to unavailability of auto suggest for it in code view. I think it would be much helpful to have important checkbox on Design Panel as well.
• The desired result does’t render precisely in Wappler Design View but does as expected in browsers and DW live view.
  
  Rendered in Wappler Design View
  
  Expected result

Thank you in advance for any clarification, assistance, and consideration.

Cheers.