<div class="form">
  <div class="control">
    <label for="color">color:</label>
    <input type="color" id="color" value="#ffffff" />
  </div>

  <div class="control">
    <label for="keyword">transparent or currentColor:</label>
    <select name="keyword" id="keyword">
      <option value="transparent" selected>transparent</option>
      <option value="currentColor">currentColor</option>
    </select>
  </div>
</div>

<div class="wrapper">
  <div class="element">transparent and currentColor in CSS color</div>
</div>
@import url("https://fonts.googleapis.com/css?family=Gochi+Hand");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  background-color: #291642;
  font-family: "Gochi Hand", sans-serif;
  color: #fff;
  font-size: 130%;
  letter-spacing: 0.1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100vw;
  min-height: 100vh;
  padding: 10px;
}

.wrapper {
  padding: 2vh;
  border: 1px dashed currentColor;
  border-radius: 5px;
  max-width: 50vw;
  min-height: 30vh;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

.form {
  display: flex;
  align-items: center;
  margin-bottom: 5vh;
}

.control {
  margin: 0 2vh;
  display: flex;
  align-items: center;
}

:root {
  --color: #fff;
  --keyword: transparent;
}

.element {
  padding: 6vh;
  font-size: 2rem;
  color: var(--color);
  border: 6px solid var(--keyword);
  background: linear-gradient(to right, #f36, var(--keyword));
  background-clip: border-box;
  background-origin: border-box;
  text-shadow: 1px 1px 0px var(--keyword);
  box-shadow: inset 2px 2px 2px var(--keyword), 4px 4px 1px 2px var(--keyword);
}
View Compiled
const input = document.getElementById("color");
const select = document.getElementById("keyword");

input.addEventListener("change", changeHandler);
select.addEventListener("change", changeHandler);

function changeHandler(e) {
  document.documentElement.style.setProperty(
    `--${e.target.id}`,
    e.target.value
  );
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.