Amazon Alexa Echo Dot in CSS, HTML and JS

In this article our goal is to create an Amazon Alexa Echo Dot in CSS, HTML and JS.

You can see the full code on Codepen and feel free to experiment with it.

CSS

The main things to highlight are the use of filter: drop-shadow, radial-gradient, and conic-gradient.. those were very useful for achieving the end result.

Here is the CSS I used to create the light.

.light-ring {
  width: 694px;
  height: 694px;
  border-radius: 50%;
  background: conic-gradient(from 180deg, #fff, #4C90FD, #A7C6FE, #508DFE, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 10px 30px rgba(255, 255, 255, 0.5));
  box-shadow: 0 3px 1px 0px rgba(255,255,255,0.45) inset;
}

For the buttons I used a combination of gradients:-

.btn {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #1f1f1f;
  position: absolute;
  box-shadow: 0 2px 1px 0px rgba(255,255,255,0.2) inset;
  filter: drop-shadow(0 2px 1px rgba(255, 255, 255, 0.2));

  &-volume-up {
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    background:
      radial-gradient(ellipse at center, rgba(40,58,71,0.5) 0%,
      rgba(0,0,0,0) 100%), linear-gradient(to bottom,
      rgba(67,85,103,0.1) 0%,rgba(76,95,111,0) 100%);
  }
}

JS

I wanted to ensure I kept the code DRY so rather than creating 80 vent divs and all the accompanying CSS which would lead to a lot of code bloat I decided to use some JS instead here.

This was to duplicate the vents:-

let vent = document.querySelector('.vent');

[...Array(79)].forEach(_ => vent.parentNode.insertBefore(vent.cloneNode(true), vent));

I also used JS to rotate and position each vent incrementally, although similar could be achieved with a css mixin.

Final Result

If you found this post useful please share it 🤝

About the Author

Simon is a freelance web designer.

Top comments (11)

Pavel Gurkov • Mar 11 '21

At first I thought, 'whoa! Such a lively image generated with a handful of CSS and JS? Nice!'

Then I looked at the CSS and saw embedded image BLOBs.

Simon • Mar 11 '21

Yes, for the noise grain effect. I may look at that again, but base64 images seemed like the best way for that effect. Do you have a better suggestion for that?

Pavel Gurkov • Mar 11 '21

Ah, no, no. Basically I was just wondering how much of it is generated and how much comes from the BLOB. I'm a total idiot regarding frontend, so I don't have much to propose unfortunately. If that's only for the grain effect, that's still impressive!

Now I wonder if you could emulate a realistic grain effect. I bet you could, but I have no idea how complex would it be...

Simon • Mar 11 '21 • Edited

Yeah it does seem a bit of a get-out on my part to use a bg image at all even if just for that effect, it does spoil the otherwise quite small css. I pondered using some divs with random pixels in. I did a bit of research about noise grain effects and there seems to be no effective way to create a noise effect cleanly in css even in 2021.

Thanks for the feedback!

Pavel Gurkov • Mar 11 '21

Oh I see. That’s a pity.

Nevertheless, looks really cool :)

Conner Ow • Mar 11 '21

I'm not really skilled in SVG, but I think I've seen people use SVG masking to make a noisy effect.

Simon • Mar 11 '21

Thank you, I will look into that.

Minhazur Rahman Ratul • Mar 12 '21

Cool!

Conrad Klek • Mar 11 '21 • Edited

Super cool! Does [...array(79)] create an array of length 79? Also, I’ve been using createElement and appendChild - how does that differ from clone node?