How to Change the Color of HTML Elements
CSS
09.01.2025
Reading time: 5 min
Share
When working with a webpage, you often need to enrich the markup by adding visual variety. This can be driven by design requirements or personal preferences. There are many ways to make a page more visually appealing, from font choices to the dynamic behavior of content when scrolling.
One of the key graphic techniques is changing the background or text color on the page. Modern browsers allow you to flexibly choose background colors or combinations and specify the desired values in a format that suits you.
Elements That Can Have Color
Almost any HTML element can have its color. The color is applied in different ways depending on what exactly you want to color. For example, if you need to change the color of text in HTML, you can use the color attribute, and for borders around it, the border-color attribute.
These attributes can be set either directly in the markup using HTML attributes or in a CSS file linked to the markup.
When working with colors in HTML, elements can be roughly divided into two groups: text elements and block elements. In text elements, you set the color of the text and its styling, while in block elements, you set the background and border colors.
Text Elements
Text elements include, for example, paragraphs or input fields. For these elements, you can use several attributes for visual styling. Let's look at how to change the text color:
- color: This attribute is used to set the color of the text and any text decoration (such as underline, overline, etc.).
- background-color: In addition to changing the text color, it is often required to change the background color as well. This attribute is used for such cases.
- text-shadow: Sometimes, text design on the page requires a shadow. If the shadow color differs from the default, you can set it using the
text-shadowattribute. - text-decoration-color: When you set a color for a text element using the
colorattribute, the color is applied to the accompanying text decoration. But if you want to set a different color for underlining, for example, you can use this attribute. - caret-color: In specific cases, you may need to style input fields (
input,textarea) or elements with thecontenteditableattribute. This attribute allows you to color the caret (the vertical cursor) that appears in the fields.
Block Elements
For block elements, such as div, you can flexibly set background and border colors regardless of the content inside the block.
- background-color: Adds a fill to the entire area of the block element. This attribute will help if you're wondering how to change the background color in HTML for the entire page. Just add the attribute to the
bodystyles and specify the desired color. - outline-color: Sets the color of the outline around the element if an outline style is specified with
outline-style. - border-color: Allows you to set the color for the borders around the block element. To set the color for each side — top, bottom, right, and left — use the attributes
border-top-color,border-bottom-color,border-right-color, andborder-left-colorrespectively.
Other Elements
In addition to the HTML elements mentioned above, you can also work with the visual design of the page using technologies such as SVG, Canvas, or WebGL.
How to Change Text Color in CSS
The first step in using color in your markup is to determine how to specify it so that the browser understands how to color the element. The way you specify the color primarily depends on how specific or complex the color is. For instance, there’s a difference between using a basic color like blue or combining red, green, and blue in different proportions, potentially with transparency.
Key CSS Keywords
The simplest way to specify a color is by using a keyword, such as green or lightgrey. For example, to use black for text, you would write color: black;, and the browser will automatically understand the color to display.
You can find a complete list of reserved color keywords in the documentation.
RGB Model
RGB stands for Red, Green, and Blue. When you specify a color using the RGB model, you define the color by mixing three primary colors: red, green, and blue. Like in a regular color palette, mixing these colors in varying proportions creates new combinations and shades.
The three RGB values are integers between 0 and 255 or percentages from 0 to 100. For example, when you specify rgb(0, 0, 255), you will see the color blue in the browser.
Modern browsers also support an extended version of RGB, called RGBA, where you can specify color transparency. This is done by adding a fourth value for transparency in percentage form. For example, blue with 50% transparency would be written as rgba(0, 0, 255, 0.5).
HEX Representation
A HEX color is a hexadecimal representation of the RGB model. The color code consists of three pairs of hexadecimal digits, each representing the red, green, and blue components respectively. For example, specifying #00ff00 will display green.
If each color group contains identical characters (for example, #2211dff), you can use a shorthand representation — #21f.
HSL System
HSL stands for Hue, Saturation, and Lightness. In this system, the color is not determined by mixing the three parameters. Instead, each component is independent, which makes it easy to adjust the color's saturation or brightness while keeping the same hue. This system allows more control over the color's appearance without altering the basic tone.
CSS
09.01.2025
Reading time: 5 min
Share
Similar
CSS
How to Create Scrolling on Your Website Using CSS
Do you want to add parallax and scrolling effects to your page but don’t know where to start? You don’t need to jump straight into JavaScript—simpler options are available. In this article, we’ll explain how to achieve this using CSS alone and clarify which browsers might not support these effects.
Smooth Scrolling
To create simple scrolling from one part of the page to another, use the CSS property scroll-behavior.
Use the CSS property scroll-behavior to create simple scrolling from one part of the page to another. Here are its main values:
auto: The default behavior.
smooth: Enables smooth transitions.
instant: Enables quick transitions.
Here’s what CSS code looks like with the second value (smooth) applied to a conditional p selector:
p {
scroll-behavior: smooth;
}
Next, we’ll demonstrate how to create a smooth transition from one part of a site to another using the smooth value. In this example, the user will see the transition when clicking a hyperlink that leads to another section of the page.
Step 1. Create two blocks with links to each other:
<html>
<body>
<head></head>
<h1>Smooth Scrolling</h1>
<div class="main" id="block1">
<h2>Block 1</h2>
<p>Click the hyperlink to see smooth scrolling.</p>
<a href="#block2">Click here to go to Block 2.</a>
</div>
<div class="main" id="block2">
<h2>Block 2</h2>
<a href="#block1">Click here to go to Block 1.</a>
</div>
</body>
</html>
Step 2. Add smooth scrolling using CSS code inside the <head> tag. The code will include the scroll-behavior property with the value smooth. Additionally, set colors and heights for the different text sections: pink and yellow.
<head>
<style>
html {
scroll-behavior: smooth;
}
#block1 {
height: 1000px;
background-color: #ffa3f6;
}
#block2 {
height: 1000px;
background-color: #fffc9c;
}
</style>
</head>
Thanks to the smooth value, smooth scrolling is implemented on the web page.
If You Need Parallax
Parallax is an effect where background elements move faster or slower than objects in the foreground. For example, as a user scrolls a page, the background image may move at one speed while the text moves at another.
In this case, we’ll ensure the background image doesn’t move at all during scrolling.
Step 1. Write the HTML code, which includes a large purple text block:
<html>
<head></head>
<body>
<h1>Scroll Further Down the Page</h1>
<div class="paral"></div>
<div style="height:550px;background-color:#bf89e0;font-size:50px">
This text is included simply to demonstrate the effect. Try scrolling up and down. The text block will move, but the image will remain stationary.
</div>
<div class="paral"></div>
</body>
</html>
Step 2. Add the CSS code. It will include a link to an image that becomes the background using the background-attachment: fixed property.
<style>
body, html {
height: 90%;
}
.paral {
background-position: center;
background-attachment: fixed;
background-size: cover;
background-image: url('https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80');
height: 90%;
}
</style>
As a result, the parallax effect is implemented on the page.
Note. To remove this effect, simply replace background-attachment: fixed with background-attachment: scroll in the code. The image will then move along with the text.
Additional Examples
To better understand CSS properties, let’s explore other scrolling effects for a website.
Example 1
Here’s a step-by-step guide to achieving a multi-layered scrolling effect. In this case, multiple objects on the site will move at different speeds during scrolling.
Step 1. Write two sections in the following way:
<html>
<head></head>
<body>
<section class="block1">
<h1>Block 1</h1>
</section>
<section class="block2">
<h1>Block 2</h1>
</section>
</body>
</html>
Step 2. Add CSS code inside the <head> tag. First, define the parameters and select a background from a free photo stock for Block 2:
<head>
<style>
section {
position: absolute;
min-height: 90vh;
width: 100%;
transform-style: inherit;
position: relative;
}
.block1 {
z-index: 2;
background: #ff9012;
}
.block2::before {
background: url(https://images.unsplash.com/photo-1536308037887-165852797016?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=826&q=80) top center;
content: '';
top: 0; left: 0; right: 0; bottom: 0;
position: absolute;
display: block;
transform: translateZ(-0.5px) scale(2);
z-index: -2;
background-size: cover;
}
</style>
</head>
Step 3. Specify the parameters for the headings:
<head>
<style>
h1 {
font-size: 3.7rem;
position: absolute;
padding: 0.8rem;
background: #fffcfc;
transform: translateZ(-1px) scale(1) translate(-25%, -25%);
top: 49%;
left: 49%;
text-align: center;
}
.block1 h1 {
z-index: 2;
transform: translate(-49%, -49%);
}
.block2 h1 {
z-index: 2;
transform: translateZ(-0.4px) scale(1.2) translate(-39%, -39%);
}
</style>
</head>
Step 4. Define the parameters for other elements:
<head>
<style>
*,
*::before,
*::after,
:root {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
height: 95%;
overflow: hidden;
}
body {
height: 95%;
overflow-x: hidden;
overflow-y: scroll;
perspective: 0.8px;
transform-style: preserve-3d;
font-size: 40%;
font-family: 'PT Astra Sans';
}
</style>
</head>
As a result, the website will have three moving objects. Here they are, ranked from slowest to fastest:
The background image of Block 2.
The "Block 2" heading.
Block 1 with the orange background.
This is how multi-layered scrolling looks in action.
Example 2
Let’s look at how to fix an element on a webpage during scrolling. For instance, hostman.com has such pinned elements:
Step 1. Write HTML with two text blocks like this:
<html>
<head></head>
<body>
<h1>Fixed Element</h1>
<div class="extra"></div>
<div class="wrap">
<div class="elem">
Element
</div>
</div>
</body>
</html>
Step 2. Add the following CSS inside the <head> tag:
<head>
<style>
body {
font-family: Times New Roman;
}
h1 {
text-align: justify;
}
.wrap {
background-color: #52ff83ab;
width: 90%;
height: 2000px;
margin: 30px;
}
.elem {
background: #6052ff;
width: 150px;
height: 150px;
color: #fcfcfc;
align-items: center;
justify-content: center;
display: flex;
position: fixed;
}
</style>
</head>
When using the position: fixed property, the element remains visible and moves along with scrolling.
Example 3
This time, let’s create horizontal scrolling.
Step 1. Create four text blocks like this:
<html>
<head></head>
<body>
<div id="container">
<div id="container2">
<div class="type one"><div>One</div></div>
<div class="type two"><div>Two</div></div>
<div class="type three"><div>Three</div></div>
<div class="type back"><div>Four</div></div>
</div>
</div>
</body>
</html>
Step 2. Add the following CSS inside the <head> tag. This code defines the size and color of the text blocks:
<head>
<style>
body {
font-family: PT Astra Sans;
margin: 0;
}
#container .type {
position: relative;
display: inline-block;
width: 150vw;
height: 99vh;
}
#container .type > div {
position: relative;
width: 99px;
height: 99px;
color: #080808;
line-height: 0.8;
top: 48%;
left: 48%;
font-weight: bold;
font-size: 96px;
}
#container {
position: absolute;
overflow-x: scroll;
overflow-y: scroll;
transform: rotate(270deg) translateX(-100%);
transform-origin: top left;
background-color: #ccc;
width: 99vh;
height: 99vw;
}
#container2 {
transform: rotate(90deg) translateY(-98vh);
transform-origin: top left;
white-space: nowrap;
}
.one {
background-color: #00ff48;
}
.two {
background-color: #ff00d5;
}
.three {
background-color: #f00;
}
.back {
background-color: #fff71c;
}
</style>
</head>
This creates a horizontally scrolling page divided into several sections with text.
Conclusion
Creating scrolling effects is a straightforward process. With just CSS properties, you can implement unique transitions between sections of a website during scrolling.
The code may be lengthy in some cases, such as multi-layered scrolling where each section moves at a different speed. However, this is still simpler and more efficient than using JavaScript for similar effects.
Check out our reliable and high-performance WordPress hosting solutions for your websites.
20 January 2025 · 8 min to read
CSS
How to Create a Sticky Footer Using CSS
You can create many different effects for a website with HTML and CSS. One of the simplest examples is fixing an element in any part of the page during scrolling. In this article, we will explain what a footer is and how to fix it without JavaScript. We will also look at HTML footer examples.
What is a Footer?
A footer is an element located at the bottom of a website. Sometimes, this element is fixed on the page so that it remains visible during scrolling. The effect is similar to, for example, the chat box on the hostman.com website. When scrolling, it always stays in place.
Next, let’s look at a few clear examples of how to make an HTML footer stick on a page.
Example 1
We will create a simple site footer as a colored block with a single word.
Step 1. Write HTML code with a large number of paragraphs to demonstrate the fixed element during scrolling:
<html>
<head>
<style>
</style>
</head>
<body>
<h1>A simple example of a sticky footer</h1>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
Step 2. Using CSS, we will select the font for the text on the page, set the background color, and configure the element's positioning:
<style>
body {
font-family: PT Astra Sans;
background-color: #e9e9f0;
}
.footer {
background-color: #2e34e5;
position: fixed;
right: 0;
bottom: 0;
text-align: center;
width: 99%;
font-size: 19px;
font-weight: bold;
color: #fafaff;
}
</style>
As a result, we’ll have a blue footer on the site that always stays at the bottom during scrolling. This text-containing element will span the full width of the window.
Example 2
How can you create a site footer with links to external resources? We'll explain this in the second example: the links will point to images from a free stock photo site.
Step 1. Add links to three different images so that we can include them in the HTML footer:
<html>
<head>
<style> </style>
</head>
<body>
<h2>An example of a sticky footer with links to images</h2>
<div class="wrapper">
<div class="footer">
<p class="text">
<a href="https://images.unsplash.com/photo-1483728642387-6c3bdd6c93e5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=876&q=80" class="menu">Pic1</a>
<a href="https://images.unsplash.com/photo-1570092178365-4cd46034bb19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1032&q=80" class="menu">Pic2</a>
<a href="https://images.unsplash.com/photo-1604231751678-3f2b03928c10?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80" class="menu">Pic3</a>
</p>
</div>
</div>
</body>
</html>
Step 2. Using CSS, we will configure the site dimensions and the footer with three links:
.wrapper {
height: 1111px;
}
.footer {
background-color: #aac5fa;
position:fixed;
right:0;
bottom:0;
width:99%;
height: 101px;
}
.text {
float:none;
font-size:29px;
word-spacing:40px;
padding-left:29px;
}
</style>
Step 3. Let’s make it so that the text size and background color change when hovering over the links.
<style>
a:active {
text-decoration: none;
}
a:link {
text-decoration: none;
}
a.menu:hover {
font-size:29px;
background-color:#8eff8c;
}
</style>
Example 3
Now let’s look at how to create an HTML site footer with image links to two popular websites. We won't need the <footer> tag.
Step 1. Write the code with a large paragraph, add icons for Facebook and Twitter, and include links to their websites.
<html>
<head>
<style></style>
</head>
<body>
<div id="wrapper">
This text is simply included to show how the footer will move during scrolling. This text is simply included to show how the footer will move during scrolling. This text is simply included to show how the footer will move during scrolling. This text is simply included to show how the footer will move during scrolling. This text is simply included to show how the footer will move during scrolling. This text is simply included to show how the footer will move during scrolling. This text is simply included to show how the footer will move during scrolling. This text is simply included to show how the footer will move during scrolling. This text is simply included to show how the footer will move during scrolling. This text is simply included to show how the footer will move during scrolling. This text is simply included to show how the footer will move during scrolling. This text is simply included to show how the footer will move during scrolling. This text is simply included to show how the footer will move during scrolling. This text is simply included to show how the footer will move during scrolling. This text is simply included to show how the footer will move during scrolling. This text is simply included to show how the footer will move during scrolling.
</div>
<div id="footer">
<div class="all-symbols">
<a href="https://facebook.com/"><img src="https://cdn-icons-png.flaticon.com/256/20/20837.png" class="symbol" alt="FB icon"></a>
<a href="https://x.com/"><img src="https://cdn-icons-png.flaticon.com/256/5969/5969020.png" class="symbol" alt="TW icon"></a>
</div>
</div>
</body>
</html>
Step 2. Use CSS to stick the footer at the bottom of the page and configure the colors and other parameters. The page background will be gray, and the background of the element with icons will be blue.
<style>
#wrapper {
margin: 344 auto 433px;
width: 399px;
}
body {
background-color: e2e1eb;
}
#footer {
background-color: #301fed;
position: fixed;
left: 0;
bottom: 0;
height: 70px;
padding-left: 29px;
color: #f3f2ff;
width: 99%;
}
.all-symbols {
float:left;
margin-top:19px;
padding-left:199px;
}
.symbol {
color: #fffcfc;
margin-top:6px;
margin-left:29px;
height:29px;
}
</style>
Step 3. Now make it so that the background color turns white when hovering over the icons:
<style>
.symbol:hover {
padding:2px;
background-color:#fffcfc;
}
</style>
As a result, we will have a page where the footer contains Facebook and Twitter icons that link to their respective sites.
Example 4
Let’s now look at how to make an HTML footer stick at the bottom of the page with an unusual effect. The block will be hidden beneath the page; to reveal it, users must interact with another element. In this case, that element will be a red dashed square.
Step 1. Add many paragraphs to the HTML code. This makes it easier to test the footer's fixation on the page:
<style> </style>
<h1>To find the footer, hover your cursor over the red square.</h1>
<h2><p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p></p></h2>
<div class="wrapper">
<div class="footer">
<div id="button"></div>
<div id="block">
<div id="text">
<div class="footer1">
<h1>Hidden footer</h1>
</div>
</div>
</div>
</div>
Step 2. Next, add the following CSS code to define the background, footer, and other parameters. We’ll use the PT Astra Sans font; the background will be light blue.
<style>
.wrapper {
height: 1111px;
}
body{
background-color:#8f85ff;
font-family: PT Astra Sans;
text-align:center;
color:#e8e6fc;
}
.footer #block{
position:relative;
margin-top:2px;
width:99,99%;
height:99%;
background: #120f2b;
}
.footer #text{
Position: relative;
right:201px;
width:123px;
margin:14 auto;
top:-51px;
}
.footer1{
float:left;
width:499px;
}
.footer h1{
color: #ffc9c9;
font-family: PT Astra Sans;
margin-top:69px;
margin-left:39px;
}
</style>
Step 3. Create the red square, which will reveal the hidden block. Using the dashed value, make the object dashed to make it stand out even more.
<style>
…
.footer #button{
width:50px;
height:50px;
border: #d41542 8px dashed;
margin:-3 auto;
position:center;
}
.footer #button:hover{
width:50px;
height:50px;
border: #d41542 8px dashed;
}
.footer {
position: fixed;
right:0;
bottom:0;
width: 99%;
height: 2em;
overflow:hidden;
transition: all 2s ease;
}
.footer:hover {
transition: all 2s ease;
height: 9em;
}
…
</style>
The result will be a page where the hidden CSS footer smoothly appears and disappears at any scrolling point. We can apply this effect to any part of the page. The footer only appears when the cursor hovers over the bottom of the window.
Conclusion
We reviewed four ways to stick an HTML footer on a site. The following CSS properties and values were particularly useful:
position: fixed;
right: 0;
bottom: 0;
Instead of text and links, you can include a site search form or a request for clients to leave their contact information in the footer. However, large blocks like these may interfere with page viewing. In such cases, the method in Example 4 can be helpful: creating a small element to hide the HTML footer.
Check out our reliable and high-performance WordPress hosting solutions for your websites.
20 January 2025 · 9 min to read
CSS
Customizing Scrollbars in CSS
You can style scrollbars to be narrow or wide, change colors, or even hide them. This is a relatively simple task, but it comes with some challenges regarding cross-browser compatibility. Let's explore how to properly create a custom scrollbar.
Suppose the project manager came up with an updated design for the website server page. The mockups show that the scrollbars have custom styles using corporate colors. It looks interesting, and now we need to figure out how to implement this scrollbar styling.
The solution is quick. In 2018, the CSS Scrollbars specification was introduced, which defines how the scrollbar's appearance can be customized. This specification introduced two new properties that affect the visual style of the scrollbar:
scrollbar-color — controls the color of the scrollbar.
scrollbar-width — controls the width of the scrollbar.
Customizing the scrollbar is now a five-minute task. Let’s check this in practice.
Applying CSS Scrollbars Properties
Before diving into how to style the scrollbars, let’s first understand their components. The operating system and browser do not matter here. All scrollbars have at least two elements:
Thumb — the draggable part that allows us to scroll.
Track — the area along which the thumb moves.
Now, let’s apply some properties to style these elements. First, we will start with the width of the scrollbar. The scrollbar-width property has three possible values:
auto — the default width.
thin — a thin scrollbar.
none — hides the scrollbar.
You cannot specify the width in pixels or percentages. This restriction is in place to ensure consistency in how control elements are displayed across different browsers and operating systems — or, in simpler terms, to avoid a mess of custom solutions that could confuse users.
The scrollbar-color property accepts two values: the first one sets the color of the thumb, and the second one sets the color of the track. The default value is auto, which tells the browser to use the default system settings.
Let’s combine both properties and apply the following styling:
body {
scrollbar-width: thin;
scrollbar-color: green black;
}
When you check this in a browser, you will see that the scrollbar on the page becomes thin and black and green.
Cross-Browser Compatibility
In the test environment, styling the scrollbar with scrollbar-color and scrollbar-width looks great. But before sending it to production, we need to check cross-browser compatibility — after all, not everyone uses the same browser.
When we open the styled page in Safari, we notice that the scrollbar remains in its default style. To check our suspicions, let’s look up the support for the CSS Scrollbars properties on Can I Use. The situation is disappointing. Four years after the specification was introduced, the convenient scrollbar customization is still unavailable in this browser.
So, does this mean we won’t be able to implement the designed layout and will have to change everything?
Don't worry, there’s a solution. To modify the appearance of the scrollbar in Safari, we can use pseudo-elements:
::-webkit-scrollbar — controls the entire navigation element.
::-webkit-scrollbar-track — controls the track.
::-webkit-scrollbar-thumb — controls the thumb (draggable part).
Using pseudo-elements may seem like a hack, but there's no other option. Let’s add some styles for cross-browser compatibility:
body::-webkit-scrollbar {
width: 15px; /* Width of the entire navigation element */
}
body::-webkit-scrollbar-track {
background: #fff; /* Color of the track */
}
body::-webkit-scrollbar-thumb {
background-color: #050c26; /* Thumb color */
border-radius: 20px; /* Roundness of the thumb */
border: 3px solid #050c26; /* Thumb border styling */
}
The obvious advantage of this approach is that we can explicitly set the width of the scrollbar. The large header will match the color of a very wide scrollbar. A separate specification for the scrollbar element doesn't offer this flexibility. The options are limited to either automatic width calculation or displaying a thin navigation element (as much as possible, considering system settings).
The same goes for colors. With pseudo-elements, we can set not just colors but also gradients. Let’s slightly modify the thumb style:
body::-webkit-scrollbar-thumb {
background: linear-gradient(45deg, #EECFBA, #C5DDE8); /* Gradient effect */
border-radius: 20px;
border: 3px solid #050c26;
}
Now, the thumb will have a gradient effect that changes colors.
The downside is that this is outdated syntax. The CSS Scrollbars specification explicitly mentions that using prefixed pseudo-elements related to the scrollbar is considered incorrect. However, until other browsers support the new properties, we are forced to use prefixed pseudo-elements to maintain cross-browser compatibility.
Conclusion
For now, to create scrollbar styles, you still need to use both approaches — if cross-browser compatibility is important to you. However, when adding pseudo-elements, keep in mind that their use may soon become obsolete. According to modern standards, this is not the best solution for styling scrollbars. But aside from standards, there’s also the practical need, which forces us to make compromises.
16 January 2025 · 5 min to read
Do you have questions,
comments, or concerns?
Our professionals are available to assist you at any moment,
whether you need help or are just unsure of where to start.
whether you need help or are just unsure of where to start.
