Line25

Web Design Trend Showcase: Super Gradients

Read the full post

After the dominance of flat colours in web design I’ve noticed a new trend of gradient use beginning to emerge. Gradients are nothing new in web design, but the CSS property of linear-gradient now allows designers to add vibrant spectrums of colour directly to their code, rather than the traditional method of creating a gradient image in Photoshop. One advantage of the CSS approach is the gradient can be scaled to any size, which makes it great for screen filling gradient backgrounds. Today’s showcase features 25 examples of these super gradients used as backgrounds, headers and overlays.

Love Message

Love Message

Loubsol

Loubsol

Niek Dekker

Niek Dekker

W3

W3

symodd

symodd

Erik Zuuring

Erik Zuuring

Pixel Palace

Pixel Palace

Gifn.it

Gifn.it

Bacae

Bacae

Canal TP

Canal TP

Speedo Fit

Speedo Fit

Oscar Barber

Oscar Barber

Atom

Atom

Final

Final

The Snippet App

The Snippet App

lucas.marinm

lucas.marinm

Coline

Coline

Customeed

Customeed

Pushh

Pushh

3Minute inc.

3Minute inc.

Electric Mainline

Electric Mainline

Srcfari

Srcfari

TouchstoneJS

TouchstoneJS

NBSP

NBSP

  • 187
100 HD Blurred Backgrounds

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of 100 HD Blurred Backgrounds + bonus 10 realistic web shadows.

100 HD Blurred Backgrounds

Written by Iggy

Iggy is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Iggy's design tutorials and articles at his Web Design Blog or follow his daily findings on Twitter.

47 Comments

  1. Hi Chris, All are awesome designs as I found here always thanks for sharing it, I want to share this post on my facebook page.

  2. Cary Kelley says:

    Thanks for sharing…it definitely makes me want to play with some gradient backgrounds on my next project.

  3. Those gradients are so easy to the eyes.

  4. Yvonne says:

    Beautiful examples. I’ve always had a strange obsession with gradients. Thank you for sharing.

  5. David Aldana says:

    Thanks for this awesome showcase

  6. Alina says:

    Thanks for sharing. Good woks.

  7. Of all the things on the web that have a potential to look dated in a few years, I feel like these gradients will look SUPER dated. Just a prediction.

    They look awesome right now though

    • Brock says:

      I hear you, but I also feel like these gradients are no different than the super blurred out backgrounds that are being used a lot these days. As long as the colors work and its clean, I don’t fear it becoming too dated.

    • Courtney says:

      I have to agree with Andrew, it works well and is a nice trend for the time being but I don’t know if it will translate so well for the future. Who knows though? It’ll be interesting to see how/if it develops further as a trend in the next few years.

  8. Marianne says:

    I’ve been noticing this trend for a while and I think they’re simply gorgeous. They’re much softer colors and transitions than the gradients of just a few years ago.

  9. your website is very informative. tnx a lot

  10. janus says:

    sorry to spoil the fun, but Coline is not css, its an image … was just wondering on how they accomplished so advanced gradients through css

  11. Thinsquare says:

    You have shared great examples of CSS gradient.The main benefit is that we can reduce bandwidth,page loading time, and HTTP requests so we can say it is seo friendly.

    It is more accessible and flexible to front end designers.

  12. There is a bug on the ATOM site on the new build of Chrome 35, there gradient design effect is not showing and is displaying this as a solid colour. Anyone else having this problem?

  13. Fernando Castillo says:

    Very simple yet fascinating and attractive gradients to go through. First and last choice of website owners to gain excellent web presence.

  14. Yudi says:

    Coline is cooler one
    thanks for the share

  15. planleft says:

    really love this new trend of super Gradients!! thankss for share

  16. Cathy says:

    Gradient colors take the appearance of a web page to an altogether another level.Quite an improvement from flat colors.

  17. I will also add minimalistic with that gradient :)
    Thanks for sharing!

  18. Teelah says:

    Thanks for sharing these awesome inspirations, very cool! I was starting to think gradients weren’t in anymore, but the simple gradients actually are as backgrounds and such. It really gives a design that professional look, and its easy on the eyes.

  19. Satya says:

    Oh I love these gradients.. so soothing and the fonts are easy to see.

  20. Matt says:

    Really great to have a look at such a wonderful collection of designs.

  21. Kristinahughes says:

    Great collection! Lots of inspiration for the web designers in this list..

  22. halones says:

    Wah!! very awesome and very attractive webpage, Thanks for sharing

    http://www.halones.com/

  23. tnx a lot. i like your site

  24. Ashfaq ahmed says:

    Superb collection. few are pretty good like 3Minute and Electric Mainline

  25. Rahul says:

    Thanks For Sharing With Us.

  26. Piyush says:

    Great collection!
    Thanks For Sharing It With Us… :D

  27. sham sunder says:

    Really Nice Collection.Thanks For Sharing It.

  28. Arianna says:

    Great collection!
    I’m using linear gradient in my website too! Have a look! :)

  29. This post on gradients is awesome! It covers a large variety of web design techniques making it obvious that the one making the post specializes in web designs.

  30. Bilal says:

    I Like W3, its cool

  31. awesome theme in w3..love it

  32. Smith says:

    Thanks For sharing super designs

  33. Salomon says:

    it definitely makes me want to play with some gradient backgrounds on my next project.

  34. Thanks for sharing the latest trend of super gradients

  35. it definitely makes me want to play with some gradient backgrounds on my next project.

  36. Honey Singh says:

    Really Nice collection of gradients, i liked 3Minute and Electric Mainline. Thanks

  37. Bacae Design is awesome. Gonna use something similar in my project, thanks for sharing

  38. Renuka says:

    Great ideas and great design. Loved the way you have designed each template

Leave a response