DuiVision的area控件（類名是CArea）可以設定區域的漸變透明度，不能響應滑鼠事件，此控件的原理是畫一個填充的透明度漸變矩形區域，透明度從矩形區域頂部究竟部均勻漸變。
控件的屬性包含：
| 屬性名 | 類型 | 說明 |
| color | 顔色 | 矩形區域的顔色 |
| begin-transparent | 字型 | 矩形區域頂部的起始透明度 |
| end-transparent | 字元串 | 矩形區域底部的終止透明度 |
DuiVision Demo程式的非常多界面都用到了area控件來實作漸變效果，比如，例如以下的登入對話框以下的漸變效果和分隔線，就是用4個area控件實作的：
相應的xml定義例如以下：
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<dlg name="dlg_login" title="" width="420" height="270" appwin="0" resize="0"
frame="" bkimg="" crbk="000000"
img-shadow="skins\360\window_shadow.png" shadow-wlt="5" shadow-hlt="3" shadow-wrb="5" shadow-hrb="7" >
<base>
<imgbtn name="button.close" pos="-45,0,-0,29" skin="IDB_BT_CLOSE" show="1" shortcut="ESC" />
<imgbtn name="button.setup" pos="-74,0,-46,20" skin="IDB_BT_SETUP" show="1"/>
<text name="title" crtext="FFFFFF" crmark="800000" font="big"
pos="10,5,200,25" title="[APP_NAME]登入" mask="" response="0" show="1" />
</base>
<body>
<area name="area-1" pos="0,0,-0,140" begin-transparent="100" end-transparent="40" />
<area name="area-2" pos="0,140,-0,-0" begin-transparent="40" end-transparent="40" />
<area name="area-3" pos="0,-37,-0,-36" begin-transparent="70" end-transparent="70" />
<area name="area-4" pos="0,-36,-0,-0" begin-transparent="88" end-transparent="88" />
<img name="image" pos="16,109" width="87" height="87" skin="IDB_LOGIN_USER" mode="normal" framesize="1" show="1" />
<edit name="username" skin="IDB_EDIT" left-image="skin:IDB_COMPUTER"
pos="120,110" width="220" height="32" title="" tip="請輸入使用者名"
multiline="0" autohscroll="1" autovscroll="0" number="0" readonly="0" maxchar="50"
font="default" crtext="0,0,0" crtip="128,128,128,128" />
<linkbtn name="linkbtn" crtext="800000"
pos="350,116,-10,145" show="1" title="注冊帳号" href="http://www.blueantstudio.net" />
<edit name="pwd" skin="IDB_EDIT" left-image="skin:IDB_EDIT_PWD"
pos="120,149" width="220" height="32" title="" password="1" tip="請輸入password"
multiline="0" autohscroll="1" autovscroll="0" number="0" readonly="0" maxchar="50"
font="default" crtext="0,0,0" crtip="128,128,128,128" />
<linkbtn name="linkbtn" crtext="800000"
pos="350,155,-10,180" show="1" title="找回password" href="http://www.blueantstudio.net" />
<chkbtn name="checkbutton" skin="IDB_CHECK_BOX"
pos="120,190" width="100" height="22" show="1" title="記住password" check="true" />
<chkbtn name="checkbutton" skin="IDB_CHECK_BOX"
pos="230,190" width="100" height="22" show="1" title="自己主動登入" check="false" />
<button name="button_1" skin="IDB_BT_DEFAULT" title="設定"
pos="20,-30,100,-6" show="1" shortcut="" />
<button name="button.ok" skin="IDB_BT_DEFAULT" title="[LOGIN]"
pos="-100,-30,-20,-6" show="1" shortcut="RETURN" />
</body>
</dlg> 以下的關于對話框的漸變效果和分隔線實作方式也是這樣：
相應的xml定義：
<?xml version="1.0" encoding="utf-8"?>
<dlg name="dlg_about" title="MsgBox" width="450" height="230" appwin="1" resize="1"
translucent="245" frame="" bkimg="skin:SKIN_PIC_7" crbk="000000"
img-shadow="skins\default\winback_shadow.png" shadow-wlt="36" shadow-hlt="34" shadow-wrb="36" shadow-hrb="35">
<base>
<imgbtn name="button.close" pos="-45,0,-0,29" skin="IDB_BT_CLOSE" show="1"/>
<text name="title" crtext="FFFFFF" crmark="800000" font="big"
pos="10,5,200,25" title="關于[APP_NAME]" mask="[APP_NAME]" response="0" show="1" />
</base>
<body>
<area name="area-1" pos="0,0,-0,40" begin-transparent="100" end-transparent="30" />
<area name="area-2" pos="0,40,-0,-0" begin-transparent="30" end-transparent="30" />
<area name="area-3" pos="0,-37,-0,-36" begin-transparent="70" end-transparent="70" />
<area name="area-4" pos="0,-36,-0,-0" begin-transparent="88" end-transparent="88" />
<img name="icon" pos="25,45" width="128" height="128" image="skins\scriptnet.jpg" mode="normal" framesize="0" response="0" show="1" />
<text crtext="000000" pos="170,45,-25,65" title="[APP_NAME] [APP_VER]" />
<text crtext="000000" pos="170,65,-25,85" title="2013-2015" />
<linkbtn name="linkbtn1" crtext="800000"
pos="170,100,-25,130" show="1" title="http://www.blueantstudio.net" href="http://www.blueantstudio.net" />
<button name="button.ok" skin="IDB_BT_DEFAULT" title="[OK]" pos="-100,-30,-20,-6" show="1" />
</body>
</dlg> 以上兩個對話框都是用area将界面從上到下分成4部分。第一部分是對話框頂部标題部分，透明度從全透明逐漸減少。使頂部可以很多其它的看到窗體背景圖檔。第二部分是标題向下的部分，有一個固定的透明度。由于這部分是窗體主體部分。須要可以看清窗體主體部分的内容。是以透明度不高，不至于被背景圖檔幹擾到窗體内容的顯示，第三部分是底部的分隔線。僅僅有兩個像素寬，第四部分是底部區域，為了可以區分出來，是以透明度提高了一些。