windows styled titlebars

the subheader/titlebar element which pops up a lot on my site is based off of the windows xp titlebar/taskbar design (if you couldn't tell already). it was only natural that i recreated the look of the real thing!

i created these using the wonderful doodad.dev gradient generator. i would highly recommend using it to make your own fun gradients!

you're free to use this code on your own site as much as you like, as long as you leave the credit in your code. you don't have to credit me in writing and/or link my site, but i would be honored if you did :)

windows xp luna: blue

/* styled by grampus.neocities.org */ /* edit as needed to make your titlebar the right size, alignment, etc. */ .titlebar { width: auto; height: auto; padding: 1px; background-image:linear-gradient(180deg, #3168d5 1%, #3672d8 1.75%, #3b7cdc 2.5%, #468fe5 4%, #3d82df 9.25%, #3375da 14.5%, #2258d6 25%, #235bd8 42%, #245edb 59%, #2663e0 93%, #245fda 94.25%, #235cd3 95.5%, #2055c7 98%;) }

windows xp luna: olive green

/* styled by grampus.neocities.org */ /* edit as needed to make your titlebar the right size, alignment, etc. */ .titlebar { width: auto; height: auto; padding: 1px; background-image:linear-gradient(180deg, #8ba169 1%, #a1b47d 1.75%, #b7c792 2.5%, #e5eec1 4%, #d6e1b1 9.25%, #c8d3a1 14.5%, #acb983 25%, #b1be87 42%, #b7c38c 59%, #c2cd95 93%, #bbc78d 94.25%, #b3c186 95.5%, #a5b577 98%);) }

windows xp luna: silver

/* styled by grampus.neocities.org */ /* edit as needed to make your titlebar the right size, alignment, etc. */ .titlebar { width: auto; height: auto; padding: 1px; background-image:linear-gradient(180deg, #3168d5 1%, #3672d8 1.75%, #3b7cdc 2.5%, #468fe5 4%, #3d82df 9.25%, #3375da 14.5%, #2258d6 25%, #235bd8 42%, #245edb 59%, #2663e0 93%, #245fda 94.25%, #235cd3 95.5%, #2055c7 98%;) }

windows xp royale: energy blue

/* styled by grampus.neocities.org */ /* edit as needed to make your titlebar the right size, alignment, etc. */ .titlebar { width: auto; height: auto; padding: 1px; background-image:background-image:linear-gradient(180deg, #2a4dab 0%, #3c66bd 0.5%, #5080d0 1%, #93b2e0 2%, #90b6e4 2.5%, #8dbae7 3%, #85c2ed 4%, #77b8ea 10.5%, #6aaee8 17%, #5a98df 30%, #5897de 35.5%, #5795de 41%, #5492dd 52%, #4d8cda 52.25%, #4786d6 52.5%, #397bcf 53%, #3672c7 60%, #3269bf 67%, #2c56b1 81%;) }

windows xp royale: noir

/* styled by grampus.neocities.org */ /* edit as needed to make your titlebar the right size, alignment, etc. */ .titlebar { width: auto; height: auto; padding: 1px; background-image:linear-gradient(180deg, #3168d5 1%, #3672d8 1.75%, #3b7cdc 2.5%, #468fe5 4%, #3d82df 9.25%, #3375da 14.5%, #2258d6 25%, #235bd8 42%, #245edb 59%, #2663e0 93%, #245fda 94.25%, #235cd3 95.5%, #2055c7 98%;) }

windows xp royale: zune

/* styled by grampus.neocities.org */ /* edit as needed to make your titlebar the right size, alignment, etc. */ .titlebar { width: auto; height: auto; padding: 1px; background-image:linear-gradient(180deg, #252525 0%, #3c3c3c 0.5%, #545454 1%, #888888 2%, #828282 2.5%, #7d7d7d 3%, #727272 4%, #6b6b6b 16%, #636363 28%, #555555 52%, #4f4f4f 52.25%, #484848 52.5%, #3c3c3c 53%, #363636 60%, #303030 67%, #242424 81%) }

windows xp royale: embedded

/* styled by grampus.neocities.org */ /* edit as needed to make your titlebar the right size, alignment, etc. */ .titlebar { width: auto; height: auto; padding: 1px; background-image:linear-gradient(180deg, #012f54 0%, #16466f 0.5%, #2e5f88 1%, #6392b7 2%, #5a8eb7 2.5%, #508ab8 3%, #3a81b9 4%, #337ab2 16%, #2c73ab 28%, #1e659d 52%, #185e96 52.25%, #12578f 52.5%, #054a80 53%, #044374 60%, #023c68 67%, #012e51 81%) }

windows vista: basic (no aero, sorry...)

/* styled by grampus.neocities.org */ /* edit as needed to make your titlebar the right size, alignment, etc. */ .titlebar { width: auto; height: auto; padding: 1px; background-image:linear-gradient(180deg, #545454 0%, #606060 0.5%, #6c6c6d 1%, #848585 2%, #909191 2.5%, #9c9d9d 3%, #b4b5b5 4%, #aaabab 4.25%, #9fa0a0 4.5%, #8b8c8c 5%, #7a7b7b 16.5%, #696a6b 28%, #494a4b 51%, #3d3e40 51.5%, #313335 52%, #1b1d1f 53%, #1a1c1e 60%, #1a1b1d 67%, #18191b 81%) }