# Gradient Background

**URL:** <https://community.hubspot.com/t/gradient-background/2921>\
**Category:** CMS Development\
**Tags:** css, javascript, html\
**Created:** [August 2, 2017, 8:58pm UTC](https://community.hubspot.com/t/gradient-background/2921 "2017-08-02T20:58:07Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kkitchens](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kkitchens/32/29368_2.png) [@Kkitchens](https://community.hubspot.com/u/Kkitchens)\
**Post date:** [August 2, 2017, 8:58pm UTC](https://community.hubspot.com/t/gradient-background/2921/1 "2017-08-02T20:58:07Z")

</div>

I have been trying to get a gradient background on one of my landing pages. I am new to the whole coding, CSS, HTML, JS ordeal. I have looked high and low for just a simple walk through on how to do so. The only thing is, it has to have all the steps (minus the extra “notes” in the code) from the beginning to the end. Most of the examples i have seen have multiple steps that need to be done but never go into detail of how to do it… help?

---

<div class="post-metadata">

**Author:** ![Reg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/reg/32/42561_2.png) [@Reg](https://community.hubspot.com/u/Reg)\
**Post date:** [August 3, 2017, 3:02pm UTC](https://community.hubspot.com/t/gradient-background/2921/2 "2017-08-03T15:02:14Z")

</div>

Here is a great resource for creating gradients: [Ultimate CSS Gradient Generator - ColorZilla.com](http://www.colorzilla.com/gradient-editor/)

Then you would just need to apply the generated CSS to the element you want to have a gradient on.

.main-background {

CSS code here

}