We all stare at the keyboard every day, might as well make some art out of the thing. Gallery of Art.


How to use Color a Keyboard

1. Click a key part

(Tab 1 below)

2. Pick a color

(Tab 1 below)

3. Mouseover a key


Non-letter keys follow uppecase.
Save work with a computer system utility. Post pictures on your social media sites.


English

Russian


~

`

!

1

@

2

#

3

$

4

%

5

^

6

&

7

*

8

(

9

)

0

_

-

+

=

Backspace

Tab

Q

q

W

w

E

e

R

r

T

t

Y

y

U

u

I

i

O

o

P

p

{

[

}

]

|

\

Caps Lock

A

a

S

s

D

d

F

f

G

g

H

h

J

j

K

k

L

l

:

;

"

'

Enter

Shift

Z

z

X

x

C

c

V

v

B

b

N

n

M

m

<

,

>

.

?

/

Shift

Spacebar


Key Parts







Pick a color

Current







Enter Your Own
ex: Red, Blue, LightGoldenrodYellow...

Gradient Colors




Must set Gardient Style under Tab 2



1. Set Gradient
Colors

(Tab 1)

2. Set Gradient
Style

(Here)

3. Click
Background or
Main BG

(Tab 1)

4.





Gradient Style

Click square to set

None

Top

Side

Diag 1

Diag 2

Radial

Funky 1

Funky 2

No real difference for the Funky Shapes and the non-letter Keys


Gradient Blur

Not for Funky







Sets the "see-through" of an element

"0" is totally invisible, and "1" is "all there"
Will affect the keys Background, *Box Shadow, and Main BG

1. Choose part to
    be affected

(Tab 1)

2. Set color  

    (Tab 1)

3. Set Opacity level

    (Here)

4.















Use computer's keyboard arrows for easier navigation




Fun thing !

Box shadow will affect the entire key !

Square Keys


Round Keys

Not the usual typewriter keyboard,
as those had the non-letter keys way out to the sides.


1. Turn on "Spin" 2. Mouseover any key, or use the selections below to rotate all of the keys at once.



Set Degree Nudge it

Free Spin.

Mouseover "Cats & Dogs >>"



Current position:

0

°

180°

0°

270°

Cats & Dogs >>

90°

1. Turn Box Shadow "on" at Tab 1
2. Change direction here
3. Click a direction
4. Mix-it-up


Skew

1. Turn on skew

2. Select direction



Left

Right

Up

Down

None


Scale - Big or little

1. Turn on scale

2. Select size







Animation
or what CSS calls "Transition."
The speed of making the change.
Transition not working on background colors for some browsers.



Saving your work

Screen capture with a
system utility:

Apple
Shift Command 4

Windows
Snipping Tool