CSS Tutorial

CSS Text Effects

Last modified on: October 30, 2024

<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="c0c97a57-f83d-4d3b-8bf2-2938642bc63d" data-message-model-slug="gpt-4o">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<h3>CSS Text Effects</h3>
<p>CSS text effects allow you to style text in creative ways, making your website more visually engaging. You can apply effects like shadows, transformations, text decorations, gradients, and animations to add impact to your typography.</p>
<hr />
<h3>1. Text Shadow</h3>
<p>The <code>text-shadow</code> property adds shadow to text, creating a 3D-like effect or a glowing look, depending on color and blur settings.</p>
<p><strong>Syntax</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css
<pre class="language-markup"><code>letter-spacing: 2px;
text-shadow: 1px 1px 2px #ccc;</code></pre>
</div>
</div>
<p><strong>Example</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css
<pre class="language-markup"><code>text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);</code></pre>
</div>
</div>
<hr />
<h3>2. Text Outline</h3>
<p>Text outlines give a stroke effect to text using a shadow with no blur applied multiple times.</p>
<p><strong>Example</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css
<pre class="language-markup"><code>text-shadow: 1px 1px 0 #000, -1px -1px 0 #000;</code></pre>
</div>
</div>
<p>This creates a black outline around each letter by layering shadows in multiple directions.</p>
<hr />
<h3>3. Gradient Text</h3>
<p>You can achieve gradient-colored text by applying a <code>linear-gradient</code> background and setting <code>-webkit-background-clip: text</code> to clip the background to the text only.</p>
<p><strong>Example</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css
<pre class="language-markup"><code>background: linear-gradient(45deg, #ff0066, #ffcc00);
-webkit-background-clip: text;
color: transparent;</code></pre>
</div>
</div>
<p>This fills the text with a gradient color that follows the specified direction and colors.</p>
<hr />
<h3>4. Animated Text (Keyframes)</h3>
<p>CSS animations allow you to create moving text effects, such as flashing, sliding, or bouncing text.</p>
<p><strong>Example</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css
<pre class="language-markup"><code>@keyframes flash {
    0% { color: #ff0066; }
    50% { color: #ffcc00; }
    100% { color: #ff0066; }
}

.flashing-text {
    animation: flash 1s infinite;
}
</code></pre>
</div>
</div>
<p>In this example, text changes color every second, creating a flashing effect.</p>
<hr />
<h3>5. Transform Text</h3>
<p>The <code>transform</code> property rotates, scales, skews, or translates text, creating dynamic effects.</p>
<p><strong>Example</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css
<pre class="language-markup"><code>transform: rotate(-5deg);</code></pre>
</div>
</div>
<p>This tilts the text slightly to give a unique appearance.</p>
<hr />
<h3>6. Text Spacing and Letterpress</h3>
<p>The <code>letter-spacing</code> property adjusts the space between characters, and combining it with <code>text-shadow</code> can create a letterpress (pressed) effect.</p>
<p><strong>Example</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css
<pre class="language-markup"><code>letter-spacing: 2px;
text-shadow: 1px 1px 2px #ccc;</code></pre>
<code class="!whitespace-pre hljs language-css">
</code></div>
</div>
<p>This creates a subtle shadow and wider spacing, making the text more readable and refined.</p>
<hr />
<h3>CSS Text Effects Examples</h3>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;CSS Text Effects&lt;/title&gt;
    &lt;style&gt;
        .text-shadow {
            font-size: 24px;
            text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
            color: #333;
        }
        .gradient-text {
            font-size: 24px;
            background: linear-gradient(45deg, #ff0066, #ffcc00);
            -webkit-background-clip: text;
            color: transparent;
        }
        .flashing-text {
            font-size: 24px;
            animation: flash 1s infinite;
        }
        .transform-text {
            font-size: 24px;
            transform: rotate(-5deg);
        }
        @keyframes flash {
            0% { color: #ff0066; }
            50% { color: #ffcc00; }
            100% { color: #ff0066; }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;p class="text-shadow"&gt;Text Shadow Effect&lt;/p&gt;
    &lt;p class="gradient-text"&gt;Gradient Text Effect&lt;/p&gt;
    &lt;p class="flashing-text"&gt;Flashing Text Effect&lt;/p&gt;
    &lt;p class="transform-text"&gt;Rotated Text Effect&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<code class="!whitespace-pre hljs language-html">
</code></div>
</div>
<h3>Tips for Using CSS Text Effects</h3>
<ul>
<li><strong>Keep It Readable</strong>: Make sure effects don&rsquo;t overpower text readability.</li>
<li><strong>Combine Sparingly</strong>: Using multiple effects can create eye-catching designs, but avoid too many for clean, professional looks.</li>
<li><strong>Use Gradients and Animations Carefully</strong>: Gradients and animations can draw attention but may feel distracting if overused.</li>
</ul>
<p>CSS text effects make typography engaging and attractive, perfect for headers, call-to-action texts, and highlights.</p>
</div>
</div>
</div>
</div>

Web Technology View More