Codepen Challenge Aug. '25: Light & Shadow
Hey there! I'm learning (and trying my best) to be a better developer with each passing day through practice and writing. Pleasure to meet you!
I know this has been a while in the making, but I figured I’d write down everything I’ve done for challenges: it’s a good way to keep myself accountable.
I’ve been on Codepen for a while, but I’ve never participated in a challenge, mainly out of fear.
I’d see other people’s entries and keep talking myself out of it:
“Well, their projects look so much better than mine…”
“There’s no way I can compete with those guys…”
But once I saw this challenge, I finally decided to stop comparing myself with other entrants and decided to hop in with a new rationale:
“How am I going to improve if I don’t take the opportunities to do so?”
“A consistent practice helps me learn something new every day.”
“This could be fun!”
And after taking the challenge, I can say I’m glad I took the leap. It helped spark my creativity and helped me become a more resourceful coder(i.e., looking up what I didn’t know how to do or just forgot). And most of all, it made me more confident. I knew there was a chance my work would be viewed by other users, but that didn’t matter to me. When you start doing the work for no one else’s eyes but yours, it’s a lot easier to get started and publish.
And it seemed to work out to. Some of my work was liked, and some people even followed me! So I guess I’m on the right track!
Could I say I’m an expert? Not really, but I’m doing better than the previous version of me and that’s what matters.
Now with my spiel out of the way, let’s get to the challenge!
What are CodePen challenges?
If you’re not familiar with the CodePen challenge, each month CodePen hosts a challenge, with an overarching theme for that month. The theme is then broken down with a related challenge for each week. A new one starts on the first Monday of each month.
Every week, they provide a template to get you started(which you could either bounce off or start from scratch), as well as ideas and resources to get you going.
The next week’s challenge is posted on the following Monday.
Even if you missed a challenge when it first went live, you’re good. You can view the archive and still tag your projects if you wanna work on your own time.
Week 1: Shine
In the spirit of full transparency…I didn’t do this one. I only really got into the challenge halfway through. 😅
Week 2: Shadow
Full transparency again…I started, but didn’t get to finish before they moved on to next week…I’ll get back to it. 😜
Week 3: Reflection
Okay, so this was the first project I was able to complete in earnest. The goal was to make a pen that had a reflection effect.
I tried getting all fancy and then realized…simple is much better, sis.
So, I did a reflection of the word “refelxio”. Take a guess what it’s Latin for. 😜
I gave the text a gradient, then reflected it with the following CSS:
Gradient Text
.refl-2 {
background-image: -webkit-radial-gradient(
circle,
rgba(238, 174, 202, 1) 0%,
rgba(148, 187, 233, 1) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
Reflection
And here’s how to make that text reflect:
-webkit-box-reflect: below 5px
linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
Then I used a break and had them overlap each other!
And here is the result:
https://codepen.io/juanita-washington/pen/MYaQRYr
Week 4: Light & Shadow
For this last week, you got to play with light and shadow however you liked. I went with a spotlight or flashlight effect that revealed a hidden message. I found a very easy to follow tutorial on how to accomplish this effect (see below).
https://codepen.io/juanita-washington/pen/ByoOzJY
Wrap-up
To be fair, I didn’t know how to do either of these before this challenge, but I was able to find the resources to help me get it done! This just goes to show you that there’s always something to learn and resourcefulness is nothing to be ashamed of!
