PRO Animated Hero Section and Glassmorphism Design

Welcome to the top. If you are here, it means you are no longer interested in the basics. This template is designed for those who want to create a visual impact that users will remember.

We will use 3D typography transformations and Glassmorphism for the content container. The highlight of this module is utilizing dynamic SVG patterns directly within the CSS code, ensuring lightning-fast loading speeds. Get ready, this is where CSS turns into true art.

EXAMPLE

                        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pro design</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<section class="hero">
    <h1 class="title">PRO DESIGN</h1>
    
    <div class="glass">
        <p>Welcome to the future of web design. 
        This component utilizes advanced CSS animations and a frosted glass effect.</p>
    </div>
</section>
</body>
</html>
        
                    

                        .hero {
    --title-fill: #06a3fe;
    --title-stroke: #0056b3;
    --glow-a: #87d5fe;
    --glow-b: #06a3fe;
    position: relative;
    display: grid;
    place-items: center;
    min-height: 25vh;
    padding: 2rem;
    background: #f0f2f5;
    color: black;
    overflow: hidden;
    text-align: center;
    border-radius: 20px;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.15;
    background-repeat: no-repeat;
    background-position: center;
    background-size: clamp(260px, 58vmin, 560px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%2306a3fe'/%3E%3Cstop offset='100%25' stop-color='%230056b3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='90' cy='110' r='34' fill='none' stroke='%230056b3' stroke-width='6'/%3E%3Ccircle cx='310' cy='90' r='22' fill='url(%23g)' stroke='%230056b3' stroke-width='4'/%3E%3Ccircle cx='320' cy='300' r='34' fill='none' stroke='%230056b3' stroke-width='6'/%3E%3Ccircle cx='100' cy='300' r='18' fill='%2306a3fe' stroke='%230056b3' stroke-width='4'/%3E%3Cpolygon points='200,40 230,92 170,92' fill='none' stroke='%230056b3' stroke-width='5'/%3E%3Cpolygon points='240,240 290,320 190,320' fill='url(%23g)' stroke='%230056b3' stroke-width='5' opacity='0.9'/%3E%3Cpath d='M40 360 L120 280 M280 60 L360 -20' stroke='%230056b3' stroke-width='6' stroke-linecap='round' opacity='0.7'/%3E%3C/svg%3E");
    animation: float 16s ease-in-out infinite alternate;
}

.hero .title {
    position: relative;
    z-index: 2;
    font-family: "Archivo Black", sans-serif;
    font-size: clamp(2rem, 8vh, 4rem);
    color: var(--title-fill);
    -webkit-text-stroke: 0.045em var(--title-stroke);
    animation: wave 4.8s ease-in-out infinite;
    transform-style: preserve-3d;
}

/* Glass UI section */
.glass {
    margin-top: 2rem;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    padding: 3rem;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

@keyframes wave {
    0%, 100% { transform: perspective(900px) rotateX(0deg); }
    50% { transform: perspective(900px) rotateX(10deg); }
}

@keyframes float {
    0% { transform: translateY(0); }
    100% { transform: translateY(-15px); }
}
        
                    

RESULT

PRO Level: Animated Hero Section and Glass UI

Vadnica.org

Links

Support