Create a modern 3D gradient card with dynamic hover effects using pure CSS. Easy tutorial for beginners to design stylish UI cards.
Table of Contents
In the world of web design, creating visually stunning, engaging elements is essential for 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 creating a 3D gradient card with dynamic hover effects 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.
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 define the main structure of our 3D gradient card.
After creating the files, paste the following code 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 document's language 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 wrapper, a container used to group and style 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 basic CSS rules to create a 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 named styles.css and paste the provided code into it. 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 CSS styling, 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 capture your website visitors' attention and keep them engaged.
We hope this tutorial has given you the knowledge and skills to create your own 3D gradient cards with dynamic hover effects using CSS. Don't be afraid to experiment with different styles and designs to make your website stand out.
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 😊
