Art Nouveau Vine Border
A botanical border frame using CSS gradients and border-image to evoke Mucha's decorative panel edges with emerald vine tendrils.
.vine-border {
border: 2px solid #2D8B5C;
border-radius: 18px;
background-image:
radial-gradient(ellipse 60px 8px at 50% 0%, #2D8B5C 0%, transparent 70%),
radial-gradient(ellipse 60px 8px at 50% 100%, #2D8B5C 0%, transparent 70%),
radial-gradient(ellipse 8px 60px at 0% 50%, #2D8B5C 0%, transparent 70%),
radial-gradient(ellipse 8px 60px at 100% 50%, #2D8B5C 0%, transparent 70%);
background-repeat: no-repeat;
background-size: 120px 12px, 120px 12px, 12px 120px, 12px 120px;
background-position: center top, center bottom, left center, right center;
}
Saffron Sunburst Radial
A radial sunburst pattern behind hero elements, evoking solar energy and photovoltaic panel highlights.
.sunburst {
background:
repeating-conic-gradient(
from 0deg,
rgba(255, 194, 51, 0.12) 0deg 10deg,
transparent 10deg 20deg
);
border-radius: 50%;
position: absolute;
inset: -20%;
z-index: 0;
pointer-events: none;
}
Paper-Grain Poster Texture
A subtle noise overlay that gives surfaces the tactile feel of letterpress poster stock.
.poster-grain {
position: relative;
}
.poster-grain::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
pointer-events: none;
mix-blend-mode: overlay;
}