Editing inner html custom gradient

Elements
1

Hey everyone. Im confused as to how to edit the inner html of an element to make a custom 4 point gradient. I found a CSS code generator online but when I edit the inner HTML, it gives me the element with the code pasted as code:

What am I doing wrong?

2

you need to enclose the innerHTML CSS code in a div…

<div style="width: 100%; height: 100%;">
paste your css code here 
</div>
1 Like
3

Thank you!!! I knew I was doing something wrong! :smile:

4

Its still just giving me the element with the code written in with no color:

=

5

your code is missing the keyword “background:”, try this…

<div style="width:100%;height:100%; background: -webkit-linear-gradient(left, #f85032 0%, #f16f5c 33%, #f6290c 51%, #f02f17 71%, #e73827 100%);"></div>

You are also limiting your gradient to WebKit browsers.

1 Like
6

Awesome Sauce! Thank you!

7

Also the code you were given is CSS so you can place inline as Greg has shown you or you can place it within a style tag like so …

<div class="gradient"></div>
<style>
/* but make sure you declare what element you're styling */
.gradient {
    /* code goes here! */
}
<style>

Also -webkit-linear-gradient is quite an old standard there is a new way that almost all the browsers support and it’s using just the "linear-gradient" declaration.

for example

.gradient {
  background-image:
    linear-gradient(
      to right, 
      red, 
      #f06d06, 
      rgb(255, 255, 0), 
      green
    );
}

notice the background-image as well. If you just do this with background then you might reset other css properties declared elsewhere.

I hope this gives you a little more insight into linear-gradient. Google is your friend if you want to learn more

D

3 Likes
8

Thank you! You guys are awesome!