The background colour of this template smoothly transitions green - yellow - red as msg.payload varies from 0 to 10.
Suggested use is as a weather station display, the colour reflecting the temperature. Would have to tweek it for the expected temperature range of course.
I'd be glad of any comments / criticisms.
Demo flow
[{"id":"6de21d982cbf28e2","type":"ui_template","z":"b728f1859db218ee","group":"10803925012d751a","name":"Warpometer","order":1,"width":"5","height":2,"format":"<div class=\"warpobackground\">\n <div class=\"warpolayer1\" style=\"--fudge: {{msg.payload}};\">\n <div class=\"warpolayer2\" style=\"--fudge: {{msg.payload}};\">\n <div class=\"warpocontent\">\n {{msg.topic}} {{(msg.payload || 0)}}\n </div>\n <div class=\"warpolabel\">\n <span>Sirius Cybernetics Corp</span>\n </div> \n </div>\n </div>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":450,"y":100,"wires":[[]]},{"id":"f80ccf1fdbd2712d","type":"ui_template","z":"b728f1859db218ee","group":"10803925012d751a","name":"CSS","order":2,"width":0,"height":0,"format":"<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Big Shoulders Display\">\n<style>\n.warpobackground{\n position: relative;\n height: 100%;\n width: 100%;\n background-color: rgb(30, 150, 0);\n}\n.warpolayer1, .warpolayer2 {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n}\n.warpolayer1 {\n background-color: rgba(255, 242, 0, calc((var(--fudge) - 2) / 3));\n}\n.warpolayer2 {\n background-color: rgba(255, 0, 0, calc((var(--fudge) - 5 ) / 3 ));\n box-sizing: border-box;\n border:4px solid black;\n}\n.warpocontent {\n position: absolute;\n top: 18%;\n left: 5%;\n font-family: \"Big Shoulders Display\", sans-serif;\n font-size: 2.8em;\n}\n.warpolabel {\n position: absolute;\n bottom: 2%;\n right: 2%;\n font-size: .8em;\n font-family: sans-serif;\n}\n</style>\n\n\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":430,"y":60,"wires":[[]]},{"id":"8469a1aec341cbbe","type":"function","z":"b728f1859db218ee","name":"Data","func":"var num = context.get('count') || 0.0;\nnum += 1;\nnum %= 100;\ncontext.set('count', num);\nmsg.payload = num/10;\nmsg.topic = \"Warp Factor\"\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":290,"y":100,"wires":[["6de21d982cbf28e2"]]},{"id":"0cdb447c29e82832","type":"inject","z":"b728f1859db218ee","name":"10/sec","props":[{"p":"payload"}],"repeat":"0.1","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":140,"y":100,"wires":[["8469a1aec341cbbe"]]},{"id":"10803925012d751a","type":"ui_group","name":"Warpometer","tab":"f4cfd2456e490c21","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"f4cfd2456e490c21","type":"ui_tab","name":"Warpometer","icon":"dashboard","disabled":false,"hidden":false}]
