CSS Challenge: Recreate this Gritty "Game UI" Login Form (Button & Input Borders) Body:

HTML & CSS
1

Hey everyone,

I’m currently working on a dark, gritty UI for a gaming project and I’m trying to nail a very specific, worn-out look. I thought recreating these elements would make a fantastic challenge for the CSS wizards here on SitePoint!

Here is the target screenshot of the login screen I am trying to match:

WhatsApp Image 2026-08-17 at 13.15.59
WhatsApp Image 2026-08-17 at 13.15.59900×1600 235 KB

I am specifically struggling to perfectly recreate the borders of two elements on this screen:

1. The Login Button This is far from a standard web button. A simple border: 1px solid cyan just doesn’t cut it.

  • It has an uneven, eroded “grunge” texture.

  • The cyan color isn’t perfectly solid; it has variations, fading out in some spots and bleeding inwards like scratched, oxidized metal.

2. The Input Field (“E-Mail-Adresse”) The input field has a different, but equally tricky border style:

  • The border is not constant in thickness or opacity. It acts like a fading gradient—slightly more present and metallic at the top/left, and fading almost into nothingness at the bottom right.

  • It needs to house an icon seamlessly on the left.

The Challenge: Recreate both of these elements (the input field and the login button) as closely as possible to the original screenshot using HTML and CSS.

The Rules:

  1. No raster images (PNG, JPG, WebP) allowed for the borders, textures, or noise. No cheating with a 9-slice background image! :wink:

  2. Pure CSS is great, but inline SVG filters (like feTurbulence, feDisplacementMap) and CSS masks (mask-image, mask-composite) are absolutely welcome and probably the best way to achieve this.

  3. JavaScript is fully allowed if you want to use it to generate the noise, handle interactions, or create ripple effects.

  4. The elements need to be responsive (fluid width).

I’ve been experimenting with feDisplacementMap for the button edges and mask-composite for the input border fading, but I’d love to see how the community tackles this combination.

Who can build the most authentic, gritty login form? Drop your CodePens or JSFiddles below!

Cheers

1 Like
2
  1. Why would you not just use an image for the button or input background?
  2. If you’re trying to recreate it… why not just…look at how it’s done? You’ve got it already there in front of you. Look at their source code? You have a working example.
3

For which read, “I thought someone on SitePoint could do this for me.”

3 Likes
4

To clarify: The image I posted isn’t from a live website with a web source code—it’s a concept mockup generated entirely by AI. There is no website or CSS source code behind it to inspect, which is why I was trying to figure out how to rebuild it from scratch.

5

Fair point! But honestly, isn’t figuring out complex, gritty UI details together what a developer community is for? I enjoy experimenting with filters and masks, but sometimes you hit a wall and want to see how others approach it. It’s less ‘do it for me’ and more 'let’s see if pure CSS can actually pull this off.

1 Like
6

I’m with Gandalf on this — alarm bells ring. I think it would have come across less like that had you have posted your JSFiddle or Codepen.

So maybe you can share what you have done to get the ball rolling? Personally I have never played with feDisplacementMap or composite. It sounds interesting.

3 Likes
7

Ah, I see the misunderstanding! My bad. I didn’t start with a CodePen because I literally only had an AI-generated design mockup and wanted to figure out how to approach coding it from scratch.

Since then, I’ve actually been experimenting with feTurbulence, feDisplacementMap, and CSS masks to tackle the eroded border. It’s definitely tricky, which is why I was curious how others would approach it!

8

Maybe it’s me, but I’d go the easy route. Use a gradient background behind a background with transparency.

Quick and dirty and not exactly what you’re looking for, but the concept is there…

1 Like
9

The gritty game UI style really depends on the small details around the inputs and buttons. I like the rough, high-contrast borders because they make the form feel more like an in-game interface rather than a standard web login. If you’re building something inspired by gaming, you could also take cues from beta-testing interfaces, where clear buttons and simple status information help users navigate experimental features.