Create Text Gradient Using Html Css ( Text Gradient Code)
Text Gradient Using Html Css
Hello coders, A very warm welcome to CodeWithRandom today’s blog in which I show you how to create TEXT GRADIENT USING HTML AND CSS.
This is a way to attract users to your content or when you want to design a stylish or modern stylish website then there are a lot of chances that you need to make a text gradient. The text gradient is a way to add text effect to your design instead of filling the background you can apply the gradient to a text. It is very popular all over the web. It is a smooth color of series…
So let’s start to create a Text gradient effect using HTML and CSS only……
HTML CODE For Text Gradient:-
The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.
All HTML documents must start with a document type declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.Inside the body tag we are adding the main content of the website.
Here we are using the HTML basic concepts like div, and heading tag. Here we are using a div tag, heading tag, and paragraph tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="main-container">
<h1 class="text-gradient">Header with gradient</h1>
<h2 class="text-gradient">Header with gradient</h2>
<p class="text-gradient">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni
quisquam voluptatem eveniet porro eum nobis necessitatibus
quaerat aut suscipit officiis esse ab, quos odio nihil, itaque,
debitis assumenda architecto quas.
</p>
</div>
</body>
</html>
HTML OUTPUT Of TEXT GRADIENT:-
Here is the output of the HTML.
CSS CODE For TEXT GRADIENT:-
CSS stands for Cascading Style Sheet.CSS is used for styling the HTML. Instead of Using Pure/Plain CSS for styling, we can use CSS templates/frameworks like SASS, SCSS, Bootstrap, or Tailwind. But, Here we are using Plain CSS basic concepts for styling.
10 Things We Like About The Mazda MX-30
.text-gradient {
background: -webkit-linear-gradient(45deg, #f44a2c, #f6c32c 60%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h1,
h2 {
text-align: center;
}
display property to flex:align-content
-Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines
align-items-Vertically aligns the flex items when the items do not use all available space on the cross-axis
display-Specifies the type of box used for an HTML element.
flex-direction-Specifies the direction of the flexible items inside a flex container.
flex-flow:-A shorthand property for flex-direction and flex-wrap.
flex-wrap-Specifies whether the flex items should wrap or not if there is not enough room for them on one flex line.
justify-content-Horizontally aligns the flex items when the items do not use all available space on the main axis.
.main-container {
height: 100vh;
width: 80vw;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* General styling */
body {
font-family: Verdana;
}
/
CSS OUTPUT Of TEXT GRADIENT:-
This is the final output after applying/writing HTML code and CSS code.
