Don't worry, we're preparing a new challenge for you.
Keep an eye on our Discord for announcements!
Previous Challenges
Card Replica
Replicate the hiring card's layout and visual style as closely as possible. The goal is to capture the overall structure, depth, and aesthetic of the original design. Use CSS or Tailwind & focus on achieving that soft, glassy, modern UI feel.
Button Mastery 13
This challenge is all about depth, light, and that ultra-satisfying glossy finish. Your goal is to replicate this prismatic “Get Started” button with CSS or Tailwind as closely as possible. Level it up with micro-interactions like shimmer on hover, a gentle press effect, animated light sweep, or a glow that intensifies when focused.
404 Page
Create a 404 error page that helps users understand they’re lost without making them feel stupid, frustrated, or ready to close the tab. The page should clearly communicate that the content doesn’t exist while offering helpful actions like going home, searching, or retrying. Use CSS or Tailwind CSS and choose your own theme. Micro-interactions and subtle animations are highly encouraged to turn a dead end into a smooth detour.
Playing Card
Design a video game playing card. Think characters, abilities, items, power-ups... cards you'd expect in games like Pokemon or Slay the Spire. Choose a strong theme (fantasy, sci-fi, cyberpunk…), use clear hierarchy (title, stats, abilities), add rarity cues with colors, glows, or particles, and play with texture and depth. Keep it readable, interactive, and fully game-logic aware to create a card players would actually want to use.
Button Mastery 12
Your mission is to replicate Ammar's pebble stylized CTA button using CSS or Tailwind. Don't forget to add your own twist. What happens when it's pressed? Does it hover, glow or change colors? Get creative!
Gradient Panel Replica
Replicate this sleek glassmorphic card that lets users add extra requests to their plan. Focus on the frosted background, soft gradient glow, and the interactive counter. Don't forget to add special interactions!
Voice Assistant Orb
Design a glowing, animated sphere that reacts when you interact with an AI assistant. Picture an orb that glows, pulses, ripples, or breathes as it listens and responds. Make it dynamic, captivating, and uniquely yours! Use CSS or Tailwind.
Button Mastery 11
Your mission is to recreate Michael’s sleek button using CSS or Tailwind. Does it glow, ripple, or sink when pressed? Add your own twist!
Uiverse Ticket
Imagine Uiverse hosting the tech event of the year and you’re designing the tickets! Your mission is to create a digital entrance ticket for our fictional web development conference. Include essential info like event name, date, seat number, maybe even a QR code. Keep it static or spice it up with animations. Build using CSS or Tailwind.
Button Mastery 10
In this replica challenge, your mission is to recreate Camden's sophisticated, carbon-fiber textured button. Make it glow, pulse, or add any other special effect that enhances the button's neo-futuristic vibe.
Pixel Art Button
Remember Pac-Man, Super Mario, or Sonic? Dive into the pixel world of retro games and come back with your own pixel art–inspired button. Use CSS or Tailwind and don’t forget about special interactions or animations to score extra points. The more nostalgic and creative, the better!
Button Mastery 9
Bring Camden’s soft green button to life using CSS or Tailwind. The gradients, shadows, and inner glow are all part of the challenge, but the real creative magic is up to you. Make it special by adding some unique micro-interactions.
Button Mastery 8
Your mission is to replicate Talha's futuristic button using CSS or Tailwind. Don't forget to add your own twist. What happens when it's pressed? Does it hover, glow or cast a shadow? Show us what the future of buttons looks like!
Battery Widget Replica
Your task is to replicate Maxim's futuristic battery widget using CSS or Tailwind. Bring in your creativity and add some sleek interactions or animations to level up your final product.
Button Mastery 7
Calling on your finest CSS or Tailwind skills, we challenge you to replicate this glowing lightbulb button designed by Camden. Bring it to life with thoughtful interactions and micro-animations. Ready to light it up?
AI Input
Your task is to design a sleek and interactive AI input field where users can enter their prompts. The input can stand alone or be accompanied by a button. The goal is to create an intuitive and visually appealing input field that feels like it belongs in an AI-powered interface.
Button Mastery 6
How precisely can you replicate Voicu’s sleek, dark, skeuomorphic button? Using CSS or Tailwind, craft a visually striking and interactive version. Elevate the challenge by incorporating subtle animations, dynamic lighting effects, or smooth hover interactions to make the button feel even more tactile and immersive.
Button Mastery 5
In Button Mastery 5, we challenge you to replicate a button designed by Abu using CSS or Tailwind. Can you do this with true precision? Don't skip special interactions like focus or hover to make it unique!
Progress Bar
2025 has just begun, with the progress bar barely scratching 4%. Ready to start it off creatively? Design an original progress bar using CSS or Tailwind! (You can make it custom, it's not necessary to use the <progress> element.)
Button Mastery 4
Designed by Alvish, this button combines soft gradient edges with a retro pixelated look. Your task is to recreate it & add interactions like hover or focus states to earn extra points and make your design stand out!
Synthwave Challenge
This time, your mission is to design a button that embodies the retro-futuristic essence of the iconic synthwave style. Picture bold gradients, glowing edges, and electric colors straight out of the 80's! Use CSS or Tailwind to craft a functional and visually appealing button enhanced with special interactions.
Keyboard Button Replica
This time, we're challenging you to replicate Voicu's Bluetooth keyboard button, complete with a realistic blue LED light. Can you bring it to life using Tailwind or CSS? Don’t forget to add some unique interactions to make it special!
Voice Control Replica
In this challenge, your task is to replicate this minimalistic voice-activated AI card, designed by Yevhen, using CSS or Tailwind. Feel free to get creative with unique interactions!
Liquid Button
Your mission is to create a captivating button that mimics the smooth motion of a liquid. Whether it’s a button that drips, flows or melts, let your creativity take over! Don’t forget about special interactions to receive some additional points.
Game UI: Button
In this challenge, you will be creating a button for a game’s UI. Whether it's for a start menu, in-game actions, or any other function, focus on both aesthetics and purpose to enhance the gamer’s experience. The theme of the game is up to you. Consider aspects like animation and interaction to make your button stand out!
3D Graph Replica
In this challenge, you will be replicating Voicu's futuristic 3D Graph using CSS or Tailwind. Bring it to life by adding unique interactions to receive additional points.
Button Mastery 3
In this challenge, you will be replicating a button designed by Todels using CSS or Tailwind. Interactions like focus or hover will secure you additional points and make the final product more unique.
Search Bar Mastery
In this challenge, you will be using CSS or Tailwind to create a replica of a dark gradient search bar designed by Raafi G. Make sure to incorporate interesting interactions to bring the search bar to life!
Button Mastery 2
This time, your task is to prove your CSS or Tailwind skills by mimicking a button designed by Shubhajit. To make your final product stand out, don’t forget about interactions like a unique focus or hover.
Social Banner
Did you know Uiverse was on social media? Because we would love everyone to know, we are giving you a unique task. All of you are given the same predefined HTML structure for a card element. We challenge you to design the card as an eye-catching banner in the style of Uiverse.
Button Mastery
In this new type of challenge, the goal is to mimic the given design as closely as possible using CSS or Tailwind. For additional points, don't forget to incorporate interactions such as focus or hover. This time, the design is a colorful, shiny button designed by solya~.
Tooltip Challenge
In this challenge, your mission is to craft an eye-catching, informative tooltip. Aim to include interactions, such as having it pop out by hovering. Selected tooltips from this challenge will be published as normal posts under a new "Tooltip" category. You can use both CSS or Tailwind.
Button Frenzy: Tailwind Edition
In this challenge, your mission is to create a unique, interactive button using Tailwind. Utilize the power of Tailwind's utility-first classes to make your button not just look great, but also include interesting interactions on hover, focus, or click.
One <div> challenge
Create a design using just one div and your CSS mastery. This challenge tests your ability to craft astounding visuals from the simplest HTML element! Have fun and make sure you create something original!
Open-Source CSS Odyssey
In this unique challenge, you and all participants will be working with the same predefined HTML structure for a card element. Your objective is to demonstrate your creativity and expertise by styling the card in your own unique way without altering the HTML.
CSS from the future
In this CSS challenge, the task is to create a set of futuristic radio buttons that look like they belong in a high-tech, advanced interface. The challenge is to create a design that is both sleek and functional, with a focus on innovative, cutting-edge aesthetics.
CSS Game UI Challenge
Imagine you are playing a game and you have just reached a new level. What kind of visual notification would you like to see? Use your creativity to come up with a unique and fun level-up notification for a game.
CSS Space Challenge
Showcase your UI skills by creating a button inspired by the vastness of space. The best button will be selected by the community and will be featured on the homepage.
Leaderboard
| # | User | Points |
|---|
