CSS Variables (Custom properties): reusable values across stylesheets
CSS Variables, also known as custom properties, allow developers to store reusable values in a stylesheet, making CSS easier to maintain, update, and scale across projects.
What Are CSS Variables?
CSS variables are defined using the — prefix and can hold values like colors, font sizes, spacing, and more. They follow the principle of “define once, use everywhere.”
Syntax:
:root {
–main-color: #3498db;
–padding-size: 1rem;
}
:root targets the highest level of the document (usually the <html>), ensuring global access to the variables.
Using CSS Variables
You use the var() function to apply the variable’s value:
.button {
background-color: var(–main-color);
padding: var(–padding-size);
}
- This allows the .button class to use shared styling values defined in one place.
Benefits of Using CSS Variables
| Benefit | Description |
|---|---|
| Reusability | Define values once, apply them across many selectors |
| Easy Theming | Quickly switch colors, fonts, or sizes for different themes or modes |
| Maintainability | Update a single variable to reflect changes throughout your stylesheet |
| Dynamic JavaScript Access | Modify styles at runtime via style.setProperty() |
CSS Variable Scope
Variables can be declared:
- Globally using :root
- Locally inside a selector (only available within that selector’s scope)
Example:
.card {
–card-padding: 2rem;
padding: var(–card-padding);
}
- Scoped variables are useful when you need component-specific customizations.
Fallback Values
You can specify a fallback if the variable isn’t defined:
color: var(–secondary-color, #ccc);
- Ensures a default is used if –secondary-color isn’t available.
JavaScript Integration
You can dynamically update variables via JavaScript:
document.documentElement.style.setProperty(‘–main-color’, ‘#e74c3c’);
- Enables interactive theming and real-time styling changes.
Example: Theme Switcher with Variables
:root {
–bg-color: white;
–text-color: black;
}
.dark-mode {
–bg-color: #1e1e1e;
–text-color: #f1f1f1;
}
body {
background-color: var(–bg-color);
color: var(–text-color);
}
- Add/remove .dark-mode on <body> to switch themes.
Summary:
| Feature | Value |
|---|---|
| Define | –custom-name: value; |
| Use | var(–custom-name) |
| Scope | Global (:root) or Local |
| Dynamic Access | JavaScript integration possible |
Using CSS filters (blur, grayscale, contrast) for visual effects
CSS Filters provide a powerful way to apply visual effects like blurring, grayscale, brightness, and contrast directly to HTML elements—most commonly images, videos, or background elements—without needing graphic editing tools.
What Are CSS Filters?
CSS filters use functions such as blur(), grayscale(), contrast(), and others to modify the appearance of an element visually in the browser.
img {
filter: grayscale(100%);
}
- The filter property can be applied to images, backgrounds, text shadows, and even entire containers.
Common CSS Filter Functions
1. blur(px)
Applies a Gaussian blur to the element.
img {
filter: blur(5px);
}
- Higher values create a stronger blur.
2. grayscale(%)
Converts the image to black and white.
- 0% = original
- 100% = full grayscale
img {
filter: grayscale(100%);
}
3. contrast(%)
Adjusts the contrast.
- 100% = original
- <100% = less contrast
- >100% = more contrast
img {
filter: contrast(150%);
}
4. Other Useful Filters
- brightness(%) – Controls light intensity
- invert(%) – Inverts colors
- sepia(%) – Applies a warm, vintage tone
- saturate(%) – Boosts or reduces color intensity
- hue-rotate(deg) – Rotates all hues in the color wheel
Combining Multiple Filters
You can chain filters together by separating them with spaces:
img {
filter: grayscale(100%) blur(3px) brightness(1.2);
}
- Filters are applied in order from left to right.
Filter Effects on Hover
.card img {
filter: grayscale(100%);
transition: filter 0.4s ease;
}
.card img:hover {
filter: grayscale(0%);
}
- Smoothly reveals color on hover—great for interactive designs.
Practical Use Cases
| Use Case | Description |
|---|---|
| Image previews | Apply blur or grayscale to suggest loading or focus |
| Hover highlights | Add dynamic color or contrast changes on interaction |
| Background decoration | Stylize hero sections or modals with subtle effects |
| Accessibility | Improve visibility or readability with contrast boosts |
Performance Tip
Use CSS filters sparingly on large or complex elements (especially with animations) to avoid rendering lag.
Summary Table:
| Filter | Value Example | Effect |
|---|---|---|
| blur() | blur(5px) | Softens the image |
| grayscale() | grayscale(100%) | Black and white effect |
| contrast() | contrast(150%) | Enhances or reduces contrast |
| brightness() | brightness(80%) | Makes darker or lighter |
| invert() | invert(100%) | Inverts all colors |
Would you like a live preview or project suggestion (e.g. grayscale gallery that colors on hover)?
Clip-path and creating complex shapes
The clip-path property in CSS allows you to define visible portions of an element by specifying a clipping region, which hides everything outside of the defined shape. This is especially useful for creative layouts, image cropping, and dynamic UI designs—all without needing extra HTML or image editing tools.
What Is clip-path?
clip-path defines a region where content is visible and everything outside is clipped (hidden). It can use basic shapes, SVG paths, or inset areas.
.element {
clip-path: circle(50% at center);
}
- This would display the element in a circular shape, centered.
Supported Shape Functions
1. circle()
clip-path: circle(75px at center);
- Clips the element to a circle of radius 75px at the center.
2. ellipse()
clip-path: ellipse(60% 40% at 50% 50%);
- An elliptical shape, useful for banners and portraits.
3. inset()
clip-path: inset(10% 20%);
- Creates a rectangular clipping area inset from the element’s edges.
4. polygon()
Define custom shapes using a list of x/y coordinates.
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
This creates a triangle.
- You can make trapezoids, hexagons, stars, speech bubbles, etc., with polygon().
Using SVG Paths (Advanced)
You can also reference SVG path() values for intricate shapes:
clip-path: path(‘M10 10 H 90 V 90 H 10 Z’);
- Allows very detailed, curved, or multi-part shapes.
Use Cases of clip-path
| Use Case | Description |
|---|---|
| Image Masks | Cut images into circles, triangles, or custom shapes |
| UI Components | Shape containers for cards, modals, or buttons |
| Decorative Effects | Layered section dividers, angled edges, creative cuts |
| Hover Interactions | Animate shapes using transition and clip-path |
Responsive Shapes with Percentage
clip-path supports percentage-based coordinates for fluid layouts:
clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 0% 100%);
- This makes an angled section that adapts to screen size.
CSS + Hover Animation Example
.image {
clip-path: circle(40% at center);
transition: clip-path 0.4s ease;
}
- Smooth zoom-in circular reveal on hover.
Tools for Generating Shapes
Use tools like:
- Clippy – Interactive clip-path editor
- SVG Path Editor – Design complex path() values
Summary:
| Shape | Function Example |
|---|---|
| Circle | circle(50px at center) |
| Ellipse | ellipse(60% 40% at center) |
| Polygon | polygon(0% 0%, 100% 0%, 50% 100%) |
| Inset | inset(10% 20%) |
| SVG Path | path('M10 10 H 90 V 90 H 10 Z') |
Would you like a working HTML + CSS demo of creative clip-path shapes or animations?
CSS Shapes and Masks
CSS Shapes and Masks are advanced visual styling tools that allow designers to create complex and custom visual effects beyond standard rectangular layouts. These techniques enhance visual appeal, improve user engagement, and enable precise control over element visibility and design flow.
CSS Shapes
CSS Shapes enable content (especially text) to wrap around non-rectangular elements, like circles, polygons, and custom paths, making layouts more dynamic and visually interesting.
Key Property: shape-outside
.float-shape {
float: left;
shape-outside: circle(50%);
width: 200px;
height: 200px;
clip-path: circle(50%);
}
- This wraps text around a circular image or element.
Supported Shapes
| Function | Description |
|---|---|
circle() |
Circular shape wrap |
ellipse() |
Elliptical content wrap |
inset() |
Rectangular inset with optional rounding |
polygon() |
Custom polygon-based wrapping |
url(#id) |
Use SVG <path> for wrapping |
Requirements:
- The element must be floated (float: left/right)
- Width and height must be defined
Example:
<div class=”circle-text”>
<img src=”profile.jpg” class=”float-shape” />
<p>Here is some text that wraps around the circular image using CSS shapes…</p>
</div>
CSS Masks
CSS Masks hide parts of an element based on a masking image or shape, similar to image masks in Photoshop. This helps achieve effects like image cutouts, gradients, and creative overlays.
Key Property: mask-image
.masked {
mask-image: url(mask.svg);
mask-repeat: no-repeat;
mask-size: contain;
}
- The mask acts as a visibility layer—only the opaque parts of the mask show the element.
Other Mask Properties
| Property | Use |
|---|---|
| mask-image | Sets the image or gradient as a mask |
| mask-mode | Decides how mask pixels affect visibility |
| mask-position | Position of the mask on the element |
| mask-size | Size of the mask |
| mask-repeat | Repeat behavior of the mask image |
| mask-composite | Combines multiple masks |
Example: Mask with Gradient
.gradient-mask {
mask-image: linear-gradient(to right, black 50%, transparent 100%);
}
- Fades out the right side of an element.
Differences Between Shapes and Masks
| Feature | CSS Shapes | CSS Masks |
|---|---|---|
| Purpose | Wraps text around a shape | Hides or reveals part of an element |
| Uses | Floated content wrapping | Visual effects, clipping |
| Requires float? | Yes | No |
| Custom shapes | Yes (polygon, SVG) | Yes (SVG, PNG, gradients) |
Summary:
- CSS Shapes control text flow around custom shapes.
- CSS Masks control visibility of an element based on a shape or image.
- Together, they allow creative, magazine-style layouts, hover animations, and custom cropping in modern designs.