Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> meter { width: 300px; height: 20px; } meter::-webkit-meter-bar { background: none; background-color: lightgrey; box-shadow: 0 3px 3px -3px #333 inset; } meter::-webkit-meter-optimum-value { box-shadow: 0 3px 3px -3px #999 inset; background-image: linear-gradient( 90deg, #2286c9 5%, #FF00FF 5%, #FF00FF 15%, #04C319 15%, #04C319 55%, #F1F70D 55%, #F1F70D 95%, #00FFCC 95%, #00FFCC 100%); background-size: 100% 100%; } </style> </head> <body> <meter value="30" min="0" max="70"></meter> </body> </html>