A look at 5 useful CSS tips and tricks, like single-colour gradients, the user-select property, masks, escaping scroll containers, and more.

🔗 Links
✅ Browser support for single color gradients: https://caniuse.com/mdn-css_types_gradient_conic-gradient_single_color_stop
✅ Video on @property: https://youtu.be/U8NykwZNbGs
✅ Salma’s post on creating a copy code button: https://whitep4nth3r.com/blog/how-to-build-a-copy-code-snippet-button/#the-html-and-some-preliminary-javascript-to-build-the-html
✅ https://css-generators.com/

⌚ Timestamps
00:00 - Introduction
00:35 - Single-colour gradients
05:25 - Second use case for single-colour gradients
06:50 - user-select
10:12 - the all property
14:24 - masks
17:40 - taking advantage of containing blocks to escape scroll containers
23:20 - anchor-positioning

#css

✉ Keep up to date with everything I'm up to  https://www.kevinpowell.co/newsletter
💬 Come hang out with other devs in my Discord Community https://discord.gg/nTYCvrK
⭐ Are you a beginner? HTML & CSS for absolute beginners is for you: https://learn.kevinpowell.co
🎓 Start writing CSS with confidence with CSS Demystified: [https://cssdemystified.com](https://cssdemystified.com/)
🚀 Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/

---

Help support my channel
👨‍🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://cottonbureau.com/people/kevin-powell
💖 Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: https://youtube.com/@KevinPowell/join

---

🧑‍💻 My editor: VS Code - https://code.visualstudio.com/

🌈 My theme: One Dark Pro Var Night
🔤 My font: Cascadia Code

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel:

Bluesky: https://bsky.app/profile/kevinpowell.co
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Kevin Powell

Discover five CSS features that can enhance your code by reducing JavaScript reliance and solving common design problems efficiently. Learn to utilize single color gradients for borders, effective use of user select, mastering the 'all' property for style resets, innovating with CSS masks, and employing anchor positioning for consistent element placement.

5 CSS tips every developer should know

Here is a TLDR of the five CSS tricks from the video, complete with concrete code examples for each.
<h3>1. Single-Color Gradients for Borders</h3>
Instead of using the <code>border-image</code> property, which has limitations with rounded corners, you can create a gradient border using a transparent border and a <code>background-image</code> with <code>background-clip</code>. This allows for more flexibility, including the use of <code>border-radius</code>.
Example:
<pre><code class="language-html">&lt;div class=&quot;gradient-border&quot;&gt;
 This div has a gradient border with rounded corners.
&lt;/div&gt;
</code></pre>
<pre><code class="language-css">.gradient-border {
 border: 5px solid transparent;
 border-radius: 15px;
 background-image: linear-gradient(to right, #ff0000, #ffff00),
 linear-gradient(to right, #00ff00, #0000ff);
 background-clip: padding-box, border-box;
 background-origin: padding-box, border-box;
}
</code></pre>
<h3>2. <code>user-select</code> Property</h3>
The <code>user-select</code> property controls whether a user can select text within an element. Setting it to <code>none</code> can be useful for decorative text or custom UI elements where text selection would be distracting. Conversely, <code>all</code> allows the user to select the entire content of an element with a single click, which is ideal for code snippets or API keys.
Example:
<pre><code class="language-html">&lt;p class=&quot;no-select&quot;&gt;You can&#x27;t select this text.&lt;/p&gt;
&lt;pre class=&quot;select-all&quot;&gt;&lt;code&gt;npm install your-package&lt;/code&gt;&lt;/pre&gt;
</code></pre>
<pre><code class="language-css">.no-select {
 user-select: none; /* or -webkit-user-select, -moz-user-select */
}

.select-all {
 user-select: all; /* or -webkit-user-select, -moz-user-select */
}
</code></pre>
<h3>3. <code>all: revert</code></h3>
The <code>all: revert;</code> declaration is a powerful tool for resetting an element’s styles. It reverts all properties of an element to the browser’s default styles, ignoring any styles inherited from parent elements or defined in author stylesheets. This is particularly useful when you want to isolate a component’s styling from its surroundings.
Example:
Imagine you have global styles affecting all <code>button</code> elements, but you want one specific button to have the default browser appearance.
<pre><code class="language-html">&lt;button class=&quot;fancy-button&quot;&gt;I&#x27;m a styled button&lt;/button&gt;
&lt;button class=&quot;reverted-button&quot;&gt;I&#x27;m a default button&lt;/button&gt;
</code></pre>
<pre><code class="language-css">/* Global button styles */
button {
 background-color: #007bff;
 color: white;
 border: none;
 padding: 10px 20px;
 border-radius: 5px;
}

/* Revert the styles for a specific button */
.reverted-button {
 all: revert;
}
</code></pre>
<h3>4. CSS Masks for Fading Effects</h3>
CSS <code>mask-image</code> allows you to use an image or a gradient to determine which parts of an element are visible. A common use case is to create a fading effect at the bottom of a scrollable container, indicating that there is more content to be seen.
Example:
This example creates a fade-out effect at the bottom of a <code>div</code>.
<pre><code class="language-html">&lt;div class=&quot;fade-out&quot;&gt;
 &lt;p&gt;Lots of content that will scroll...&lt;/p&gt;
 &lt;p&gt;...&lt;/p&gt;
 &lt;p&gt;...&lt;/p&gt;
&lt;/div&gt;
</code></pre>
<pre><code class="language-css">.fade-out {
 height: 200px;
 overflow-y: auto;
 mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
 -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}
</code></pre>
<h3>5. Nested Overflow for Scrollable Elements</h3>
A common layout challenge is having a scrollable element where some of its children need to “break out” and be visible outside the scrolling container (like a close button on a modal). The solution is to nest the scrollable content within another element. The outer element handles the visible overflow, while the inner element manages the scrolling.
Example:
In this modal example, the content scrolls, but the close button remains visible and fixed relative to the modal itself.
<pre><code class="language-html">&lt;div class=&quot;modal&quot;&gt;
 &lt;div class=&quot;modal-content&quot;&gt;
 &lt;/div&gt;
 &lt;button class=&quot;close-button&quot;&gt;X&lt;/button&gt;
&lt;/div&gt;
</code></pre>
<pre><code class="language-css">.modal {
 position: relative;
 width: 300px;
 height: 200px;
 overflow: visible; /* Allows the button to be outside */
 border: 1px solid black;
}

.modal-content {
 height: 100%;
 overflow-y: scroll; /* Makes this part scrollable */
}

.close-button {
 position: absolute;
 top: -10px;
 right: -10px;
}
</code></pre>