How To Create CURVED BOX & GRADIENT Text Using HTML & CSS

In this blog, we are going to learn how to create curved boxes and gradient text using HTML & CSS with code examples and output. For this, we’re going to use some CSS properties mention below

  • CURVED BOX
    • CSS box-shadow Property
      • The box-shadow property attaches one or more shadows to an element.
    • CSS Rounded Corners
      • With the CSS border-radius property, you can give any element “rounded corners”.
  • GRADIENT TEXT
    • -webkit-linear-gradient
    • -webkit-background-clip
    • -webkit-text-fill-color

CURVED BOX (CSS)

.image{
			margin: -40px 0px 0px 0px ;
		}
		.box{
			width: 100%;
			margin-top: 35px;
		}
		.curved_box_wrapper{
			font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
			color: white;
			display: inline-block;
			width: 100%;
			height: 250px;
			max-width: 195px;
			padding: 10px;
			margin-right: 10px;
			box-shadow: -4px 0px 8px 0px rgba(38,37,38,0.56);
			border: 2px solid #fff;
			/*border-bottom-left-radius: 60% 10%;
			border-bottom-right-radius: 60% 10%;*/
			border-bottom-left-radius: 120px 15%;
			border-bottom-right-radius: 120px 15%;
			
		}
		.curved_box{
			background-color: midnightblue;
			color: midnightblue;
			display: inline-block;
			width: 95%;
			height: 95%;
			max-width: 190px;
			margin: -7px -10px 5px -8px;
			padding: 10px;
			border: 2px solid midnightblue;
			border-bottom-left-radius: 120px 15%;
			border-bottom-right-radius: 120px 15%;
		}
		.curved_box_wrapper .curved_box .profile-img{
			width: 100px;
  			height: 100px;
			margin: -50px 0px 0px 0px;
  			text-align: center;
  			position: relative;
  			border-radius: 100%;
  			background-color: #ffffff;
                        box-shadow: 0px 10px 40px 0px rgba(1, 1, 1, 0.1);
		}
		.curved_box_wrapper .curved_box .profile-img > img{
			width: 100%;
 			height: 100%;
  			display: block;
  			border-radius:100%;
		}
		.curved_box_wrapper .curved_box .text{
			width: 100%;
			margin-top: 5px;
		}
		.curved_box_wrapper .curved_box .text2{
			width: 100%;
			margin-top: -15px;
			color: white;
		}
		.curved_box_wrapper .curved_box .text3{
			width: 100%;
			margin-top: -20px;
			color: white;
			font-size: .9em;
		}
		.curved_box_wrapper .curved_box .text4{
			width: 100%;
			/*margin-top: -20px;*/
			color: white;
			font-size: .9em;
			font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
		}
              

CURVED BOX (HTML)

<center>
   <div class="box">
        <div class="curved_box_wrapper">
		<div class="curved_box" style="background-color: #76FF03; border-color: #76FF03">
		  <div class="profile-img"></div>
		</div>
	</div>

        <div class="curved_box_wrapper">
		<div class="curved_box" style="background-color: #D80713; border-color: #D80713">
			<div class="profile-img"><img src="Images/beinggeek.png" alt="beinggeek"></div>
			<h2 class="text" style="color: #4A148C">BeingGeek</h2>
			<p class="text2">beinggeek.mohsinsaeed.me</p>
			<hr>
			<p class="text4">
				<i style="font-size: .9em">admin@beinggeek.mohsinsaeed.me</i><br>
				<strong>Facebook/ </strong>beinggeek.blog<br>
				<strong>Twitter/ </strong>BeingGeek_
			</p>
		</div>
	</div>

	<div class="curved_box_wrapper">
		<div class="curved_box" style="background-color: #00B0FF; border-color: #00B0FF">
			
		</div>
	</div>
   </div>
  </center>

GRADIENT TEXT (CSS)

This is WebKit only but it is the cleanest way to accomplish it as the text remains editable and selectable web text. Clean code is a good practice for SEO.

h1 {
     background: -webkit-linear-gradient(#76FF03, #D80713, #00B0FF);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     
 }

GRADIENT TEXT (HTML)

 <h1>CREATE <b>GRADIENT TEXT</b> USING HTML & CSS</h1>

GRADIENT TEXT (OUTPUT)

CREATE GRADIENT TEXT USING HTML AND CSS


Mohsin Saeed

MOHSIN SAEED – SEO Researcher & Full Stack Web Developer. https://mohsinsaeed.me That is all you ever need to know about me.

One thought on “How To Create CURVED BOX & GRADIENT Text Using HTML & CSS

Leave a Reply

%d bloggers like this: