Learn how to create eye-catching gradient borders with CSS. Elevate your web design game with this step-by-step tutorial. Get started today!
Table of Contents
CSS Gradient Borders add depth and style to your web elements. Whether you want to create striking buttons, elegant dividers, or captivating images, gradient borders can take your design to the next level. In this guide, we'll walk you through the steps to master this technique.
Join My Telegram Channel to Download the Project Source Code: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file.
After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Let's break down each part of the code:
1. <!DOCTYPE html>: This is the document type declaration and indicates that the document is an HTML5 document.
2. <html lang="en">: This is the opening tag of the HTML document and sets the document's language to English ("en").
3. <head>: This is the head section of the HTML document. It contains metadata and information about the web page but is not visible on the actual page itself.
- <meta charset="UTF-8">: This meta tag specifies the character encoding of the document as UTF-8, which is a widely used character encoding for displaying text in multiple languages.
- <meta http-equiv="X-UA-Compatible" content="IE=edge">: This meta tag is used to set the compatibility mode for Internet Explorer browsers. It instructs IE to use the latest rendering engine available (i.e., "edge").
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: This meta tag is often used for responsive web design. It sets the viewport width to the device width, and the initial zoom scale to 1.0, which ensures that the web page will adapt to the user's device screen size.
- <title>CSS Gradient Borders</title>: This is the title of the web page, which is displayed in the browser's title bar or tab. It's what users see when they bookmark the page.
- <link rel="stylesheet" href="styles.css">: This line links an external CSS (Cascading Style Sheets) file named "styles.css" to the HTML document. The CSS file is used to define the styling and layout of the web page's content.
4. <body>: This is the body section of the HTML document where the visible content of the web page is defined.
5. Inside the <body>, there are three <div> elements with different classes:
- <div class="headshot headshot-1"></div>
- <div class="headshot headshot-2"></div>
- <div class="headshot headshot-3"></div>
6. These <div> elements appear to be placeholders or containers for displaying content like images or other elements. They each have a class attribute that allows them to be styled using the "styles.css" file linked in the <head>.
This is the basic structure using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
body {
display: flex;
justify-content: space-around;
align-content: center;
align-items: center;
flex-wrap: wrap;
min-height: 100vh;
background-image: linear-gradient(#111, #050505);
}
.headshot {
flex-shrink: 0;
margin: 20px;
height: calc(150px + 6vw);
width: calc(150px + 6vw);
border: calc(8px + 0.2vw) solid transparent;
background-origin: border-box;
background-clip: content-box, border-box;
background-size: cover;
box-sizing: border-box;
box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.5);
}
.headshot-1 {
border-radius: 30%;
background-image: url(https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=350&h=350&fit=crop&crop=faces),
linear-gradient(to top, #0fd850, #f9f047);
}
.headshot-2 {
border-radius: 50%;
background-image: url(https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=350&h=350&fit=crop&crop=faces),
linear-gradient(to bottom right, #FF3CAC, #562B7C, #2B86C5);
}
.headshot-3 {
border-radius: 50% 10%;
background-image: url(https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=350&h=350&fit=crop&crop=faces),
linear-gradient(to bottom left, #f83600, #f9d423);
} Final Output:
Conclusion:
In conclusion, CSS Gradient Borders can transform your web design by adding depth and creativity. With the knowledge gained in this tutorial, you can create stunning gradient borders to elevate your projects. Experiment, customize, and unleash your creativity to captivate your audience. Start enhancing your designs today!
Code by: Dejan Babić
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
