CSS Apple Watch

Simple pure CSS Apple Watch for mockups.

1) Choose sizes:

2) Choose colours:

Generated CSS

Image Sizes

Watch Size

38mm

42mm

Size (Width x Height in Pixels)

272 x340

312 x 390

HTML Examples

Apple Watch 42mm Silver

<div class="apple-watch-container">
    <div class="apple-watch">
        <div class="apple-watch__screen"></div>
    </div>
</div>
                        

Apple Watch 38mm Yellow Gold

<div class="apple-watch-container">
    <div class="apple-watch apple-watch--small apple-watch--yellow-gold">
        <div class="apple-watch__screen"></div>
    </div>
</div>
                        

Full CSS Class Reference

Container

apple-watch-container

Base

apple-watch

38mm Size

apple-watch--small

The default size is 42mm, when you don't use this modifier.

Colours

apple-watch--yellow-gold | apple-watch--rose-gold | apple-watch--space-black | apple-watch--stainless-steel | apple-watch--space-gray

The default colour is silver, when you don't use a modifier.

Screen

apple-watch__screen