Learn how to create stunning 3D gradient cards with dynamic hover effects using CSS. Our step-by-step guide makes it easy for beginners to master this impressive design technique.
Table of Contents
In the world of web design, creating visually stunning and engaging elements is essential to attracting and retaining visitors to your website. One way to achieve this is by incorporating 3D gradient card designs with dynamic hover effects using CSS. These designs add depth and dimension to your website, making it more interactive and visually appealing.
In this tutorial, we will guide you through the process of creating a 3D gradient card with dynamic hover using CSS. We will assume some familiarity with HTML and CSS but will provide step-by-step instructions and code snippets to make it easy for beginners to follow along.
By the end of this tutorial, you will have the skills and knowledge to create your own 3D gradient cards with dynamic hover effects using CSS.
Let's start making an amazing 3d gradient card with dynamic hover using HTML, and CSS step by step.
Join My Telegram Channel to Download the Project: 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.
Credit: Dannie Vinther
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our 3d gradient card.
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.
The first line, <!DOCTYPE html>, specifies the document type declaration as HTML.
The <html> element encloses the entire document, and the lang attribute sets the language of the document to English.
The <head> element contains metadata about the document such as the title, character encoding, and the viewport for responsive web design.
The title of the document is "3D Gradient Card" and is specified using the <title> element.
The stylesheet for the document is linked through the <link> element with the rel attribute set to "stylesheet". The first stylesheet link is to a CSS reset file from Twitter Bootstrap, while the second link is to a custom stylesheet named "styles.css".
The content of the web page is contained within the <body> element. It contains a <div> element with the class name "wrapper" which is a container element used for grouping and applying styles to multiple elements. Within the "wrapper" div is another <div> element with the class name "card".
The "card" div contains an <h1> element with the text "Cutout". The word "Cut" is enclosed within a <span> element with the class name "enclosed". The purpose of this markup is to apply styles to the enclosed text without affecting the rest of the heading text.
This is the basic structure of our 3d gradient card using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the card is in place, the next step is to add styling to the gradient card using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our 3d effect.
The first two selectors target the html and body elements and set their height to 100%.
The body selector then applies display: grid and place-items: center to center the contents of the body on the page. It also sets the background using three gradient layers: a linear-gradient, a radial-gradient, and another linear-gradient.
The .wrapper selector applies position: relative, perspective: 40em, and transform-style: preserve-3d to create a 3D space for the card to be positioned in. It also applies display: grid to the .card selector, which is positioned within the wrapper.
The .card selector sets the size and position of the card, applies a transform to create the 3D effect, and sets the background color, font size, and other styles. The .enclosed class targets the enclosed text within the card and applies additional styles, such as a black background and scaled-down size.
The .wrapper:before selector creates a border around the card using a pseudo-element, and sets its position and rotation to match the card.
Finally, the .wrapper:hover and .wrapper > div, .wrapper:before selectors apply transitions to animate the card and border on hover.
This will give our 3d gradient card an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
html,
body {
height: 100%;
}
body {
display: grid;
place-items: center;
background:
linear-gradient(to bottom right, #3C4BBD 15%, transparent),
radial-gradient(circle at 100% 0%, rgba(255,255,255,.2) 10%, transparent 20%) center center / 15px 15px,
linear-gradient(to bottom right, #3C4BBD, #57ADD8);
}
.wrapper {
position: relative;
perspective: 40em;
display: grid;
transform-style: preserve-3d;
}
.card {
grid-area: 1 / 1;
height: 200px;
width: 400px;
transform: translateX(10px) rotateY(25deg) rotateX(10deg);
background: rgba(249, 198, 26, 0.88);
display: flex;
justify-content: flex-start;
align-items: center;
padding: 30px;
color: #000;
text-transform: uppercase;
font-size: 60px;
font-weight: 900;
backface-visibility: hidden;
box-shadow: 0 10px 30px -3px rgba(0,0,0,.1);
}
h1 {
font-size: 60px;
font-weight: 900;
}
.card .enclosed {
background: #000;
line-height: 1;
color: rgba(249, 198, 26, 1);
padding: 0 5px;
display: inline-block;
transform: translate(-1px, 1px) scale(0.75);
transform-origin: right center;
}
.wrapper:before {
--bw: 9px;
grid-area: 1 / 1;
content: '';
backface-visibility: hidden;
height: 100%;
width: 100%;
margin-top: calc(-1 * var(--bw));
margin-left: calc(-1 * var(--bw));
background: transparent;
transform: translateX(-60px) rotateY(-30deg) rotateX(15deg) scale(1.03);
pointer-events: none;
border: var(--bw) solid #000;
box-sizing: content-box;
}
.wrapper:hover > div,
.wrapper:hover:before {
transform: none;
}
.wrapper > div,
.wrapper:before {
will-change: transform;
transition: .3s transform cubic-bezier(.25,.46,.45,1);
} Final Output:
Conclusion:
In this tutorial, we have learned how to create a 3D gradient card with dynamic hover using CSS. We started with the basic HTML structure, added styling using CSS, and then added dynamic hover effects to create a visually stunning element for our website.
By using gradients, perspective, and transitions in our design, we were able to create a card that is not only visually appealing but also interactive. This type of design is a great way to grab the attention of your website visitors and keep them engaged.
We hope that this tutorial has provided you with the knowledge and skills to create your own 3D gradient cards with dynamic hover effects using CSS. Don't be afraid to experiment and try out different styles and designs to make your website stand out.
Thank you for following along with us and happy designing!
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 😊
