Categories
CSS Web development

CSS background-clip text

CSS background-clip text

To learn how create the CSS background-clip text follow the steps below:

Demo:

*to see the CSS background-clip text on the website click here.

Step1.

Add HTML

Create a div element and add some text:

<div class="seaside">SEASIDE</div>

Step2.

Add CSS

Import the font (source: https://fonts.google.com/):

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');

Set the colour and the position of the background and elements:

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

Add the background image and style the text:

.seaside {
  position: relative;
  background-image: url('https://lenadesign.org/wp-content/uploads/2021/07/brighton-2-1024x267.jpg');
  background-position: center bottom;
  width:100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 150px;
  font-weight: bold;
  font-family: 'Archivo Black', sans-serif;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;  
}

Add the CSS @media rule to display the effect properly on smaller screens:

@media only screen and (max-width: 600px) {
  .seaside {
    font-size: 80px;
    background-position: center 75%;
  }
}

Enjoy coding!

Read also:

CSS Mirror/ Reflection Text Effect

CSS Bouncing Text Animation

How to create a transparent text with stroke in CSS?

Categories
CSS Web development

CSS background-clip Property

CSS background-clip Property

The CSS background-clip property specifies how far the background (color/ or image) should extend within an element.

Demo:

Syntax:

background-clip: border-box|padding-box|content-box;

border-box (default) – the background extends behind the border.

padding-box – the background extends to the inside edge of the border.

content-box – the background extends to the edge of the content box.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
    
#example-1, #example-2, #example-3 {
   border: 5px dashed black;
   padding: 20px;
   background-color: #fed9b7;
    }
#example-1 {
  background-clip: border-box;  
}

#example-2 { 
  background-clip: padding-box;
}

#example-3 {
  background-clip: content-box;
}
</style>
</head>
<body>

<p>background-clip: border-box;</p>
<div id="example-1">
  <p>The background extends behind the border.</p>
</div>

<p>background-clip: padding-box;</p>
<div id="example-2">
  <p>The background extends to the inside edge of the border.</p>
</div>

<p>background-clip: content-box;</p>
<div id="example-3">
  <p>The background extends to the edge of the content box.</p>
</div>

</body>
</html>

Output:

background-clip: border-box;

The background extends behind the border.


background-clip: padding-box;

The background extends to the inside edge of the border.


background-clip: content-box;

The background extends to the edge of the content box.


Enjoy coding!