Smashing Magazine
50 Beautiful CSS-Based Web-Designs in 2006
2006 was rich on creative, beautiful and unusual design concepts. We’ve seen a lot of whitespace, many examples of readable and usable text-design, badges, stars, rounded corners, shapes, gradients, mirror and 3D-effects – just name it. Let’s take a close look at some of the most beautiful designs we’ve seen in 2006. Links checked: May/29 2008 – 5 outdated designs deleted.
[By the way, did you know we have a free Email Newsletter? Subscribe now and get fresh short tips and tricks in your inbox!]
Vibrant Designs
Dark Designs
Light Designs
Theologisches-seminar-elstal.de
Media2006
Attitudedesign.co.uk
Vitaly Friedman, editor-in-chief of Smashing Magazine, an online magazine dedicated to designers and developers.
- 163 Comments
- 1
- 2
December 20th, 2006 12:45 amGreat stuff!
- 3December 20th, 2006 2:07 am
Impressive!
It’s nice to see what we can do with CSS + XHTML but, surely, we need to have in mind that a semantic markup is VERY important to a successful site.
- 4December 20th, 2006 2:23 am
Beautiful and crazy
- 5December 20th, 2006 3:38 am
Very impressive list. But I would like to suggest one more site to this list which is missing here. With your permission:
N.Design Studio – very beautiful work!
Cheers!
- 6December 20th, 2006 3:45 am
Thanks for featuring Devlounge, great list!
- 7December 20th, 2006 4:13 am
Very cool!
- 8December 20th, 2006 5:49 am
Super nice work, well done :)
- 9December 20th, 2006 11:39 am
Wow. Thanks for the inspiring list.
- 10December 20th, 2006 12:29 pm
Not to be a party pooper, but http://foxie.ru/ looks like a table-based mess to me. Or perhaps I don’t understand the rules for inclusion on this list :)
- 11December 20th, 2006 12:32 pm
Real beauty. Very inspiring. Thanks for the list.
- 12December 20th, 2006 12:45 pm
Great list, will add to My Ma.gnolia bookmarks
- 13December 20th, 2006 12:59 pm
What an inspiring list! Awesome.
- 14December 20th, 2006 1:13 pm
Nice sites!
- 15December 20th, 2006 3:11 pm
Wow Beautiful!!!
- 16December 20th, 2006 3:58 pm
wonderfull list!
thankyou for mentioning my blog – the correct url would be http://www.mstefan.com/blog/ by the way ;) - 17December 20th, 2006 3:59 pm
All these sites look eerily the same. I like clean gradients and tabs as much as the next guy, but the shit has to stop. It’s like the 45 degree angle thing during late 1999-2000. (Damn you 2Advanced!) There is nothing impressive about rehashing the same crap over and over. CSS+XHTML does not mean you site needs to look like a trendy web 2.0 logo.
I’m not saying these are not good sites, because most of them are, but good design should look good 10 years later, and these will not. They are part of trend, like low-rise pants and bug-eye glasses. So take off you Von Dutch hat and think up some new ideas.
- 18December 20th, 2006 4:06 pm
Indeed great collections man…
- 19December 20th, 2006 4:15 pm
Yeah, I think http://www.ndesign-studio.com is beautiful and Nick is great CSS designer.
- 20December 20th, 2006 4:19 pm
great list… with many differents styles..
2006 was a goodYear.. - 21December 20th, 2006 4:33 pm
Nice work! I got lost in the list for hours…
- 22December 20th, 2006 5:21 pm
Thanks for the screenshot, but you got the URL wrong – its Nice-Design.co.uk
- 23December 20th, 2006 5:34 pm
Bullshit. Why is it always LOOKS over USABILITY?
I mean there are hundreds of sites that “look nice” but are extremely difficult and tedious to use. Small text, radical colors and contrast, usage of Flash, required scrolling, useless images, too limited effective area without scaling support, non-standard solutions (= difficult to interpret what is a link/button) etc.
The list goes on and on but yet many people deem such sites as incredible.
- 24December 20th, 2006 5:35 pm
Great list, all very beautiful!
- 25December 20th, 2006 5:53 pm
This site is absolutely knackered in IE7. It doesn’t matter what the browser is, you have to cater for them all. So don’t come trying to tell me what’s good when you obviously can’t build one yourself…
And if I see one more page centered css site with a graphic popped on top of the page I am going to SCREAM.
- 26December 20th, 2006 6:28 pm
take off “http://foxie.ru/” of the list it’s made out of tables!
- 27December 20th, 2006 7:50 pm
What about mattbango.com, oh wait, rikcat.com stole his design and then gets the credit.
- 28December 20th, 2006 7:52 pm
Great collection. I always enjoy seeing different examples of CSS goodness! The art on those sites is nice as well.
- 29December 20th, 2006 8:51 pm
Really impressive designs! This list is another great resource for inspiration!
Thanks!
- 30December 20th, 2006 8:56 pm
David,
I believe that ‘CSS-based’ merely differentiates between the CSS and Flash wars that went down a few years back. For example, the gorgeous http://www.ampedesports.com/ uses CSS for 99% of layouts but still includes a bit of flash and html (tables) here and there, so I’m not sure… should it be allowed?
- 31December 20th, 2006 9:36 pm
Woooooow!
This sites are really very pleasant for the eye!
Great 4 inspiration!!
- 32December 20th, 2006 10:03 pm
designs are really nice
but how would i know because your CSS on
this site is messed up - 33December 20th, 2006 11:30 pm
This all looks like some WordPress themes. Very generic and derivative stuff.
- 34December 20th, 2006 11:42 pm
Ironic- how screwed up this page is nd they are recognizing good web site design…………….
Not working the way they want in IE6 nor IE7 - 35December 20th, 2006 11:54 pm
2006 has been a great year for CSS-based website. Congratulations to all and great compilation!
- 36December 20th, 2006 11:55 pm
designs are really nice
but how would i know because your CSS on
this site is messed upLooks fine in firefox. Stop using ie7 and use a real browser, fool!
- 37December 21st, 2006 1:17 am
Wow what that ! Please respect the standard ! IE7 is more standard as FF ! But the result suck ! And check your JS too :-)
undefined values :-(
Else a nice idea :-)
See you !
- 38December 21st, 2006 1:19 am
Some of these sites are plain inaccessible :(
They aren’t fully css-based - 39December 21st, 2006 1:59 am
Good selection… nice webpages.
- 40December 21st, 2006 3:42 am
Great list. Some there I think I would put after some others. Thanks for the compilation!
- 41December 21st, 2006 3:48 am
Mediocre. All sites have the same layout, all they changed are the images.
- 42December 21st, 2006 4:11 am
90% have the same aesthetic. Pretty Boring.
- 43December 21st, 2006 5:42 am
inspiring list here.
i wish all of the sites were still the same, but some of them were changed. that makes the snapshots worthy.
- 44December 21st, 2006 6:12 am
fun list but makes me think more of illustrator skills than css skills.
- 45December 21st, 2006 6:22 am
Those are some amazing designs. Surprisingly, there were even some designs that I would use over my current one. I wonder if anyone reads these comments, eh?
- 46December 21st, 2006 7:46 am
your google adsense ads are in violation of their terms of service, you can’t place pix next to them.
- 47December 21st, 2006 9:28 am
Just noticed that my home page needed correcting. Cheers, Dan.
- 48December 21st, 2006 9:47 am
Cool works!
- 49December 21st, 2006 3:46 pm
I just relaunched my online portfolio, maybe you like it enough to put it on your list? anyway, i would be glad to hear the user opinions on the usability of my site. just post your comments in my kontakt-sektion. (in the moment the site is only german, sorry)
- 50December 21st, 2006 4:50 pm
that’s good design ;-)
note: Ahh you must kill the attach image for google adsense code, the new style don’t permit this from google :(
- 51December 21st, 2006 8:22 pm
Very impressive list. Mit den Websites kann man sich wochenlang beschäftigen :-) Michael
- 52December 21st, 2006 9:11 pm
Hell Yeah!!!
amazing!!
in css we the trust!! - 53December 21st, 2006 9:37 pm
I agree with Russell about overuse of tabs and gradiants in 2006. I’m guilty of this as well. I have a feeling that in a few years we’ll look back and laugh that all our websites looked the same.
- 54December 21st, 2006 9:51 pm
Thank you for including my website in it… but I will be fair play : my website is no CSS based… it’s full flash… sorry.
Nice selection anyway. - 55December 21st, 2006 11:54 pm
Sorry, but banyoles ist rather average design. What’s good on this? The CSS-Code? *shrug*
- 56December 22nd, 2006 1:12 am
Hi I’m interesting in CSS but I’m not so good :(
I need a professional help :’(
I want to be ” CSS guru “ - 57December 22nd, 2006 2:26 am
very nice!
- 58December 21st, 2006 4:23 pm
This is a site that I’m putting up for contention http://surfcore.co.uk which use an advanced recipe of XHTML, CSS, java script and transparent png’s.
I hope you like…
- 59December 22nd, 2006 3:14 pm
Really smashing and nice designs. Do you sell these templates? :)
- 60December 22nd, 2006 4:52 pm
A good post for web designers.These templates looks very nice.
- 61December 22nd, 2006 8:15 pm
Yes, these designs are really useful to find new ideas and concepts. Thanks.
- 62December 23rd, 2006 10:11 am
Inspired by the gorgeous examples above, my blog got a facelift too! http://ilkeryoldas.blogspot.com
- 63December 23rd, 2006 3:59 pm
WoW! This is great! Wonderful source of inspiration.
- 64December 24th, 2006 4:31 pm
Thanks for the list. It’s a nice compilation!
- 65December 25th, 2006 8:33 pm
too many beaty for 1 post
- 66December 27th, 2006 4:24 am
Wonderfull.Thanks
- 67December 28th, 2006 10:36 pm
thank for this beauteful cites. css is a very good thing. you can do many things by it.
- 68December 29th, 2006 6:57 am
Great list. Keep up the good work!
- 69December 29th, 2006 11:48 pm
Nice list! Really like the ones that do not look like every other wordpress blog.
- 70January 3rd, 2007 11:23 pm
All the images are broken! I wanted to share this link with my readers, can you fix it?
- 71January 4th, 2007 11:03 pm
Nice list. You have excellent taste.
- 72January 6th, 2007 8:45 am
Cool list!!!!!!!
- 73January 7th, 2007 8:15 am
Can’t see the screenshots!
Is your image server down? - 74January 8th, 2007 11:03 pm
veeeeery nice collection… splendid!
- 75January 9th, 2007 12:00 am
good,i like some…not all
- 76January 10th, 2007 3:30 am
Thanks for the awesome review! So good to find a site with all the thumbnails of the sites and not just a list.
- 77January 11th, 2007 5:16 pm
Iam a webdesigner from india, i never expected this much of talent in the and cretivity peoples having, iam stunned see these websites, really amaging websites, cool colors and great combinations.
- 78January 11th, 2007 11:30 pm
beautiful, beautiful, beautiful AMAZING!! I´m depressed now – thx
- 79January 14th, 2007 8:54 pm
Beautiful sites maybe but not css based. Well this is in respect of one site anyway. The foxie.ru site is just images – placed in tables. It doesn’t even have alt tags. Waste of time and effort. It breaks if you try to make the images larger to read the text. The text is all images.
To put it bluntly I can’t say it is beautiful or css based. So one out of your 50 is not really what you say it is!
Rich
- 80January 16th, 2007 12:26 am
tomasio,
Banyoles.cat is a web of an administration and I believe that his design is impeccable if we it assimilate to others.
- 81January 17th, 2007 8:19 pm
when i see this websites i am become a friend of css and i try to make this type website by Css really it is super
Regards
rupesh - 82January 18th, 2007 6:44 am
wow, these are so amazing and colorful! I love CSS.
- 83January 20th, 2007 10:49 pm
All good stuff
- 84February 6th, 2007 12:45 am
Outstanding :)
- 85February 14th, 2007 10:18 am
seems good design but please don’t forget, there are a lot of people have bad connection speed! now i’m still research how to make beautiful design with so low of KB loaded just see my site on yodi.web.ugm.ac.id that’s my research so far
- 86February 16th, 2007 1:03 am
Nice collection.I like some of them.but yes some are just plain images.Still lots of things to learn.
- 87February 17th, 2007 1:21 am
Thanks for this very good article … I use this to my home work to school … Can I translate this with all comments and insert on my site? … Thanks
- 88March 3rd, 2007 2:46 am
good.
Very good page
Thanks. - 89March 6th, 2007 3:43 pm
A nice selection of Websites. some great desgigns. Just shows what is possible!
- 90March 8th, 2007 7:37 am
Impressive list of designs. Some design techniques are very interesting. I´m very glad that i found this site. I´m looking forward for the 50 beautiful css based web designs in 2007!
- 91March 10th, 2007 5:08 pm
This site is truly a great resource thanks for all your hard work
- 92March 13th, 2007 4:21 pm
Sehr inspirierende Seite mit vielen frischen Links – freue mich hier zu sein :)
- 93March 16th, 2007 2:53 am
A fantastic source of inspiration for us all. I personally am a big fan of CSS
- 94March 16th, 2007 10:26 pm
Amazing!!
- 95March 16th, 2007 10:42 pm
Hi I thank you for a wonderful site. You have done very good job.
- 96March 20th, 2007 2:28 pm
very interesting design , clean , neat ,
my prejudice against css sites has vanished (some css sites are very basic) - 97March 21st, 2007 11:38 pm
I’d just like to thank you for taking the time to create this internet website. It has been extremely helpful
- 98March 26th, 2007 8:13 pm
Beautiful list :)
good work - 99March 29th, 2007 7:58 am
Seguro que estos diseños me motivan :D
- 100March 31st, 2007 3:28 am
romanians again :P there are a few good designers here…
- 101April 1st, 2007 11:47 pm
It’s very great!
- 102April 4th, 2007 12:53 am
First class designs and sites – there really is no excuse for using tables these days!
- 103April 13th, 2007 3:36 pm
They are really nice, photoshop and css they both perfect.
- 104April 15th, 2007 8:15 am
Une grande partie de ces design sont magnifique, mais il y en a qui n’y ont pas vraiment leurs places… Il existe sur le web vraiment plus beau que cela en design XHTML/CSS.
En tout cas, merci pour la liste, qui peut etre une excellente source d’inspiration… - 105April 16th, 2007 10:46 pm
The sites shown here are visually appealing. The use of css to handle the layout, graphics, backgrounds, links is very well handled. The only issue is the css over takes the message and clouds the content. Sometimes simplicity can speak volumes. Our initial designs for our firms site looked very similar to all the ones shown here. Is that a coincidence. I don’t think so. The web-designer was referencing these sites for layout ideas. I think that is common amongst many designers these days. There is so much out there that looks fantastic, that one feels the urge to do it themself. Most web 2.0 sites look the same. I think we can all agree on that.
- 106April 17th, 2007 6:12 pm
Great list, all very Sexy and informative!
- 107
- 108April 25th, 2007 2:05 pm
Great , i shocked by desinging list. Very informative
- 109April 26th, 2007 3:29 am
It only took me 4 months to find this. Very nice work, thank you.
all the best, jon - 110April 28th, 2007 5:16 am
mind-boggling list! truly an inspiration! thanks for putting this up!
- 111April 29th, 2007 1:23 am
hi! can you say me, where i can buy your magazine.
I live in Puebla, mexico.i dont’ know if you sell your magazine in my country.
it’s very interesting.thank you
- 112May 2nd, 2007 10:36 am
This is going to give me some great ideas. Thanks for your work.
How’d you come across these sites anyways? - 113May 2nd, 2007 10:49 pm
simply great stuff yar……………
- 114May 2nd, 2007 10:51 pm
tnx for givng this fantastic listing. its really a great effort to pick the pearls from the sea……
- 115May 3rd, 2007 6:14 am
Really great collection, keep it up
- 116May 8th, 2007 1:26 am
definetly wonderfull designs,
i guess that “who are the designers of this websites ?” - 117May 10th, 2007 1:46 am
Very impressive list, especially I like “haveamint.com” you can almost feel the freshness.
- 118May 12th, 2007 8:20 am
Gracias por la expocisión..muy inspiradora.
- 119May 12th, 2007 10:35 pm
Nice Page with interesting comments. useful to build a new site
- 120May 18th, 2007 11:07 pm
Great resource- however -
where are e-commerce designs?? Sure these are all amazing but why hasn’t e-commerce embraced CSS based designs?
Corporate are finally getting there (ESPN, Sprint etc) but still not so many big online retailers are using this.
Someone please post links to these – as getting clients to invest in CSS based designs for e-commerce is still near impossible.
- 121May 19th, 2007 11:26 am
best site of its kind :-)
- 122May 22nd, 2007 11:12 pm
this video and movie site has a good css and ajax combination
I hope you like it…
link - 123May 23rd, 2007 5:46 pm
That’s a really great list. Thanks for sharing. Really like the vibrant designs collection. Rgds, Dave
- 124May 25th, 2007 10:29 am
so well-cssed sites!:)
- 125May 30th, 2007 1:18 pm
Hi,wow thats a lot of links,it must took you forever!This is very interesting,i love your topics.you sound very educated when it comes to these kinds of things.Me,im just learning css and html,it can be very confusing!Keep at it.Feel free to leave me an e mail sometime:)
- 126June 11th, 2007 11:33 pm
Awesome work and very inspirational (“,)
- 127June 22nd, 2007 4:57 pm
Amazing stuff here!
- 128June 24th, 2007 3:39 am
That´s right , this site is 100% flash (http://olivier.danchin.neuf.fr/pages/home.htm)
there is nothing to do with CSS ;
by the looks of it the list needs revamping.; - 129June 29th, 2007 5:53 pm
Indeed a great list, a 2007 update will be great. I wish some of my websites to be in this list :D.
- 130July 1st, 2007 6:08 am
Beautiful sites and compiling them like this makes for a useful inspirational reference, looking forward to 2007′s collection.
Maybe a separate Web 2.0 collection of sites might also be on the cards??
- 131July 1st, 2007 5:05 pm
Great list ! Amazing. Komodio media is really cool :)
- 132July 6th, 2007 12:23 pm
Awesome list! My understanding of css is still in the baby stage, but hopefully I will gain enough experience to make websites as great as these!
- 133July 7th, 2007 11:41 am
Thank you very much for this great list.
I hope to get one day one of my websites in such a listing :PPierre – From France
- 134July 8th, 2007 7:46 am
very nice collection.. Thanks smashingmagazine :)
- 135July 8th, 2007 7:43 pm
Inspiring! A good material to learn from.
- 136July 9th, 2007 9:49 pm
wow!!! nice collection of CSS based websites. the best thing is that you will find this website on top position (keyword: css based websites)
thanx great links
- 137July 11th, 2007 2:11 pm
I will go home crying, these designs make my dreams worth nothing. Would you make a list for year 2007?
Good post. - 138July 14th, 2007 7:43 am
Yeah, I feel like Robert, a new list (or an update of this one) would be really great ;)
- 139July 19th, 2007 5:30 pm
I like most of the designs, but there are no big commercial sites here. You should focus more on designs that have advertising on their sites so that we could get inspiration on how to set up a site with advertising too, it’s not easy.
- 140July 21st, 2007 6:13 pm
hi,
It’s nice to see what we can do with CSS + XHTML but, surely, we need to have in mind that a semantic markup is VERY important to a successful site.
- 141July 26th, 2007 9:30 pm
Ok i like the designs, any chance of a real elegant one that i could use for free.
Web design is not my thing but was asked to set up a website to help people who have been abused.
I would love to know how you guys create such beautiful images, i know what i want but cant design it figred i am alcking the brains so i am going the cheeky route.
Best wishes
Kim
- 142August 6th, 2007 6:24 pm
amaizing css, great..
thanks for share - 143August 9th, 2007 7:59 pm
Great list, some i never saw before!
check out a new css gallery with very high selection standards
- 144August 17th, 2007 5:05 pm
Great web sites..
- 145August 21st, 2007 5:55 am
Of course, I’m jealous that my visual and CSS skills are just not up to the job, but I find a lot of these sites visually confusing, samey and downright difficult to use. They look pretty, but I wouldn’t want to navigate them for any length of time.
A lot of them don’t strike me as particularly accessible; lots of text rendered as images, for example.
I guess it depends on how you define beauty – but I’d like to see a top 10 of accessible, usable sites.
- 146August 22nd, 2007 8:00 pm
Nice collection, but I am not listed. ;)
- 147August 30th, 2007 11:10 pm
Great concept…
An Artistic way of approach for a business promotion.
No craps, An eyes to relax while surfing.
Keep up the good work…Bee Dainsiderz
DXB - 148August 31st, 2007 3:48 am
i’m intreasting in your theme,but i don’t know is the theme support chinese?your theme it nice,thank you
- 149September 1st, 2007 7:59 pm
Really great !
- 150September 4th, 2007 4:14 pm
really a good things r here
- 151September 7th, 2007 10:22 pm
Great collection of quality designs!
- 152September 20th, 2007 12:49 am
Found this article while searching for some design ideas. I like the design by Olivier. Simple design and affective use of white (purple) space.
- 153September 20th, 2007 7:14 pm
WoOo great list Sir, a great new source of inspiration for me, thanks ;)
- 154September 21st, 2007 4:47 pm
Great list, i’d wish i can create something like one of these..
- 155September 23rd, 2007 9:08 am
A great collection of sites! Nice Work
- 156September 26th, 2007 9:01 am
They are all great but a few of them looked absolutely excellent to me and those are the ones that I am probably gonna use for my new upcoming small projects. Thanks very much.
- 157October 12th, 2007 10:32 pm
@im suden, you are totally right.
Thats why i love watching this sites, but when it comes to work, i prefer Facebook – type usable sites…
- 158November 21st, 2007 6:36 pm
I think this material are very useful for new ideas. In Foxie and Kineda i found somethink new. Respect :)
- 159November 22nd, 2007 7:08 am
I`m happy, now website can be like a piece of art. There is some new design navigation ideas. Nice
- 160November 23rd, 2007 8:12 am
I wish our website looks as awesome as those you selected.
Wonderful collection.
Keeping back for more. - 161November 23rd, 2007 4:00 am
Hey thank you so much for putting in all the effort to make this article. I show my clients this post all the time to help show them the possibilities of web design and what the current trend is out there. I have found this article extremely helpful and it has helped me recently land a new client. Thanks again!!!
- 162November 24th, 2007 8:57 pm
nice work, I have been playing around with Photoshop and learning.
- 163December 5th, 2007 11:15 pm
Ok, we talking about nice design here, webdesign, and without no doubt this is nice collection of well designed web sites.
Unfortunately some of this sites are miscoded, some of them badly miscoded…
I have feeling that visitors of smashingmagazine.com have strong sense for correctly written code, so I was surprised when I saw sites without doctype ;(
- 10 Useful USB Thumb Drive Tricks - http://bit.ly/bUtuYc
- @kassy4 oh good good, you know how I respect your hard work and your efforts, Kat, didn't mean to sound harsh or something.
- @kassy4 dear Kat, sorry if my e-mail was disappointing... I didn't mean to upset you or something.
- The Three Key Elements ofIrresistible Email Subject Lines - http://bit.ly/aHN3wN
- Don’t Reduce Your Audience To A Stereotype - http://bit.ly/cc3yiS
- RT @abraham: Sometimes I write a letter on paper with a pen then burn it laughing about how Google must be crying over information it wi ...
- @jongold no, it's not :-)
- @collis it sounds exciting :-) We at Smashing should do it, too ;-)
- Try the “four minutes in the morning” routine with your significant other. It’ll pay many dividends. - http://bit.ly/bndnnE
- iCandies Icon Set: 60 Free Icons For Your User Interfaces and Apps - http://bit.ly/bRNdjB (please RT)
Some fine looking websites here, but also a nice illustration that “CSS-based” means nothing when applied to semantically incorrect markup. Some of these sites are even plain inaccessible.