Category: Expert Guide
What is the purpose of the spread radius in box-shadow?
# The Ultimate Authoritative Guide to the Spread Radius in `box-shadow`
## Executive Summary
As a Cloud Solutions Architect, I understand the critical role of visual design and user experience in the success of any digital product. The `box-shadow` CSS property is a powerful tool that, when wielded effectively, can dramatically enhance the aesthetic appeal and perceived depth of elements on a webpage. While commonly understood for its blur radius and offset, a fundamental yet often underappreciated component of `box-shadow` is its **spread radius**. This comprehensive guide delves deep into the purpose and impact of the spread radius, demystifying its function and illustrating its versatile applications. We will explore its technical underpinnings, provide practical scenarios demonstrating its utility, examine global industry standards, offer a multi-language code vault, and peer into its future outlook. By mastering the spread radius, developers and designers can elevate their creations from functional to truly captivating.
## Deep Technical Analysis: Unpacking the Spread Radius
The `box-shadow` CSS property allows you to apply one or more shadow effects to an element. Its syntax is as follows:
css
box-shadow: [inset] ;
Let's break down each component relevant to our discussion:
* **`inset`**: An optional keyword that, if present, changes the shadow from an outer shadow to an inner shadow.
* **``**: The horizontal offset of the shadow. A positive value moves it to the right, a negative value to the left.
* **``**: The vertical offset of the shadow. A positive value moves it downwards, a negative value upwards.
* **``**: The optional blur radius. A larger value means more blur, making the shadow softer and larger. A value of `0` means the shadow is sharp.
* **``**: The optional spread radius. This is the core of our investigation.
* **``**: The color of the shadow.
### The Core Function of the Spread Radius
The **spread radius** controls how far the shadow expands outward from the element's bounding box. Think of it as a scaling factor applied to the shadow *before* any blurring occurs.
* **Positive Spread Radius (`> 0`)**: When you provide a positive value for the spread radius, the shadow’s perimeter expands outwards. This effectively makes the shadow larger than the element itself. The blur then applies to this enlarged shadow. This is crucial for creating the illusion of the shadow being cast by a larger object, or for making the shadow appear more pronounced and detached from the element.
* **Zero Spread Radius (`= 0`)**: This is the default value if no spread radius is specified. In this case, the shadow's size is identical to the element's bounding box. The blur is then applied directly to this shadow.
* **Negative Spread Radius (`< 0`)**: A negative spread radius causes the shadow’s perimeter to shrink inwards. This effectively makes the shadow smaller than the element's bounding box. The blur is then applied to this contracted shadow. This can be useful for creating subtle inner glows or shadows that appear to be contained within the element's boundaries.
### Visualizing the Spread Radius
Imagine an element with a `width` of 100px and `height` of 100px.
1. **No Spread Radius (`spread-radius: 0`)**: The shadow starts with a 100px x 100px dimension. If the `blur-radius` is 10px, the shadow will extend 10px beyond the element's edges in all directions due to the blur.
2. **Positive Spread Radius (`spread-radius: 20px`)**: The shadow's initial dimension becomes 100px + (2 * 20px) = 140px x 140px (because the spread applies in both positive and negative directions of the x and y axes). The blur is then applied to this larger 140px x 140px shadow. This results in a shadow that is visibly larger and potentially more impactful than the element itself.
3. **Negative Spread Radius (`spread-radius: -10px`)**: The shadow's initial dimension becomes 100px + (2 * -10px) = 80px x 80px. The blur is then applied to this smaller 80px x 80px shadow. This can create a more contained or nuanced shadow effect.
### Relationship with Blur Radius
It is vital to understand that the spread radius and blur radius work in tandem. The spread radius dictates the initial size of the shadow *before* the blur is applied. A large spread radius combined with a small blur radius will create a sharp, large shadow. Conversely, a small spread radius with a large blur radius will result in a soft, diffused shadow that might appear smaller than the element if the spread is negative.
### Underlying Rendering Process (Conceptual)
While the exact implementation can vary between browser rendering engines (e.g., Blink, Gecko, WebKit), conceptually, the browser likely performs the following steps:
1. **Determine the Element's Bounding Box**: This is the rectangular area occupied by the element.
2. **Apply `inset` (if present)**: If `inset` is used, the shadow is effectively drawn inside the element's box.
3. **Scale the Shadow Shape by the `spread-radius`**: The initial shape of the shadow (a rectangle matching the element's box or a slightly adjusted rectangle due to `inset`) is scaled outwards or inwards by the `spread-radius`. A positive spread expands the rectangle, a negative spread contracts it.
4. **Apply the `blur-radius`**: A Gaussian blur filter (or a similar approximation) is applied to this scaled shadow shape. The larger the blur radius, the more diffused and softer the edges of the shadow become.
5. **Apply `offset-x` and `offset-y`**: The blurred shadow is then translated by the specified offset values.
6. **Apply `color`**: The shadow is rendered with the specified color, often with an alpha channel for transparency.
### Performance Considerations
While `box-shadow` is generally well-optimized, excessively large or complex shadows (especially with numerous elements casting shadows) can impact performance, particularly on less powerful devices. The spread radius, by influencing the initial size of the shadow before blurring, can contribute to this. Developers should be mindful of these factors and test their implementations across various devices.
## 5+ Practical Scenarios for the Spread Radius
The spread radius is not merely an aesthetic flourish; it's a functional tool that can significantly impact the user's perception of an interface. Here are several practical scenarios where understanding and utilizing the spread radius is crucial:
### Scenario 1: Creating a Distinct "Lifted" Effect for Cards
This is perhaps the most common and effective use of the spread radius. To make a card element appear as if it's floating above the background, you need a shadow that is larger than the card itself.
**Purpose of Spread Radius:** To create a shadow that extends beyond the card's edges, simulating light scattering and making the card appear detached from the surface.
**CSS Example:**
css
.card {
width: 300px;
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* Default for lift */
}
/* Enhancing the lifted effect with spread */
.card.elevated {
box-shadow: 0 10px 30px 5px rgba(0, 0, 0, 0.2); /* offset-y: 10px, blur: 30px, spread: 5px */
}
**Explanation:** The `spread-radius: 5px` in `.card.elevated` makes the shadow 5px larger in every direction *before* blurring. This creates a more substantial shadow that clearly indicates the card is elevated. Without a positive spread, the shadow would hug the card's edges more closely, reducing the perception of depth.
### Scenario 2: Mimicking Soft Light and Glows
The spread radius can be used to create diffused glow effects around elements, mimicking how light might softly illuminate an object.
**Purpose of Spread Radius:** To expand the shadow's area, allowing the blur to create a larger, softer halo effect.
**CSS Example:**
css
.glowing-button {
display: inline-block;
padding: 15px 30px;
background-color: #007bff;
color: white;
border-radius: 50px;
font-size: 1.2em;
cursor: pointer;
border: none;
/* Base shadow */
box-shadow: 0 0 10px rgba(0, 123, 255, 0.7);
}
/* Adding a more pronounced glow */
.glowing-button.intense-glow {
box-shadow: 0 0 25px 10px rgba(0, 123, 255, 0.9); /* offset-y: 0, blur: 25px, spread: 10px */
}
**Explanation:** The `spread-radius: 10px` in `.glowing-button.intense-glow` expands the shadow significantly before applying the blur. This results in a wider, more diffused glow that emanates from the button, making it appear more luminous.
### Scenario 3: Creating Subtle "Pressed" or "Inset" Effects
While the `inset` keyword is the primary way to create inner shadows, the spread radius can be used in conjunction with `inset` to refine these effects. A negative spread radius with an `inset` shadow can create a more contained, subtle depression.
**Purpose of Spread Radius:** To control the size and diffusion of an `inset` shadow, making it appear more like a subtle indentation rather than a harsh inner border.
**CSS Example:**
css
.pressed-button {
display: inline-block;
padding: 15px 30px;
background-color: #28a745;
color: white;
border-radius: 8px;
font-size: 1.1em;
cursor: pointer;
border: none;
box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.2); /* Default inset */
}
/* Refined pressed effect with negative spread */
.pressed-button.subtle-press {
box-shadow: inset 0 3px 8px -3px rgba(0, 0, 0, 0.3); /* offset-y: 3px, blur: 8px, spread: -3px */
}
**Explanation:** In `.pressed-button.subtle-press`, the `spread-radius: -3px` shrinks the `inset` shadow inwards before the blur. This creates a softer, more subtle illusion of a pressed surface, as the shadow doesn't extend as far into the button's content area.
### Scenario 4: Faking Depth in 2D Illustrations or UI Elements
In certain design contexts, especially in flat or minimalist UIs, you might want to simulate a slight 3D effect without resorting to complex 3D modeling. The spread radius can help achieve this by casting a controlled shadow.
**Purpose of Spread Radius:** To define the perceived size of the light source casting the shadow, thus controlling how far the shadow extends from the object and influencing the perceived depth.
**CSS Example:**
css
.icon-container {
display: inline-block;
padding: 10px;
background-color: #f8f9fa;
border-radius: 10px;
/* Basic shadow for depth */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
/* Adding more pronounced depth with spread */
.icon-container.deep-icon {
box-shadow: 0 8px 25px 8px rgba(0, 0, 0, 0.12); /* offset-y: 8px, blur: 25px, spread: 8px */
}
**Explanation:** The `spread-radius: 8px` in `.icon-container.deep-icon` makes the shadow significantly larger than the icon container. This amplifies the perceived distance between the icon and its background, giving it a more pronounced 3D feel.
### Scenario 5: Creating Outline-like Effects (with caution)
While not its primary purpose, a large spread radius with a very small or zero blur can create an effect that resembles an outline. This should be used with caution as it can be computationally more expensive than a `border` property.
**Purpose of Spread Radius:** To expand the shadow's area to create a border-like appearance, with the blur controlling the sharpness of this "outline."
**CSS Example:**
);
}
// Spanish: Componente React con box-shadow en línea
function TarjetaElevada() {
const estiloTarjeta = {
width: '250px',
padding: '20px',
backgroundColor: 'white',
borderRadius: '8px',
boxShadow: '0 12px 24px 8px rgba(0, 0, 0, 0.2)',
};
return (
);
}
**CSS Modules:**
Create a `Card.module.css` file:
css
/* Card.module.css */
.card {
width: 250px;
padding: 20px;
background-color: white;
border-radius: 8px;
/* offset-y: 12px, blur: 24px, spread: 8px */
box-shadow: 0 12px 24px 8px rgba(0, 0, 0, 0.2);
}
In your React component:
jsx
// English: React component using CSS Modules
import styles from './Card.module.css';
function LiftedCard() {
return (
);
}
// Spanish: Componente React usando Módulos CSS
import estilos from './Card.module.css'; // Assuming translated CSS module if needed
function TarjetaElevada() {
return (
);
}
### 4. Vue.js (with Inline Styles or `
### 5. Angular (with Inline Styles or Component Styles)
Angular components can utilize inline styles or their own CSS files.
**Inline Styles:**
typescript
// English: Angular component with inline box-shadow
import { Component } from '@angular/core';
@Component({
selector: 'app-lifted-card',
template: `
`,
styles: [`
div {
width: 250px;
padding: 20px;
background-color: white;
border-radius: 8px;
}
`]
})
export class LiftedCardComponent {
// offset-y: 12px, blur: 24px, spread: 8px
cardShadow: string = '0 12px 24px 8px rgba(0, 0, 0, 0.2)';
}
// Spanish: Componente Angular con box-shadow en línea
import { Component } from '@angular/core';
@Component({
selector: 'app-tarjeta-elevada',
template: `
`,
styles: [`
div {
width: 250px;
padding: 20px;
background-color: white;
border-radius: 8px;
}
`]
})
export class TarjetaElevadaComponent {
sombraTarjeta: string = '0 12px 24px 8px rgba(0, 0, 0, 0.2)';
}
**Component Styles:**
`lifted-card.component.css`
css
/* lifted-card.component.css */
div {
width: 250px;
padding: 20px;
background-color: white;
border-radius: 8px;
/* offset-y: 12px, blur: 24px, spread: 8px */
box-shadow: 0 12px 24px 8px rgba(0, 0, 0, 0.2);
}
`lifted-card.component.ts`
typescript
// lifted-card.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-lifted-card',
templateUrl: './lifted-card.component.html',
styleUrls: ['./lifted-card.component.css']
})
export class LiftedCardComponent { }
This multi-language vault highlights that the underlying CSS property `box-shadow` and its parameters, including the spread radius, are consistent across different front-end development paradigms.
## Future Outlook: Evolution of Shadows and Depth
The way we create and perceive depth and shadows in digital interfaces is constantly evolving. As a Cloud Solutions Architect, I see several trends that will continue to influence the use of `box-shadow` and its spread radius:
### 1. Advanced Shading and Lighting Models
While `box-shadow` provides a simplified lighting model, future advancements might bring more sophisticated shading capabilities directly into CSS or through libraries. This could involve:
* **Physically Based Rendering (PBR) Principles**: Concepts from 3D rendering, like more realistic light scattering and material properties, might influence how shadows are generated and perceived. This could lead to more nuanced control over shadow falloff and color, where the spread radius would play a role in simulating different surface properties.
* **Dynamic Light Sources**: The ability to define multiple, dynamic light sources in a 2D context could allow for more complex and realistic shadow casting, where the spread radius would be a parameter of each light source rather than a global property of the shadow.
### 2. Integration with Motion and Animation
The spread radius, combined with animation, offers significant potential for creating dynamic and engaging user experiences.
* **Interactive Shadows**: Shadows that react to user interaction (e.g., mouse movement, scrolling) can provide intuitive feedback. A larger spread radius could be used to create a more pronounced "ripple" effect or a shadow that dynamically expands and contracts.
* **Animated Depth**: As interfaces become more animated, shadows will play a crucial role in conveying motion and depth. Animating the `spread-radius` along with other `box-shadow` parameters can create compelling visual transitions.
### 3. Performance Optimization for Shadows
As `box-shadow` and its parameters become more complex, browser vendors will continue to optimize their rendering engines.
* **Hardware Acceleration**: Further leveraging GPU acceleration for shadow rendering will be crucial to ensure smooth performance, especially with complex shadows involving large spread and blur radii.
* **Intelligent Shadow Culling**: Browsers might become more adept at intelligently culling or simplifying shadows that are not in the user's immediate viewport or are occluded by other elements.
### 4. The Rise of "Neumorphism" and "Glassmorphism"
These emerging design trends often rely on subtle shadow play to achieve their distinctive looks.
* **Neumorphism**: This style uses extruded shadows (both light and dark) to create a soft, plastic-like appearance. The `spread-radius` is critical here for controlling the size and diffusion of these extruded shadows, making elements appear to blend seamlessly with the background.
* **Glassmorphism**: This style uses blurred backgrounds and subtle shadows to create a frosted-glass effect. While the blur is primary, the spread radius can be used to define the subtle halo or edge effect that enhances the glass-like transparency.
### 5. Accessibility Considerations
As digital inclusivity becomes more important, the impact of shadows on accessibility will be further explored.
* **Contrast and Readability**: Overly strong shadows, especially with large spread radii, can sometimes reduce contrast between text and its background, impacting readability for users with visual impairments. Future accessibility guidelines might offer more specific recommendations on shadow usage.
* **Reduced Motion**: For users who prefer reduced motion, the ability to disable or simplify shadows will be crucial, ensuring that the core functionality of the interface remains accessible.
The spread radius within `box-shadow` is more than just a numerical parameter; it's a fundamental control for shaping perceived depth, light, and form in digital interfaces. As design continues to evolve towards more immersive and interactive experiences, a deep understanding of such properties will remain essential for any aspiring Cloud Solutions Architect and front-end developer.
Card Title
This is the content of the card. It appears to be floating.
Content
css
.bordered-element {
width: 200px;
padding: 20px;
background-color: #e9ecef;
color: #495057;
border-radius: 5px;
/* Using box-shadow as an outline */
box-shadow: 0 0 0 2px #6c757d; /* offset-y: 0, blur: 0, spread: 2px */
}
/* A softer, more diffused outline */
.bordered-element.soft-outline {
box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.6); /* offset-y: 0, blur: 0, spread: 3px */
}
**Explanation:** In `.bordered-element.soft-outline`, `blur-radius` is `0` and `spread-radius` is `3px`. This creates a sharp, 3-pixel-wide "outline" around the element. The color of this "outline" is dictated by the `color` argument of the `box-shadow` property. This is distinct from a regular `border` because it's a shadow effect and can be animated or modified similarly to other shadows. However, for simple static outlines, `border` is generally more performant.
### Scenario 6: Enhancing Visual Hierarchy with Subtle Shadows
In complex interfaces, subtle shadows can help differentiate elements and guide the user's eye. The spread radius allows for fine-tuning the intensity and reach of these shadows.
**Purpose of Spread Radius:** To control the size and softness of shadows that subtly separate different layers of content, thereby enhancing visual hierarchy without being overly distracting.
**CSS Example:**
...
...
...
css
.app-header {
background-color: #ffffff;
padding: 15px;
border-bottom: 1px solid #dee2e6;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08); /* offset-y: 2px, blur: 5px, spread: 0 */
}
.app-content {
background-color: #ffffff;
padding: 20px;
/* Slightly more pronounced separation for main content */
box-shadow: 0 4px 10px 2px rgba(0, 0, 0, 0.1); /* offset-y: 4px, blur: 10px, spread: 2px */
}
.app-footer {
background-color: #f8f9fa;
padding: 15px;
border-top: 1px solid #dee2e6;
box-shadow: 0 -2px 5px 0 rgba(0, 0, 0, 0.07); /* offset-y: -2px, blur: 5px, spread: 0 */
}
**Explanation:** In `.app-content`, the `spread-radius: 2px` makes the shadow slightly larger than the content area. This, combined with a moderate `blur-radius`, creates a subtle but effective separation between the main content and the header/footer, reinforcing the visual hierarchy.
## Global Industry Standards and Best Practices
While there isn't a formal "W3C standard" for the specific application of `box-shadow` spread radius values, industry best practices have emerged, driven by design system principles and user experience research.
### Material Design (Google)
Material Design, a comprehensive design language developed by Google, heavily utilizes shadows to provide visual cues about the depth and interactivity of elements. Their approach often involves:
* **Layering and Elevation**: Shadows are used to indicate the "elevation" of components, with higher elevations casting larger, softer shadows. This is achieved by increasing `offset-y`, `blur-radius`, and crucially, the `spread-radius`.
* **Subtle Differentiation**: Even for elements that aren't significantly "lifted," subtle shadows with minimal spread are used to differentiate them from the background, providing a sense of separation without being jarring.
* **Consistency**: Material Design emphasizes consistent shadow application across an entire application to create a predictable and intuitive user experience.
**Typical values in Material Design for lifted elements might include:**
* `box-shadow: 0 2px 4px 0 rgba(0,0,0,.12);` (subtle lift)
* `box-shadow: 0 4px 8px 0 rgba(0,0,0,.2);` (medium lift)
* `box-shadow: 0 6px 12px 0 rgba(0,0,0,.24);` (strong lift)
Notice how the `spread-radius` is often implicitly present or small, allowing the `blur-radius` to dominate the shadow's appearance for soft, diffused effects that align with their design philosophy. However, for more pronounced "lift," a positive spread is employed.
### Human Interface Guidelines (Apple)
Apple's Human Interface Guidelines (HIG) also leverage depth and shadow, though with a slightly different aesthetic than Material Design. While often favoring flatter designs, they still use shadows for subtle layering and to indicate interactivity.
* **Subtle and Realistic Shadows**: Apple's approach tends to favor more subtle and realistic shadows, aiming to mimic natural light. This often means smaller `spread-radius` values and a focus on the `blur-radius` to create soft, diffused shadows.
* **Focus on Layers**: Shadows are used to help distinguish between different layers of content, guiding the user's eye through the interface.
### Design System Principles
Many modern design systems (e.g., those used by companies like Atlassian, Salesforce, etc.) incorporate a defined set of shadow styles. These systems typically provide:
* **Predefined Shadow Tokens**: Instead of directly writing `box-shadow` values, designers and developers use predefined "tokens" (e.g., `shadow-sm`, `shadow-md`, `shadow-lg`). These tokens encapsulate specific `box-shadow` values, including managed spread radii.
* **Purpose-Driven Shadows**: Each shadow token is designed for a specific purpose (e.g., "elevation-1," "highlight-card"). This ensures consistency and predictability.
**Example of a Design System Shadow Token Structure (Conceptual):**
json
{
"shadows": {
"elevation-1": "0 1px 3px rgba(0,0,0,.12)",
"elevation-2": "0 2px 6px rgba(0,0,0,.16)",
"elevation-3": "0 4px 12px rgba(0,0,0,.24)",
"card-lift": "0 8px 20px 5px rgba(0,0,0,.1)", // Example with explicit spread
"inset-subtle": "inset 0 1px 2px rgba(0,0,0,.07)"
}
}
In such systems, the `spread-radius` is a controlled variable, often adjusted alongside `blur-radius` and `offset-y` to achieve the desired visual effect for a specific elevation level or UI component.
### Key Takeaways for Industry Standards:
* **Consistency is Paramount**: Regardless of the aesthetic, consistent shadow application is key to a good user experience.
* **Purposeful Shadows**: Shadows should serve a clear design purpose, whether it's indicating elevation, separation, or interactivity.
* **Controlled Values**: Design systems often define specific shadow values, including spread radii, to ensure uniformity.
* **Balance with Blur**: The spread radius is rarely used in isolation. It works in conjunction with the blur radius to create nuanced effects.
## Multi-language Code Vault: `box-shadow` with Spread Radius
To demonstrate the universality of the `box-shadow` property and the concept of the spread radius, here's how it's applied in various programming contexts. While `box-shadow` is a CSS property, its usage is inherent in front-end development across different frameworks and languages.
### 1. Pure CSS
As demonstrated throughout this guide, pure CSS is the fundamental way to implement `box-shadow`.
css
/* Spanish: Sombra con radio de expansión */
.elemento-con-sombra-expandida {
width: 150px;
height: 100px;
background-color: lightblue;
margin: 20px;
/* offset-x, offset-y, blur, spread, color */
box-shadow: 5px 5px 15px 10px rgba(0, 0, 0, 0.3); /* +10px spread */
}
/* French: Ombre avec rayon d'étalement */
.element-avec-ombre-etalee {
width: 150px;
height: 100px;
background-color: lightcoral;
margin: 20px;
/* offset-x, offset-y, blur, spread, color */
box-shadow: -5px -5px 10px -3px rgba(0, 0, 0, 0.2); /* -3px spread */
}
/* German: Schatten mit Ausdehnungsradius */
.element-mit-ausgedehntem-schatten {
width: 150px;
height: 100px;
background-color: lightgreen;
margin: 20px;
/* offset-x, offset-y, blur, spread, color */
box-shadow: 0 0 20px 8px rgba(0, 0, 0, 0.4); /* +8px spread */
}
### 2. JavaScript (with Inline Styles)
While not recommended for large-scale styling, JavaScript can be used to dynamically apply `box-shadow` properties.
javascript
// English: JavaScript applying box-shadow with spread radius
const element = document.getElementById('myElement');
if (element) {
// Applying a shadow that appears to lift the element
element.style.boxShadow = '0 10px 20px 5px rgba(0, 0, 0, 0.15)'; // offset-y: 10px, blur: 20px, spread: 5px
}
// Spanish: JavaScript aplicando box-shadow con radio de expansión
const elemento = document.getElementById('miElemento');
if (elemento) {
// Aplicando una sombra que hace que el elemento parezca levantado
elemento.style.boxShadow = '0 10px 20px 5px rgba(0, 0, 0, 0.15)';
}
### 3. React (JSX with Inline Styles or CSS Modules)
In React, you can apply styles directly within JSX or use CSS Modules for better organization.
**Inline Styles:**
jsx
// English: React component with inline box-shadow
function LiftedCard() {
const cardStyle = {
width: '250px',
padding: '20px',
backgroundColor: 'white',
borderRadius: '8px',
boxShadow: '0 12px 24px 8px rgba(0, 0, 0, 0.2)', // offset-y: 12px, blur: 24px, spread: 8px
};
return (
Card Title
This card has a pronounced lifted effect.
Título de la Tarjeta
Esta tarjeta tiene un efecto de elevación pronunciado.
Card Title
This card has a pronounced lifted effect.
Título de la Tarjeta
Esta tarjeta tiene un efecto de elevación pronunciado.
Card Title
This card has a pronounced lifted effect.
Título de la Tarjeta
Esta tarjeta tiene un efecto de elevación pronunciado.