Is it possible to make a Gradient without using an image? I have a table cell that I would like to make a gradient background spanning from the color #dddddd to WHITE. This is a very gentle gradient (dddddd is almost white) but it’s what I want. I just was hoping I wouldn’t have to create yet another graphic. Thanks. 
Search “CSS gradient” (without the quotation marks).
2 Likes
I wasn’t using the right search terms!
Archibald what do I when I have padding?
<!DOCTYPE html>
<HTML LANG="en">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Calistoga&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Solway:wght@300;400;500;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
<title>SHORTY1 ᰄ ELECTION</title>
<style>
body {
width: 950px;
margin: 2rem auto;
margin-bottom: 3.75rem;
font-family: 'courier prime', monospace;
font-size: 2.25rem;
line-height: 2.38rem;
font-weight: bold;
color: black;
}
td {
padding-top: .6rem;
padding-right: .6rem;
padding-bottom: .2rem;
padding-left: .7rem;
}
.title {
text-align: center;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
font-family: 'special elite', serif;
font-weight: 400;
font-size: 3.13rem;
line-height: 2.5rem;
}
.tally {
font-family: 'calistoga', serif;
font-weight: 700;
font-size: 2.25rem;
line-height: 2.38rem;
color: crimson;
}
.class {
font-family: 'calistoga', serif;
font-weight: 700;
font-size: 2.25rem;
line-height: 2.38rem;
color: crimson;
}
/* ━━━━━━━━━ PAUL’S TAB ━━━━━━━━━ */
.tablabel1 {
position: relative;
text-align: center;
border-radius: 20px 20px 0px 0px;
color: black;
padding: 1rem 1rem 0;
font-size: 2.4rem;
line-height: 2.63rem;
font-weight: bold;
height: 52px;
width: 225px;
filter: drop-shadow(-3px 0px #000) drop-shadow(3px 0px #000);
}
.tab {
display: flex;
max-width: 950px;
margin: auto;
overflow: hidden;
position: relative;
z-index: 1;
filter: drop-shadow(0px -5px #000);
border-bottom: 10px solid #ffe5fe;
}
.tab b {
display: flex;
transform: translateY(5px);
justify-content: center;
}
.tab:after,
.tab:before {
content: "";
position: relative;
z-index: 2;
flex: 1;
box-shadow: 0 34px #dbffcb; /* #ffdbd4 is coral */
/* was black*/
/* this is necessary or a gap will show */
}
.tab:after {
border-radius: 0 0 0 80px;
margin-left: -9px;
}
.tab:before {
border-radius: 0 0 80px 0;
margin-right: -9px;
}
.tablabel1:before {
content: "";
pointer-events: none;
position: absolute;
inset: 0 0 0 0;
z-index: -1;
background: #dbffcb; /* #e5cbff is lilac; #ffdbd4 is coral */
/* was black*/
transform: perspective(100px) rotateX(36deg) translateY(5px);
border-radius: 20px 20px 0 0;
}
.bkdimg {
position: relative;
background: none;
overflow: hidden;
margin-bottom: -2px;
/* attempt to stop rounding errors when zoomed*/
}
.ctr {
position: absolute;
inset: 0 0 0 0;
}
.ctr2 {
z-index: 3;
}
.ctrmid {
z-index: 2;
}
.ctr3 {
z-index: 1;
}
.ctr2 .tab:before {
flex: 0 0 65px;
}
.ctr3 .tab:after {
flex: 0 0 65px;
}
.ctr2 .tab span *,
.ctr2 .tablabel1:before {
background: #ffe5fe; /* pink */
color: #000;
}
.ctr2 .tab:before,
.ctr2 .tab:after {
box-shadow: 0 34px #ffe5fe; /* pink */
}
.ctr3 .tab span *,
.ctr3 .tablabel1:before {
background: #caffff;
color: #000;
}
.ctr3 .tab:before,
.ctr3 .tab:after {
box-shadow: 0 34px #caffff;
}
.tab1active .ctr,
.tab2active .ctr,
.tab3active .ctr {
position: absolute;
}
.tab1active .ctr2,
.tab2active .ctrmid,
.tab3active .ctr3 {
position: relative;
z-index: 4;
}
.tab3active .ctr2 {
z-index: 1;
}
/* ━━━━━━━━━━ TABLE1 ━━━━━━━━━━ */
.table1 {
padding-bottom: 6px;
text-align: center;
background: black;
width: 100%;
}
/* ━━━━━━━━━━ TABLE2 ━━━━━━━━━━ */
.td2 {
width: 268px; /* COLUMN WIDTH */
color: black;
text-align: left;
}
.table2 td
text-align: left;
padding-bottom: 8px;
}
.table2 {
width: 100%;
text-align: left;
vertical-align: middle;
border-top: .63rem groove #00ffff;
/* cyan */
border-right: .63rem groove #00ffff;
border-bottom: none;
border-left: .63rem groove #00ffff;
border-collapse: collapse;
font-family: 'courier prime', monospace;
font-size: 2.25rem;
line-height: 2.38rem;
font-weight: bold;
color: black;
}
.table2 tbody tr td:nth-of-type(1) {
border-right: .19rem solid black;
text-align: center;
}
.table2 tbody tr td:nth-of-type(2) {
border-right: .19rem solid black;
text-align: left;
}
.table2 tbody tr:nth-child(odd) {
background-color: #ffffcc;
/* pastel yellow */
border-bottom: .19rem solid black;
}
.table2 tbody tr:nth-child(even) {
background-color: white;
border-bottom: .19rem solid black;
}
/* ━━━━━━━━━━ TABLE1 ━━━━━━━━━━ */
.table1 {
padding-bottom: 6px;
text-align: center;
background: black;
width: 100%;
}
/* ━━━━━━━━━━ TABLE2 ━━━━━━━━━━ */
#grad1 {
background-image: linear-gradient(#dddddd, white);
}
.td2 {
width: 268px; /* COLUMN WIDTH */
color: black;
text-align: left;
}
.table2 td {
padding-bottom: 8px;
}
.table2 {
width: 100%;
text-align: left;
vertical-align: middle;
border-top: .63rem groove #00ffff; /* cyan */
border-right: .63rem groove #00ffff;
border-bottom: none;
border-left: .63rem groove #00ffff;
border-collapse: collapse;
font-family: 'courier prime', monospace;
font-size: 2.25rem;
line-height: 2.38rem;
font-weight: bold;
color: black;
}
.table2 tbody tr td:nth-of-type(1) {
border-right: .19rem solid black;
text-align: center;
}
.table2 tbody tr td:nth-of-type(2) {
border-right: .19rem solid black;
text-align: left;
}
.table2 tbody tr:nth-child( odd ) {
background-color: #ffffcc; /* pastel yellow */
border-bottom: .19rem solid black;
}
.table2 tbody tr:nth-child( even ) {
background-color: white;
border-bottom: .19rem solid black;
}
.condj {
text-align: justify;
font-family: 'roboto condensed', sans-serif;
font-size: 2.25rem;
line-height: 2.38rem;
font-weight: 400;
}
.condlb {
text-align: left;
font-family: 'roboto condensed', sans-serif;
font-size: 2.25rem;
line-height: 2.38rem;
font-weight: 700;
}
.condc {
text-align: center;
font-family: 'roboto condensed', sans-serif;
font-size: 2.25rem;
line-height: 2.38rem;
font-weight: 400;
}
.blu {color: blue}
.blub {color: blue; font-weight: bold;}
.fusch {color: #ca009b}
.fuschb {color: #ca009b; font-weight: bold}
.fuschi {color: #ca009b; font-style: italic}
.crim {color: crimson}
.crimb {color: crimson; font-weight: bold}
.crimi {color: crimson; font-style: italic}
.grey {color: grey}
.green {color: #248900} /* green */
.greenb {color: #248900; font-weight: bold}
/* ━━━━━━━━━━━ LINKS ━━━━━━━━━━━━ */
a:active {color: #ff70ff}
a:hover {color: #ff70ff}
a:link {color: blue}
a:visited {color: blue}
.redlink a:link {color: crimson}
.redlink a:visited {color: crimson}
.plink a:link {
color: #ffe5fe; /* pink */;
background: black;
text-align: center;
font-style: italic;
font-family: 'roboto condensed', sans-serif;
font-size: 2rem;
line-height: 2.13rem;
font-weight: 400;
}
.plink a:visited {
color: #ffe5fe;
background: black;
text-align: center;
font-style: italic;
font-family: 'roboto condensed', sans-serif;
font-size: 2rem;
line-height: 2.13rem;
font-weight: 400;
}
.clink a:link {
color: #00ffff; /* cyan */
background: black;
text-align: center;
font-style: italic;
font-family: 'roboto condensed', sans-serif;
font-size: 2rem;
line-height: 2.13rem;
font-weight: 400;
}
.clink a:visited {
color: #00ffff;
background: black;
text-align: center;
font-style: italic;
font-family: 'roboto condensed', sans-serif;
font-size: 2rem;
line-height: 2.13rem;
font-weight: 400;
}
.ctr {text-align: center}
.undr {text-decoration: underline}
/* ━━━━━━━━━ END CSS ━━━━━━━━━━ */
</style>
</head>
<body>
<div class="title">
10 Democratic Senate Seats in 2022
</div>
<div class="bkdimg tab1active">
<div class="ctr ctr2">
<div class="tab"><span class="tablabel1"><b>Senate</b></span></div>
</div>
<div class="ctr ctrmid">
<div class="tab"><span class="tablabel1"><b>—Class 3—</b></span></div>
</div>
<div class="ctr ctr3">
<div class="tab"><span class="tablabel1"><b> 2022 </b></span></div>
</div>
</div>
<table class="table1">
<tr>
<td><div class="plink">
<a href="https://fvap.gov/guide/appendix/state-elections" target="blank">
Click here for current Primary Dates</a></div>
</td>
<td><div class="clink">
<a href="https://en.m.wikipedia.org/wiki/2022_United_States_Senate_elections" target="blank">
Wikipedia 2022 Senate Class 3</a></div>
</td>
</tr>
</table>
<table class="table2">
<tr>
<td style="background: #dddddd">
<span class="tally">LOST</span> OHIO/ J.D. VANCE NOVEMBER 8<br>
<span class="tally">LOST</span> WISCONSIN/ RON JOHNSON NOVEMBER 8
</td>
</tr>
<tr>
<td>
<div id="grad1" class="condj" style="text-align: justify; padding-bottom: 4px">
ᰄ Senate elections are held, staggered in 3 “Classes.” <span class="condlb">The red number in the first column denotes the other Senate Class this state is a member of</span> so you can see when the candidate’s next opportunity to run again will be if s/he loses. <span class="condlb"><i>The General was held on November 8, 2022; </i></span><span class="condlb">all dates ref’d. are for the </span><span class="crimb">Primaries</span>.
</div>
</td>
</tr>
</table>
</body>
</html>
I tried this to no avail:
#grad1 {
background-image: linear-gradient(#dddddd, white);
background-clip: border-box;
}
If you want the gradient to completely fill the table cell, apply the gradient to the <td> element.
3 Likes
It worked! And I was able to get rid of this:
background-clip: border-box;
Thank you Archibald.
2 Likes