How to style a text llike this in css

user4Dem1 0
Viewed 39

How to style a text like this in css can anyone can write code snippets to do that? I i just need a same text like this with a black background i am a new coder i just want his text in my page the text text should be same you can also see their style code from here https://www.apple.com/careers/in/#:~:text=Join%20a%20team%20and%20inspire%20the%20work. pls write me a snippets

html code

<!DOCTYPE html>
<html>

<head>
  <title>Home</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta charset="UTF-8">
</head>

<body>
  <main>
    <header>
      <h1>Site Index</h1> 
    </header>
    <section>
      <article>
        <h2>This is the section</h2>
        <p style="color: #50FFFF; font-size: 40px;
                text-shadow:
                 0px 0px 2px #1040FF,
                -2px -2px 2px #1040FF,
                 2px -2px 2px #1040FF,
                -2px 2px 2px #1040FF,
                 2px 2px 2px #1040FF;">
          This is my home page of my test HTML web page. Right now i am using a HTML style on this paragraph. It uses a hexidecimal color, font size of 16 px and text shadow.
        </p>
      </article>
    </section>
    
  </main>
</body>

</html>

css code

body {
    background-color: #101010;
    color: #ffffff;
  }
  h1 {
    color: #ffffff;
  }
  nav a {
    color: #ffffff;
  }
  footer {
    color: #ffffff;
  }

enter image description here

enter image description here

coding-style javascript css html
1 Answers

If you want to make a background gradient, try this:

body {
background-color: black;
text-align: center;
}
h1 {
  font-size: 50px;
  background: -webkit-linear-gradient(#6d1ee6, #598ab9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 80px;
}
<h1>Hello world!</h1>

Or with an image:

body {
background-color: black;text-align: center;
}
h1 {
font-size: 40px;
background: url(https://i.ibb.co/7Wh4D55/image.png);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-size: 100% 100%;
        -webkit-text-fill-color: transparent;
    }
<h1>Hello world!</h1>

Tiago Rangel de Sousa0
Related