Feature Table With Color Gradient Using CSS

Feature Table With Color Gradient Using CSS
Code Snippet:Color Gradient Feature Table
Author: Simon Goellner
Published: March 22, 2024
Last Updated: March 22, 2024
Downloads: 204
License: MIT
Edit Code online: View on CodePen
Read More

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>&nbsp;
            </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>&nbsp;
            </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>&nbsp;
            </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>&nbsp;
            </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>&nbsp;
            </div>
          </td>
          <td>
            <div>&nbsp;
            </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>&nbsp;
            </div>
          </td>
        </tr>
        <tr>
          <th colspan="1">
            <div>Developer Fortune Teller</div>
          </th>
          <td>
            <div>&nbsp;
            </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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X