Designing a Gradient Search Input with HTML and CSS

Rayen

In the vast landscape of web design, small details can make a significant impact. In this tutorial, we'll explore the creation of a stylish gradient search input using HTML and CSS. This simple yet effective design element can add a touch of vibrancy and modernity to your website. Let's dive into the steps to craft a gradient-infused search input.




Step 1: HTML Markup:

Begin by setting up the HTML structure for your search input. Create a form element with an input field for users to enter their search queries.
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search input </title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="shadow"></div>

        <div class="btn">
            <i class="fa-solid fa-magnifying-glass"></i>
        </div>
        <input type="search" name="text" id="text" class="search" placeholder="search @rayen-code">
    </div>
</body>
</html>

Step 2: Styling with CSS:

Craft a dedicated CSS file (style.css) to style the gradient search input.
/*-------------------- CSS --------------------*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #212121;
}

.container {
    position: relative;
    width: 230px;
    background: #ffffffa9;
    padding: 10px 15px;
    border-radius: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    transform: rotateX(15deg) rotateY(-20deg);

}

.shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    background: conic-gradient(#9ca3ed 0% 25%,
    #aa83b8 26% 50%,
    #8fbaef 51% 75%,
    #82bba1 76% 100%);
    z-index: -1;
    left: 0;
    bottom: 0;

    filter: blur(30px);
}

.btn {
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    transition: 0.3s;
}
.btn:hover {
    background: #ffffff69;
}

.search {
    width: 100%;
    border-radius: 20px;
    outline: none;
    border: 0;
    padding: 4px 15px;
}

Personalize the gradient search input by experimenting with different color combinations, adjusting the input size, or adding additional styles to the search button.

0 Comments