12 Copy & paste CSS gradients + 10 Free HD mesh gradients
Tags: css, freebie
Published: 2024-04-26 15:01:00

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.

{% codepen https://codepen.io/schemetastic/pen/poBKLwM %}

These are some of my personal favorites:

Warm Winter | ![A gradient background featuring warm and winter colors on the top such as deep blue and orange tones and the bottom is completely white](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p7fxhb4tncfyd36ajifa.png)
:-:|:-:

```css
 /*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 | ![A gradient background featuring a glitch style design, mainly orange in the middle, pinkish to the left and yellowish to the right. The top and the bottom are white](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9imjimxroxlnx5fjv47y.png)
:-:|:-:

```css
 /*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 | ![A gradient background featuring a design that looks like oil, the center is blurry-like circle pink and the sides have an iridescent style, the background is black.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ksexodu43eo8ss5ve44b.png)
:-:|:-:


```css
 /*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**

![samples of the 10 gradients: Tropicalia (green), Melon sunset (yellowish and green), Orange pool (orange), Lilac horizon (lilac), Silk coffee (coffee), Lava mist (orange and blueish tones), Pink days (pinkish and blueish), Electric orange feel (electric like design in orange and blueish), Vanilla Blueberry (yellow cream and dark purple), Vanilla grape sundae (purple and yellow cream) with 3 bottom designs, white, black and alpha](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3bzbuznnvr5grxw79go4.png)

**3 variants of a full-height header**

![3 stacked designs of a website header featuring the backgrounds Vanilla grape sundae, Tropicalia and melon sunset. 2 labels appear, the first one says “HTML files included” and the second says “Figma file included”](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ppk7vpu9225kxl911b3q.png)

**A social media template**

![A social media template that shows a design for a coffee shop that says “Indigo coffee house”, the top view of a coffee cup with a heart is in the middle, behind it at the top the Silk Coffee gradient is placed and at the bottom a solid indigo color. There are 2 labels, the first one says “Editable SVG template included” and the second says “1080X1080 PNG”](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nobrmw5rioydjsiijqwv.png)


**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**

[🔗 Link Here! ✨](https://ko-fi.com/s/6e46282c2f)

## 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:

- [Instagram](https://www.instagram.com/schemetastic/)
- [YouTube](https://www.youtube.com/@schemetastic)
- [Ko-fi](https://ko-fi.com/schemetastic)

BTW, any specific background that you specially liked?