How to make this illumination effect with CSS

You can use transparent text with gradient background. I used background-attachment: fixed and a CSS variable to control background position.

You can increase the background-size (500px in this example) to increase transition smoothing.

const e = document.getElementsByClassName('scan')[0];
const hidden = document.getElementsByClassName('hidden')[0];

document.onmousemove = function(event) {
  e.style.left = `${event.clientX}px`; //               ↓ background width (500px) / 2
  hidden.style.setProperty("--pos", `${event.clientX - 250}px`);
};
* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  display: flex;
}

.banner {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-grow: 1;
  flex-direction: row;
  align-items: center;
  background-color: #031321;
}

.banner .scan {
  width: 7px;
  height: 80%;
  position: absolute;
  left: 30px;
  z-index: 3;
  transition: left 50ms ease-out 0s;
  border-radius: 15px;
  background-color: #fff;
  box-shadow: 0 0 15px 5px #fff, /* inner white */
  0 0 35px 15px #008cff, /* inner blue */
  0 0 350px 20px #0ff;
  /* outer cyan */
}

.banner .description {
  width: 100%;
  color: white;
  font-size: 3em;
  text-align: center;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.hidden {
  background: radial-gradient(dodgerblue 10%, #031321 50%) var(--pos) 50% / 500px 500px no-repeat fixed;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
<div class="banner">
  <div class="scan"></div>
  <div class="description">
    Just <span class="hidden">hidden</span> something
  </div>
</div>

Here is another example with very long paragraph and multiple hidden text. We control both X and Y axis in here.

const hiddens = document.querySelectorAll('.hidden');

document.addEventListener("mousemove", e => {
  hiddens.forEach(p => {
    //                                            ↓ background width (400px) / 2
    p.style.setProperty("--posX", `${e.clientX - 200}px`);
    p.style.setProperty("--posY", `${e.clientY - 200}px`);
  });
});
html,
body {
  width: 100%;
  overflow-x: hidden;
}

body {
  background: #031321;
  color: #fff;
  font-size: 3rem;
  line-height: 1.5;
  padding: 20px;
  box-sizing: border-box;
}

.hidden {
  background: radial-gradient(dodgerblue 10%, #031321 50%) var(--posX) var(--posY) / 400px 400px no-repeat fixed;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
Lorem ipsum dolor sit amet, <span class="hidden">consectetur</span> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <span class="hidden">Excepteur sint</span> occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum
dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea <span class="hidden">commodo</span> consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.

Here is an idea using transformation to have better performance

document.onmousemove = function(event){
  document.body.style.setProperty("--p", `${event.clientX}px`);
};
body{
    margin: 0;
    overflow:hidden;
}

.banner{
    height: 100vh;
    display: flex;
    align-items: center;
    background-color: #031321;
}

.banner::before{
    content:"";
    width: 7px;
    height: 80%;
    position: absolute;
    left: 0;
    transform:translateX(var(--p,30px));
    z-index: 3;
    transition: transform 50ms ease-out 0s;
    border-radius: 15px;
    background-color: #fff;
    box-shadow:
        0 0 15px 5px #fff,  /* inner white */
        0 0 35px 15px #008cff, /* inner blue */
        0 0 350px 20px #0ff; /* outer cyan */
}

.banner .description{
    color: white;
    font-size: 3em;
    text-align: center;
    width:100%;

    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow:hidden;
    position:relative;
}
.banner .description::before {
   content:"";
   position:absolute;
   top:0;
   right:0;
   bottom:0;
   width:200%;
   background:linear-gradient(to right,#031321 40%,transparent,#031321 60%);
   transform:translateX(var(--p,0px));
}
<div class="banner">
    <div class="description">
        Just trying something
    </div>
</div>

To apply it to only few words, you play with z-index

document.onmousemove = function(event){
  document.body.style.setProperty("--p", `${event.clientX}px`);
};
body{
    margin: 0;
    overflow:hidden;
}

.banner{
    height: 100vh;
    display: flex;
    align-items: center;
    background-color: #031321;
}

.banner::before{
    content:"";
    width: 7px;
    height: 80%;
    position: absolute;
    left: 0;
    transform:translateX(var(--p,30px));
    z-index: 3;
    transition: transform 50ms ease-out 0s;
    border-radius: 15px;
    background-color: #fff;
    box-shadow:
        0 0 15px 5px #fff,  /* inner white */
        0 0 35px 15px #008cff, /* inner blue */
        0 0 350px 20px #0ff; /* outer cyan */
}

.banner .description{
    color: white;
    font-size: 3em;
    text-align: center;
    width:100%;

    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow:hidden;
    position:relative;
    z-index:0;
}
.banner .description::before {
   content:"";
   position:absolute;
   z-index:-1;
   top:0;
   right:0;
   bottom:0;
   width:200%;
   background:linear-gradient(to right,#031321 40%,transparent,#031321 60%);
   transform:translateX(var(--p,0px));
}
.banner .description > span {
  position:relative;
  z-index:-2;
  color:lightblue;
  font-weight:bold;
}
<div class="banner">
    <div class="description">
        Just <span>trying</span> something <span>cool</span>
    </div>
</div>

Another idea to make it working with any background in case you want transparency:

document.onmousemove = function(event){
  document.body.style.setProperty("--p", `${event.clientX}px`);
};
body{
    margin: 0;
    overflow:hidden;
}

.banner{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content:center;
    color: white;
    font-size: 3em;
    background: url(https://picsum.photos/id/1018/800/800) center/cover;
    position:relative;
    z-index:0;

    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.banner::before{
    content:"";
    width: 7px;
    height: 80%;
    position: absolute;
    left: 0;
    transform:translateX(var(--p,30px));
    z-index: 3;
    transition: transform 50ms ease-out 0s;
    border-radius: 15px;
    background-color: #fff;
    box-shadow:
        0 0 15px 5px #fff,  /* inner white */
        0 0 35px 15px #008cff, /* inner blue */
        0 0 350px 20px #0ff; /* outer cyan */
}

.banner::after {
   content:"";
   position:absolute;
   z-index:-1;
   top:0;
   right:0;
   bottom:0;
   left:0;
   background:inherit;
   -webkit-mask:
      linear-gradient(to right,#fff 45%,transparent,#fff 55%)
      right calc(-1*var(--p,0px)) top 0/200% 100% no-repeat;
}
.banner  > span {
  position:relative;
  z-index:-2;
  color:red;
  font-weight:bold;
}
<div class="banner">
      Just <span>trying</span> something <span>cool</span>
</div>

Tags:

Html

Css

Related

Undefined class StorageReference when using Firebase Storage SQLAlchemy accessing column types from query results Pipfile Hash Creation Overloading of hidden friends by differences only in (mutually exclusive) requires-clauses: legal or an ODR-violation? Should Domain Model Classes always depend on primitives? [karma-server]: TypeError: Cannot read property 'range' of undefined - Angular Unit Testing in CI environment 'setter for mainClassName: String' is deprecated. Deprecated in Java Predefined type 'System.Runtime.CompilerServices.IsExternalInit' is not defined or imported Faster way for extracting and combining bits from UINT16 to UINT8 Regex to match a string like ababba etc Place two multiline TextViews with wrap_content width on both sides of the parent view org.hibernate.PropertyAccessException: Could not set field value [STRING] value by reflection for String

Recent Posts