Design playground

Tune the Google wordmark.

Each slider produces a clearly visible change. Drag, tilt, bounce, hue-shift. Hit a preset to jump to a vibe. Copy the CSS when you find a winner.

Presets
A

Layout

size, weight, letter spacing
144px
From tiny favicon to billboard-large.
500
Hairline at 100 → industrial at 900.
0px
Negative cramps; positive spreads — try 40+ for editorial.
0°
Pitches the whole wordmark forward / back.
●

Color

hue, saturation
0°
Spin the entire color wheel. ±180° flips to complementary.
100%
0 = grayscale. 200 = neon. 100 = original.
↑

Motion

bounce, sway
0px
Each letter lifts by this much in the wave.
1200ms
Lower = frantic. Higher = stately.
0°
Each letter rotates a different amount as it bounces.
google-logo.css