Home > Back-end >  how can i do a HTML color gradient without CSS?
how can i do a HTML color gradient without CSS?

Time:03-02

Is there a way i can make a color gradient for text in HTML without using the <style> css </style> HTML tags?

Im in a thing where you can use HTML but CSS is banned there.

CodePudding user response:

You can always use inline styles. Howewer, I recommend CSS over inline styles.

You can use inline styles with the style attribute.

<div style="height: 100px;
  background-color: red;
  background-image:
    linear-gradient(
      red, #f06d06
    );">
</div>

This works on almost every HTML Tag

<body style ="width:100%;">...</body>
<h1 style ="font-size:2rem;">...</h1>
<p style ="color:red;">...</p>

The counterpart would be a CSS file looking like this:

body {
   width: 100%;
}
h1 {
   font-size: 2rem;
}
p {
   color: red;
}

or for the gradient example above:

div.gradient {
  height: 100px;
  background-color: red;
  background-image:
        linear-gradient(
          red, #f06d06
        );
 <div ></div>

CodePudding user response:

<div style="height: 100px;
  background-color: red;
  background-image:
    linear-gradient(
      red, #520146
    );">
</div>

  •  Tags:  
  • html
  • Related