This code creates a feature table with a color gradient using CSS. It displays various features in a table format. The purpose is to showcase features with gradient colors and inverted radius.
You can use this code on your website to showcase product features attractively. It adds visual appeal with gradient colors and rounded corners. Enhance user experience and engagement by presenting information in a stylish table format.
How to Create Feature Table With Color Gradient Using CSS
1. Start by creating the HTML structure for your feature table. You can use the following HTML code or customize it according to your needs. Ensure you have the necessary sections and elements such as headings, table rows, and cells.
Within the <section class="control"> element, add control options for customizing the table colors. These options include input elements for selecting background color, primary color, secondary color, and border color.
<section class="control">
<div>
<h1>Fancy Fluid Feature Table</h1>
<p>with inverted radius, and gradient borders</p>
</div>
<div><span class="color">
<input id="bg" type="color" value="#14141a"/></span><span class="color">
<input id="c1" type="color" value="#47c2ff"/></span><span class="color">
<input id="c2" type="color" value="#9871f4"/></span><span class="color">
<input id="bor" type="color" value="#343447"/></span></div>
</section>
<main id="app">
<table class="feature-table" cellpadding="0" cellspacing="0">
<thead>
<tr>
<td></td>
<th>
<div>
<div><span class="tag">Free</span></div>
</div>
</th>
<th>
<div>
<div><span class="tag pro">Top Tier</span></div>
</div>
</th>
</tr>
<tbody>
<tr>
<th colspan="1">
<div>Error Dodger</div>
</th>
<td>
<div>
<svg viewBox="0 0 448 512" fill="currentColor">
<path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"></path>
</svg>
</div>
</td>
<td>
<div>
<svg viewBox="0 0 448 512" fill="currentColor">
<path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"></path>
</svg>
</div>
</td>
</tr>
<tr>
<th colspan="1">
<div>Happiness Counter</div>
</th>
<td>
<div>
</div>
</td>
<td>
<div>
<svg viewBox="0 0 448 512" fill="currentColor">
<path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"></path>
</svg>
</div>
</td>
</tr>
<tr>
<th colspan="1">
<div>Emoji Deployment</div>
</th>
<td>
<div>
<svg viewBox="0 0 448 512" fill="currentColor">
<path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"></path>
</svg>
</div>
</td>
<td>
<div>
<svg viewBox="0 0 448 512" fill="currentColor">
<path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"></path>
</svg>
</div>
</td>
</tr>
<tr>
<th colspan="1">
<div>Code Whisperer</div>
</th>
<td>
<div>
<svg viewBox="0 0 448 512" fill="currentColor">
<path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"></path>
</svg>
</div>
</td>
<td>
<div>
<svg viewBox="0 0 448 512" fill="currentColor">
<path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"></path>
</svg>
</div>
</td>
</tr>
<tr>
<th colspan="1">
<div>Cat Overflow</div>
</th>
<td>
<div>
</div>
</td>
<td>
<div>
<svg viewBox="0 0 448 512" fill="currentColor">
<path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"></path>
</svg>
</div>
</td>
</tr>
<tr>
<th colspan="1">
<div>Self-Coding Mode</div>
</th>
<td>
<div>
</div>
</td>
<td>
<div>
<svg viewBox="0 0 448 512" fill="currentColor">
<path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"></path>
</svg>
</div>
</td>
</tr>
<tr>
<th colspan="1">
<div>Dance Party Deployments</div>
</th>
<td>
<div>
</div>
</td>
<td>
<div>
<svg viewBox="0 0 448 512" fill="currentColor">
<path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"></path>
</svg>
</div>
</td>
</tr>
<tr>
<th colspan="1">
<div>Easter Egg Hunt</div>
</th>
<td>
<div>
</div>
</td>
<td>
<div>
</div>
</td>
</tr>
<tr>
<th colspan="1">
<div>Bug Hunter Mode</div>
</th>
<td>
<div>
<svg viewBox="0 0 448 512" fill="currentColor">
<path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"></path>
</svg>
</div>
</td>
<td>
<div>
</div>
</td>
</tr>
<tr>
<th colspan="1">
<div>Developer Fortune Teller</div>
</th>
<td>
<div>
</div>
</td>
<td>
<div>
<svg viewBox="0 0 448 512" fill="currentColor">
<path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"></path>
</svg>
</div>
</td>
</tr>
</tbody>
</thead>
</table>
</main><a class="social-icon codepen" href="https://codepen.io/simeydotme" title="view my codepens"> Made by Simey</a>
<a class="social-icon twitter" href="https://twitter.com/simeydotme">
<svg viewBox="0 0 24 24">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" />
</svg>
</a>
<a class="social-icon github" href="https://github.com/simeydotme">
<svg viewBox="0 0 24 24">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" />
</svg>
</a>
2. Now, let’s style the feature table using CSS. The following CSS code will create a table with gradient backgrounds and rounded corners, giving it a modern and stylish look.
:root {
/* vars */
--table-bg: rgb(20 20 26 / 1);
--table-border: #343447;
--table-padding: 0.5em;
--table-color-1: #47c2ff;
--table-color-2: #9871f4;
--table-radius: 12px;
--inner-radius: calc(var(--table-radius) * 0.666667);
}
.feature-table {
width: 100%;
font-size: 14px;
position: relative;
svg {
height: 1.2em;
}
th {
text-align: left;
}
thead *,
td {
text-align: center;
}
th > div,
td > div {
padding: 0.5em;
}
tbody th > div {
padding-left: 1em;
}
tbody tr > td {
color: rgb(255 255 255 / 0.66);
}
tbody tr > * {
vertical-align: bottom;
min-height: 1.5em;
}
tbody tr > * > div {
display: grid;
justify-items: start;
}
tbody tr > td > div {
justify-items: center;
}
tbody tr * {
transition: all 0.25s ease-in-out;
}
tbody tr:hover * {
transition: all 0.05s ease-in-out;
}
tbody tr:hover > th {
color: var(--table-color-1);
}
tbody tr:hover > td svg {
color: white;
filter:
drop-shadow(0 0 4px white)
brightness(1.5);
}
tbody tr:hover > td:nth-of-type(1) {
color: white;
}
tbody tr:hover > td:nth-last-of-type(1) svg {
color: var(--table-color-2);
filter:
drop-shadow(0 0 4px var(--table-color-2))
brightness(1.5);
scale: 1.2;
}
thead th,
tbody tr:nth-of-type(1) > * {
padding-top: var(--table-padding);
}
tbody tr:nth-last-of-type(1) > * {
padding-bottom: var(--table-padding);
}
thead th:nth-of-type(1),
tbody th:nth-of-type(1) {
padding-left: var(--table-padding);
}
thead th:nth-last-of-type(1),
tbody td:nth-last-of-type(1) {
padding-right: var(--table-padding);
}
tbody tr:nth-of-type(1) > * > div {
padding-top: calc(var(--table-padding) * 2);
}
thead th > div,
tbody tr:nth-of-type(1) > th > div {
border-top: 1px solid var(--table-border);
}
tbody tr:nth-of-type(1) > td > div {
border-top: 1px solid transparent;
}
thead th:nth-of-type(1) > div,
tbody th:nth-of-type(1) > div {
border-left: 1px solid var(--table-border);
}
thead th:nth-last-of-type(1) > div,
tbody td:nth-last-of-type(1) > div {
border-right: 1px solid var(--table-border);
}
tbody tr:nth-last-of-type(1) th > div,
tbody tr:nth-last-of-type(1) td > div {
border-bottom: 1px solid var(--table-border);
}
thead th:nth-of-type(1) {
position: relative;
}
thead th:nth-of-type(1)::before {
content: "";
position: absolute;
z-index: 2;
left: 0px;
bottom: 0px;
translate: calc(var(--table-padding) * -2) calc(var(--table-padding) * -0.5);
background: transparent;
width: calc(var(--table-padding) * 2);
height: calc(var(--table-padding) * 2);
border-bottom-right-radius: calc(var(--table-radius));
border-bottom: var(--table-padding) solid var(--table-bg);
border-right: var(--table-padding) solid var(--table-bg);
}
thead th:nth-of-type(1)::after {
content: "";
position: absolute;
z-index: 2;
left: 0px;
bottom: -1px;
translate: calc(var(--table-padding) * -2) calc(var(--table-padding) * -0.5);
background: transparent;
width: calc(var(--table-padding) * 3);
height: calc(var(--table-padding) * 3);
border-bottom-right-radius: calc(var(--inner-radius));
border-bottom: 1px solid var(--table-border);
border-right: 1px solid var(--table-border);
box-shadow: calc(var(--table-padding) * 0.5)
calc(var(--table-padding) * 0.5) 0 0 var(--table-bg),
calc(var(--table-padding) * 1) calc(var(--table-padding) * 1) 0 0
var(--table-bg);
}
thead th,
tbody th,
tbody td {
background: var(--table-bg);
}
thead {
position: relative;
z-index: 1;
th {
&:nth-of-type(1) {
padding-right: 0;
border-top-left-radius: var(--table-radius);
> div {
border-top-left-radius: var(--inner-radius);
}
}
&:nth-of-type(2) {
padding-left: 0;
border-top-right-radius: var(--table-radius);
> div {
border-top-right-radius: var(--inner-radius);
}
}
}
}
tbody {
position: relative;
translate: 0px calc(var(--table-padding) * -1.5);
tr:nth-of-type(1) th {
border-top-left-radius: var(--table-radius);
> div {
border-top-left-radius: var(--inner-radius);
}
}
tr:nth-last-of-type(1) th {
border-bottom-left-radius: var(--table-radius);
> div {
border-bottom-left-radius: var(--inner-radius);
}
}
tr:nth-last-of-type(1) td:nth-last-of-type(1) {
border-bottom-right-radius: var(--table-radius);
> div {
border-bottom-right-radius: var(--inner-radius);
}
}
th {
padding-right: 0;
}
td {
padding-left: 0;
}
}
thead th:nth-last-of-type(1) {
position: relative;
}
thead th:nth-last-of-type(1) > div > * {
position: relative;
z-index: 4;
}
thead th:nth-last-of-type(1)::before {
content: "";
z-index: 3;
height: 1px;
width: calc(130%);
position: absolute;
top: var(--table-padding);
right: calc(var(--table-padding) + var(--inner-radius));
background-size: 100% 100%;
background-position: 0px 0px;
background-image: linear-gradient(
270deg,
var(--table-color-1) 50%,
var(--table-border)
);
}
&::after {
content: "";
z-index: 2;
width: 1px;
height: calc(
100% - ((var(--table-padding) * 4) + (var(--inner-radius) * 4))
);
position: absolute;
right: var(--table-padding);
top: calc(var(--table-padding) + var(--inner-radius));
background-size: 100% 100%;
background-position: 0px 0px;
background-image: linear-gradient(
180deg,
transparent,
var(--table-color-2) 3em,
var(--table-border) 75%
);
}
thead th:nth-last-of-type(1) > div::after {
content: "";
z-index: 2;
position: absolute;
right: var(--table-padding);
top: var(--table-padding);
width: calc(100% - 2px);
height: calc(100% - 2px);
border-top-right-radius: var(--inner-radius);
border-right: 1px solid transparent;
border-top: 1px solid transparent;
background: linear-gradient(0deg, var(--table-bg), var(--table-bg))
padding-box,
radial-gradient(
100% 100% at 100% 0%,
transparent 20%,
var(--table-border) 100%
)
border-box,
conic-gradient(
from 0deg at 110% -10%,
var(--table-color-1) 0%,
var(--table-color-2) 50%,
var(--table-color-1) 75%
)
border-box;
}
thead::after,
thead::before,
thead > tr > th:last-child::before,
thead > tr > th:last-child::after {
--c: var(--table-color-1);
content: "";
z-index: 5;
position: absolute;
background-color: var(--c);
right: 4px;
top: 4px;
width: 14px;
height: 14px;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
mask-image: url(https://assets.codepen.io/13471/sparkle.svg);
animation: sparkle1 4.5s ease-in infinite 0s both;
}
thead::before {
--c: var(--table-color-2);
right: 18px;
top: 18px;
width: 10px;
height: 10px;
animation-duration: 3.75s;
animation-delay: 1s;
}
thead > tr > th:last-child::before {
--c: var(--table-color-1);
right: 2px;
top: 18px;
width: 6px;
height: 6px;
animation-duration: 2.33s;
animation-delay: 0.7s;
}
thead > tr > th:last-child::after {
--c: var(--table-color-2);
right: 23px;
top: 4px;
width: 7px;
height: 7px;
animation-duration: 2.66s;
animation-delay: 0.3s;
}
}
.tag {
display: block;
padding: 0.125em 0.5em;
background: linear-gradient(0deg, rgb(48 46 52 / 1), rgb(48 46 52 / 1));
border-radius: 4px;
border: 1px solid transparent;
}
.tag.pro {
background: linear-gradient(180deg, rgb(48 46 52 / 0.9), rgb(48 46 52 / 1))
padding-box,
linear-gradient(
to bottom right,
var(--table-color-1),
var(--table-color-2)
)
border-box;
}
@keyframes sparkle1 {
0% {
opacity: 0;
translate: -5px 0px;
scale: 0.85;
animation-timing-function: ease-in;
}
25% {
opacity: 1;
scale: 1;
animation-timing-function: ease-out;
}
33%,
49.999% {
animation-timing-function: ease-out;
opacity: 0;
translate: 0px -20px;
scale: 0.75;
}
50% {
opacity: 0;
translate: -15px 0px;
scale: 0.85;
animation-timing-function: ease-in;
}
75% {
opacity: 1;
scale: 1;
animation-timing-function: ease-out;
}
83%,
100% {
animation-timing-function: ease-out;
opacity: 0;
translate: -10px -20px;
scale: 0.75;
}
}
.control {
display: flex;
flex-direction: column;
text-align: center;
grid-template-columns: 1fr 1fr;
gap: 1em;
justify-content: center;
align-items: center;
* {
margin: 0;
}
> div {
display: flex;
gap: .5em;
}
> div:nth-child(1) {
flex-direction: column;
gap: 0;
}
}
.control {
* {
box-sizing: border-box;
}
span.color {
}
input[type="color"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 4em;
height: 3em;
background-color: transparent;
border: none;
cursor: pointer;
box-sizing: border-box;
}
input[type="color"]::-webkit-color-swatch {
border-radius: 2em;
border: 3px solid var(--table-bg);
box-sizing: border-box;
}
input[type="color"]::-moz-color-swatch {
border-radius: 2em;
border: 3px solid var(--table-bg);
box-sizing: border-box;
}
}
body {
padding-block: 2em;
grid-template-rows: 1fr minmax(1fr, 5fr);
}
#app {
padding: 2em;
overflow: hidden;
resize: horizontal;
width: 50vw;
}
3. Lastly, add JavaScript functionality to update the table colors dynamically based on user input. The provided JavaScript code listens for input changes on the color selection inputs and updates the table accordingly.
const $main = document.querySelector('main');
const $c = document.querySelectorAll("input");
const setColors = () => {
$main.style.setProperty('--table-bg', $c[0].value);
$main.style.setProperty('--table-color-1', $c[1].value);
$main.style.setProperty('--table-color-2', $c[2].value);
$main.style.setProperty('--table-border', $c[3].value);
}
$c.forEach(($el) => {
$el.addEventListener("input", (e) => {
setColors();
});
});
That’s all! hopefully, you have successfully created a Feature Table With Color Gradient on your website. If you have any questions or suggestions, feel free to comment below.
Similar Code Snippets:
CSS Show Hide Div On Click without JavaScript- HTML Button Hover Effects with Box-shadow
- Full Screen Width and Height Sections Using CSS
- Responsive Image Hotspots Code with Demo
- Horizontal News Scroller HTML Code
- Mask Image and Text Using CSS Clip Path and SVG
- Simple Messaging Ui in HTML CSS with Example
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.