Bold brushstrokes, dappled light, and impasto shadows — the CSS design language of Monet and Renoir, brought to the browser.
Six pigments lifted from the Impressionist palette — warm orange, canvas cream, vermillion red, deep blue, turquoise green, and golden light.
Impressionist gradient combinations
Every component is textured, warm, and layered — impasto shadows, brushstroke reveals, and painterly gradients throughout.
Primary — Dancing Light hover + Impasto Depression press
Outline variants — warm canvas feel
Size variants
Four named interaction patterns from the aiRules spec — click each rule to switch, then interact with the live demo to feel the difference.
The rules that separate authentic impressionist oil from imitation. Follow the canvas, respect the pigment, and let the light breathe.
Five core techniques from the 19th-century French Impressionists, translated into CSS properties that any browser can render.
multiple radial-gradient overlays simulate sunlight filtering through leaves — scattered circles of rgba gold at 5-10% opacity.
radial-gradient(circle 80px at X% Y%, rgba(245,216,138,0.08) 0%, transparent 100%)repeating-linear-gradient at 25-40deg angles with 0.02 opacity color stops creates visible directionality on every surface.
repeating-linear-gradient(25deg, transparent, transparent 15px, rgba(232,168,124,0.02) 15px, transparent 16px)Layered box-shadow with a solid color base layer plus a blurred spread layer simulates the physical volume of thick paint.
0 4px 0 #c0392b, 0 6px 16px rgba(232,168,124,0.30)Warm canvas cream #f5f0e1 as base. Crosshatch repeating-linear-gradient at 0deg and 90deg for woven texture, opacity 4%.
background: #f5f0e1 + crosshatch repeating-linear-gradientWarm orange, vermillion, gold, deep blue, turquoise — five pigments in dynamic tension, each with a defined CSS role.
#e8a87c, #c0392b, #f5d88a, #2c3e50, #1abc9c油画印象派风格汲取19世纪法国印象派绘画的精髓，强调光影变化和色彩的即兴表达。