Reveal Secret Code Using CSS

This code reveals a secret code using CSS. It creates a sliding effect to unveil the code. The major functionality involves adjusting the appearance of digits based on hover or focus. It helps add interactive features to reveal hidden content.

You can use this code on websites to add interactive elements. It enhances user engagement by revealing hidden content dynamically. This feature is eye-catching and can be applied to various types of content or puzzles.

How to Create Reveal Secret Code Using CSS

1. First of all, load the Normalize CSS into the head tag of your HTML document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

2. Set up the HTML structure. Create a section element to contain your secret code. Inside the section, add a paragraph to introduce the purpose of the code revealer. Then, use an unordered list with list items for each digit of your secret code. Each list item should contain a span element to represent the digit.

<section>
  <p>Glide To Reveal Secret Code</p>
  <ul class="code">
    <li tabindex="0" class="digit">
      <span>0</span>
    </li>
    <li tabindex="0" class="digit">
      <span>3</span>
    </li>
    <li tabindex="0" class="digit">
      <span>4</span>
    </li>
    <li tabindex="0" class="digit">
      <span>8</span>
    </li>
    <li tabindex="0" class="digit">
      <span>7</span>
    </li>
    <li tabindex="0" class="digit">
      <span>2</span>
    </li>
  </ul>
</section>

3. Next, apply CSS styles to achieve the sliding effect for revealing the secret code. Define styles for the section, paragraph, and list elements to enhance their appearance. Utilize CSS properties like background, color, font-size, and box-shadow to make the elements visually appealing.

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui;
  background: hsl(0 0% 0%) !important; 
  gap: 2rem;
}

body::before {
	--line: hsl(0 0% 95% / 0.25);
	content: "";
	height: 100vh;
	width: 100vw;
	position: fixed;
	background:
		linear-gradient(90deg, var(--line) 1px, transparent 1px 10vmin) 0 -5vmin / 10vmin 10vmin,
		linear-gradient(var(--line) 1px, transparent 1px 10vmin) 0 -5vmin / 10vmin 10vmin;
	-webkit-mask: linear-gradient(-15deg, transparent 30%, white);
	        mask: linear-gradient(-15deg, transparent 30%, white);
	top: 0;
	z-index: -1;
}

section {
  display: grid;
  gap: 4rem;
  align-items: center;
  justify-content: center;
}

section p {
  margin: 0;
  font-size: 2.25rem;
  color: hsl(0 0% 40%);
  text-align: center;
  background: linear-gradient(hsl(0 0% 80%), hsl(0 0% 50%));
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
}

.code {
  font-size: 3rem;
  display: flex;
  flex-wrap: nowrap;
  color: hsl(0 0% 100%);
  border-radius: 1rem;
  background: hsl(0 0% 6%);
  justify-content: center;
  box-shadow: 0 1px hsl(0 0% 100% / 0.25) inset;
}

.code:hover {
  cursor: -webkit-grab;
  cursor: grab;
}

.digit {
  display: flex;
  height: 100%;
  padding: 5.5rem 1rem;
}

.digit:focus-visible {
  outline-color: hsl(0 0% 50% / 0.25);
  outline-offset: 1rem;
}

.digit span {
  scale: calc(var(--active, 0) + 0.5);
  filter: blur(calc((1 - var(--active, 0)) * 1rem));
  transition: scale calc(((1 - var(--active, 0)) + 0.2) * 1s), filter calc(((1 - var(--active, 0)) + 0.2) * 1s);
}

ul {
  padding: 0;
  margin: 0;
}

.digit:first-of-type {
  padding-left: 5rem;
}
.digit:last-of-type {
  padding-right: 5rem;
}

:root {
  --lerp-0: 1; /* === sin(90deg) */
  --lerp-1: calc(sin(50deg));
  --lerp-2: calc(sin(45deg));
  --lerp-3: calc(sin(35deg));
  --lerp-4: calc(sin(25deg));
  --lerp-5: calc(sin(15deg));
}

.digit:is(:hover, :focus-visible) {
  --active: var(--lerp-0);
}
.digit:is(:hover, :focus-visible) + .digit,
.digit:has(+ .digit:is(:hover, :focus-visible)) {
  --active: var(--lerp-1);
}
.digit:is(:hover, :focus-visible) + .digit + .digit,
.digit:has(+ .digit + .digit:is(:hover, :focus-visible)) {
  --active: var(--lerp-2);
}
.digit:is(:hover, :focus-visible) + .digit + .digit + .digit,
.digit:has(+ .digit + .digit + .digit:is(:hover, :focus-visible)) {
  --active: var(--lerp-3);
}
.digit:is(:hover, :focus-visible) + .digit + .digit + .digit + .digit,
.digit:has(+ .digit + .digit + .digit + .digit:is(:hover, :focus-visible)) {
  --active: var(--lerp-4);
}
.digit:is(:hover, :focus-visible) + .digit + .digit + .digit + .digit + .digit,
.digit:has(+ .digit + .digit + .digit + .digit + .digit:is(:hover, :focus-visible)) {
  --active: var(--lerp-5);
}

Make the secret code revealer interactive by using CSS transitions and hover/focus effects. Define styles for the digits within the list items to change their appearance when hovered over or focused on. Utilize CSS variables and calculations to create a sliding effect that reveals the digits one by one as they are interacted with.

That’s all! hopefully, you have successfully created Reveal Secret Code Using CSS. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

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.