Multi-line Text Fading

Developer
Joey Hoer
Size
3,580 Kb
Views
32,384
  1. Multi-line Text Fading Previews
  2. Multi-line Text Fading HTML Codes
  3. Multi-line Text Fading CSS Codes

How do I make an multi-line text fading?

A demonstration of multi-line text fading with CSS and repeating linear gradients.. What is a multi-line text fading? How do you make a multi-line text fading? This script and codes were developed by Joey Hoer on 14 September 2022, Wednesday.

Multi-line Text Fading Previews
IQ Test

Multi-line Text Fading - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Multi-line Text Fading</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ h1 { color: #fee7f7; line-height: 1.2; position: relative; overflow: hidden; font-size: 2.75em; display: inline-block;
}
h1:after { content: ''; background-image: repeating-linear-gradient(rgba(196, 8, 140, 0), rgba(196, 8, 140, 0) 0.3em, rgba(196, 8, 140, 0.65) 0.9em, rgba(196, 8, 140, 0.8) 1.2em); display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
}
@supports (-webkit-background-clip: text) { h1 { -webkit-background-clip: text; text-fill-color: transparent; background-color: #fee7f7; background-image: repeating-linear-gradient(rgba(196, 8, 140, 0), rgba(196, 8, 140, 0) 0.3em, rgba(196, 8, 140, 0.65) 0.9em, rgba(196, 8, 140, 0.8) 1.2em); } h1:after { display: none; }
}
body { background-color: #c4088c;
}
/* Center */
html, body { height: 100%;
}
html { display: table; width: 100%;
}
body { display: table-cell; vertical-align: middle; text-align: center;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>Multi-line<br/>Text Fading</h1>
</body>
</html>

Multi-line Text Fading - Script Codes CSS Codes

h1 { color: #fee7f7; line-height: 1.2; position: relative; overflow: hidden; font-size: 2.75em; display: inline-block;
}
h1:after { content: ''; background-image: repeating-linear-gradient(rgba(196, 8, 140, 0), rgba(196, 8, 140, 0) 0.3em, rgba(196, 8, 140, 0.65) 0.9em, rgba(196, 8, 140, 0.8) 1.2em); display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
}
@supports (-webkit-background-clip: text) { h1 { -webkit-background-clip: text; text-fill-color: transparent; background-color: #fee7f7; background-image: repeating-linear-gradient(rgba(196, 8, 140, 0), rgba(196, 8, 140, 0) 0.3em, rgba(196, 8, 140, 0.65) 0.9em, rgba(196, 8, 140, 0.8) 1.2em); } h1:after { display: none; }
}
body { background-color: #c4088c;
}
/* Center */
html, body { height: 100%;
}
html { display: table; width: 100%;
}
body { display: table-cell; vertical-align: middle; text-align: center;
}
Multi-line Text Fading - Script Codes
Multi-line Text Fading - Script Codes
Home Page Home
Developer Joey Hoer
Username joeyhoer
Uploaded September 14, 2022
Rating 3.5
Size 3,580 Kb
Views 32,384
Do you need developer help for Multi-line Text Fading?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Joey Hoer (joeyhoer) Script Codes
Name
Example SVGZ Data URI
Fighting the Space
Dizzy Disks
Responsive Text with Viewport Units
3D Text
Perforated Leather Background
Flexible Rounded Hexagons
Flexagons
CSS Preloader Animations
Lightpack
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!