@phoenix-plugin-registry/swmitra.html-designer/toolboxhtml/bglineargradientTemplate.html

NOW WITH RESPONSIVE DESIGN TOOLS (BETA)! Design and customize web ui with HTML and CSS. Now with taggable Design snippet/bookmark support.

<div class="property-toolbox" id="gradient-editor" style="color: rgb(211, 211, 211); background-color: rgb(74, 77, 78); position: absolute; width: 295px; left: 45px; top: 22px; height: 279px;" draggable="true">     
    <span style="position: absolute; top: 14px; left: 8px;">Gradient Start Color</span>
    <span style="position: absolute; top: 40px; left: 8px;">Gradient End Color</span>
    <input class="topcoat-text-input" id="gradient-strat-color" type="text" style="position: absolute; left: 131px; width: 92px; height: 21px; top: 13px;">
    <input class="topcoat-text-input" id="gradient-end-color" type="text" style="position: absolute; left: 131px; width: 92px; height: 21px; top: 39px;">
    <div id="div1025173922" style="border: 1px dotted gray; position: absolute; height: 20px; width: 27px; left: 249px; top: 13px;"></div>
    <div id="div1025173929" style="border: 1px dotted gray; position: absolute; height: 20px; top: 39px; width: 27px; left: 249px;"></div>
    <div style="position: absolute; border-top-width: 1px; border-top-style: solid; border-top-color: gray; height: 0px; margin-top: 0px; top: 68px; left: 4px; width: 287px;"></div>
    <button class="topcoat-button" type="button" id="button102520310" style="position: absolute; top: 71px; height: 23px; width: 52px; left: 5px;">Linear</button>
    <button class="topcoat-button" type="button" id="button102520324" style="position: absolute; height: 23px; top: 71px; width: 52px; left: 57px;">Radial</button>
    <button class="topcoat-button" type="button" id="button102520324" style="position: absolute; height: 23px; top: 71px; width: 90px; left: 200px;">Repeat Radial</button>
    <button class="topcoat-button" type="button" id="button102520310" style="position: absolute; height: 23px; top: 71px; width: 91px; left: 109px;">Repeat Linear</button>
    <span style="position: absolute; margin-left: 44px; margin-top: 36px; left: -37px; top: 126px;">Angle</span>
    <input class="topcoat-range" type="range" style="position: absolute; left: 48px; top: 167px; width: 179px;">
    <span style="position: absolute; margin-left: 44px; margin-top: 36px; left: -37px; top: 98px;">Start</span>
    <input class="topcoat-range" type="range" style="position: absolute; left: 48px; top: 108px; width: 179px;">
    <span style="position: absolute; margin-left: 44px; margin-top: 36px; left: -37px; top: 69px;">End</span>
    <input class="topcoat-range" type="range" style="position: absolute; left: 48px; top: 138px; width: 179px;">
    <input class="topcoat-text-input" id="textbox10251777" type="text" style="position: absolute; width: 30px; height: 21px; top: 102px; left: 238px;">
    <input class="topcoat-text-input" id="textbox10251777" type="text" style="position: absolute; width: 30px; height: 21px; top: 130px; left: 238px;">
    <input class="topcoat-text-input" id="textbox10251777" type="text" style="position: absolute; width: 30px; height: 21px; top: 159px; left: 238px;">    
    <span style="position: absolute; margin-left: 44px; margin-top: 36px; left: -37px; top: 185px;">X</span>
    <input class="topcoat-range" type="range" style="position: absolute; left: 48px; width: 179px; top: 195px;">
    <span style="position: absolute; margin-left: 44px; margin-top: 36px; left: -37px; top: 156px;">Y</span>
    <input class="topcoat-range" type="range" style="position: absolute; left: 48px; width: 179px; top: 225px;">
    <input class="topcoat-text-input" id="textbox10251777" type="text" style="position: absolute; width: 30px; height: 21px; left: 238px; top: 189px;">
    <input class="topcoat-text-input" id="textbox10251777" type="text" style="position: absolute; width: 30px; height: 21px; left: 238px; top: 217px;">
    <label class="topcoat-checkbox" style="margin-left: 15px; margin-top: 252px; left: -1px; top: -5px;">
      <input type="checkbox" style="left: 9px; top: -5px;">
      <div class="topcoat-checkbox__checkmark" style="margin-left: 37px; margin-top: -11px;">Circle</div> 
    </label>
    <label class="topcoat-checkbox" style="margin-left: 122px; margin-top: 4px; left: 31px; top: 246px;">
      <input type="checkbox" style="left: -1px; top: -8px;">
      <div class="topcoat-checkbox__checkmark" style="margin-left: 27px; margin-top: -14px;">Ellipse</div>
    </label>
      
</div>