Skip to main content

Design of the Abatron 803 calculator replicated in CSS

Posted on

Recently I came across the design of the Abatron 803, a calculator from 1975. I thought it looked really good, so I decided to recreate the design in HTML/CSS.

I only used fonts from Google Fonts, so the type is not an exact match, and I also simplified the design a bit.

The bars on top are made with gradients as part of the calculator background:

.calculator {
  background: linear-gradient(#C4C9C3, #C6C8C7),
          #C6C8C7 25%,
          #484939 27%,
          #87877B 30%,
          #87877B 32%,
          #E7E7DD 33%,
          #C6C8C7 33.5%,
          ..., /* Repeat */
          #C6C8C7 98.5%
  background-size: 100%, 100% 80px;
  background-position: 0 80px, top left;
  background-repeat: no-repeat;

The depth of the keys is also created with gradients:

.number {
  background: linear-gradient(90deg, #182629, #4B5556 80%);
  background-size: 100%;
  background-position: top left;


.number .key-content {
  background: radial-gradient(#3E4C4D, #38474A, #343E3F);
  background-size: 150% 350%;
  background-position: center center;

The full code can be viewed on CodePen.

Right now there's no functionality tied to it, since my main goal was to recreate a physical product in CSS. But I am planning on turning it into a functional calculator with JavaScript in the future.

Credit also has to go to the Avatron 903M design (based on the original Abatron calculator) by Keith Sereby on Dribbble, which inspired me to make a version of the Abatron 803 in CSS.

Hi! 👋🏻 I'm Sarah, an independent developer, designer and accessibility advocate, located in Oslo, Norway. You might have come across my photorealistic CSS drawings, my work around dataviz accessibility, or, a directory of learning resources and tools for creating more inclusive products. You can follow me on social media or through my newsletter or RSS feed.

💌 Have a freelance project for me or want to book me for a talk? Contact me through

If you like my work, consider:

Sign up for notifications and extra content

Subscribe to my newsletter to receive a notification when a new post goes live. I will also send occasional newsletter-only content about front-end development, accessibility and ethical/inclusive design.

You'll need to confirm your email address. Check your spam folder if you didn't receive the confirmation email.

Similar posts

View post archive