As front-ends we usually need appealing backgrounds to use them as hero headers, sometimes to attract a person into a specific product and make them look more desirable, or also as covers for posts so they don't look so plain. So I thought it would be nice if I shared with you some CSS gradients and some PNG mesh gradients to help you out with this task.
These are some of my personal favorites:
| Warm Winter |  |
|---|
/*Warm Winter - Gradient*/
background-color: white;
background-image: radial-gradient(at 19% 54%, hsla(55,100%,77%,0.34) 0px, transparent 50%),
radial-gradient(at 3% 47%, hsla(45,100%,80%,0.8) 0px, transparent 50%),
radial-gradient(at 98% 3%, hsla(226,100%,53%,0.87) 0px, transparent 50%),
radial-gradient(at 94% 44%, hsla(44,100%,79%,0.8) 0px, transparent 50%),
radial-gradient(at 53% 29%, hsla(13,100%,72%,0.87) 0px, transparent 50%),
radial-gradient(at 65% 14%, hsla(273,100%,68%,0.83) 0px, transparent 50%),
radial-gradient(at 14% 14%, hsla(16,100%,76%,1) 0px, transparent 50%);
| Orange Glitch |  |
|---|
/*Orange Glitch - Gradient*/
background-color: white;
background-image: radial-gradient(at 53% 49%, hsla(25,98%,62%,1) 0px, transparent 50%),
radial-gradient(at 14% 44%, hsla(307,88%,74%,0.85) 0px, transparent 50%),
radial-gradient(at 91% 47%, hsla(58,96%,68%,0.69) 0px, transparent 50%),
radial-gradient(at 51% 43%, hsla(328,100%,51%,0.6) 0px, transparent 50%),
radial-gradient(at 56% 58%, hsla(108,66%,77%,1) 0px, transparent 50%);
| Oily Bubblegum dark version |  |
|---|
/Oily Bubblegum - Gradient/
background-color: #121212;
background-image: radial-gradient(at 50% 50%, hsla(341,100%,71%,1) 0px, transparent 50%),
radial-gradient(at 55% 45%, hsla(259,60%,71%,1) 0px, transparent 50%),
radial-gradient(at 46% 45%, hsla(82,61%,65%,1) 0px, transparent 50%),
radial-gradient(at 54% 55%, hsla(67,64%,79%,1) 0px, transparent 50%),
radial-gradient(at 45% 55%, hsla(212,98%,75%,1) 0px, transparent 50%);
About the 10 mesh gradients
Even though CSS gradients can be more than enough in many situations, some designs aren't easy to do with just CSS, that's why I'm also giving for free 10 HD mesh gradients in 1920x1080px and 1080x1080px in PNG format that can give your project a fresh and different look.
What's included?
10 PNG HD backgrounds 1080x1080px & 1920x1080px
3 variants of a full-height header
A social media template
This is not a “pay what you want” or “How much would you pay for this?” product, it is an actual Free $0.00 item that you can even use commercially
Why am I doing this?
I love web design, specially the front-end, in the past years I've found myself in the situation of starting projects that I never finish, partially because I'm a perfectionist. I've always wanted to make a living out of designing and coding, and I also wanted to have a space for front-ends and designers to share my passion and offer resources to them. And why offer free stuff? I believe generosity is a key to success, so the free stuff I'm offering is high quality (premium like).
This specific item, I made it to cheer me up to do larger projects and get a starting point, so I started with something simpler where my perfectionism wouldn't get too much into (still then, I couldn't hold myself too much).
If you would like to be part of this space and get more new resources, make sure to stick with me, feel free to message me:
BTW, any specific background that you specially liked?
Top comments (0)