How do i make a gradient bg on a single table square?

by

I need to create a periodic table but each element has a gradient as background and I’m stumped on how to do it.

This is how it should look:

a few cells with different colors all with some gradient to it

no finished code a have right now, only one cause i wanted to figure out the gradient first (i dont know how to use CSS, only HTML for now)

  • 1

    Does this answer your question? How do you make a gradient background in css?

    – 

  • If you have access to the HTML of the table, just add classes to each cell that change the bg to what you want

    – 

I’m assuming you know about table layout, if not here’s a read

If you’re using inline CSS do something along the lines of

<td style="background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(255,248,0,1) 100%);">.

If you’re using external CSS have to first apply a class on the tag in HTML, like this: <td class="bgYellow">, then you have to go to your .css file and add:

background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(255,248,0,1) 100%);

Explanation

The background style adds backgrounds in CSS, to make linear gradients (the type you want, from point A to point B) we use linear-gradient(), let’s dissect it:

90deg – makes the orientation how we want it to be. It can be changed to any number of degrees.

rgba(2, 0, 36, 1) – the first color of the gradient, you can use online color pickers or one built into your IDE to get an rgba color easily and hex codes and some other color systems work aswell

0% – transparency of the first color, in this case 0.
The same with the other color.

Highly recommend using an online gradient generator like this:
https://cssgradient.io/

Leave a Comment