## Sunlight Effect with Pure CSS

Sunlight Effect with Pure CSS

A small project creates a realistic beam of sunlight streaming through a window. The effect is built entirely with CSS, so no JavaScript is needed. The repository is hosted on GitHub: https://github.com/jackyzha0/sunlit.

The animation uses a rotating linear gradient and a mask-image. A keyframe rotates the gradient to simulate the sun’s movement. A simple snippet shows the core idea:

@keyframes sun-beam {
  from { transform: rotate(0deg); }
  to   { transform: rotate(20deg); }
}

.sun {
  width: 100%;
  height: 100vh;
  background: linear-gradient(90deg, rgba(255,255,200,0.4), transparent);
  mask-image: radial-gradient(circle at 10% 10%, white, transparent);
  animation: sun-beam 5s infinite alternate;
}

When the .sun element is placed over a window scene, the gradient creates a warm light patch that sweeps across the room. The pure‑CSS approach keeps the page lightweight and easy to customize. Adjust the colors, angles, or timing to match different times of day. This technique offers a quick way to add natural lighting effects without extra libraries.