Styleframe Logo
Utilities

Effects

Create effect utilities for shadows, opacity, and blend modes with full type safety.

Overview

Effect utilities help you apply visual effects to elements including box shadows, text shadows, opacity, and blend modes. These utilities create depth, hierarchy, and visual interest in your designs.

Why Use Effect Utilities?

Effect utilities help you:

  • Create visual hierarchy: Use shadows to indicate elevation and depth
  • Control transparency: Manage element opacity for overlays and fades
  • Apply blend effects: Mix colors and images with blend modes
  • Integrate with design tokens: Define consistent shadow values across your application

useBoxShadowUtility

The useBoxShadowUtility() function creates utility classes for applying box shadows.

styleframe.config.ts
import { styleframe } from "styleframe";
import { useBoxShadowUtility } from "@styleframe/theme";

const s = styleframe();

useBoxShadowUtility(s, {
    sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
    default: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
    md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
    lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
    xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
    '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
    inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
    none: 'none',
});

export default s;
Pro tip: The box shadow utility uses CSS custom properties (--tw-shadow) so it can be combined with ring utilities without conflicts.

useBoxShadowColorUtility

The useBoxShadowColorUtility() function creates utility classes for setting shadow colors.

styleframe.config.ts
import { styleframe } from "styleframe";
import { useBoxShadowColorUtility } from "@styleframe/theme";
import { useColor } from "@styleframe/theme";

const s = styleframe();
const { ref } = s;

const { colorPrimary } = useColor(s, { primary: '#006cff' } as const);

useBoxShadowColorUtility(s, {
    primary: ref(colorPrimary),
    black: 'rgb(0 0 0 / 0.25)',
});

export default s;

useOpacityUtility

The useOpacityUtility() function creates utility classes for controlling element opacity.

styleframe.config.ts
import { styleframe } from "styleframe";
import { useOpacityUtility } from "@styleframe/theme";

const s = styleframe();

useOpacityUtility(s, {
    '0': '0',
    '5': '0.05',
    '10': '0.1',
    '20': '0.2',
    '25': '0.25',
    '30': '0.3',
    '40': '0.4',
    '50': '0.5',
    '60': '0.6',
    '70': '0.7',
    '75': '0.75',
    '80': '0.8',
    '90': '0.9',
    '95': '0.95',
    '100': '1',
});

export default s;

useTextShadowUtility

The useTextShadowUtility() function creates utility classes for applying text shadows.

styleframe.config.ts
import { styleframe } from "styleframe";
import { useTextShadowUtility } from "@styleframe/theme";

const s = styleframe();

useTextShadowUtility(s, {
    sm: '0 1px 2px rgb(0 0 0 / 0.05)',
    default: '0 1px 3px rgb(0 0 0 / 0.1)',
    md: '0 2px 4px rgb(0 0 0 / 0.1)',
    lg: '0 4px 8px rgb(0 0 0 / 0.15)',
    none: 'none',
});

export default s;

useMixBlendModeUtility

The useMixBlendModeUtility() function creates utility classes for controlling how an element blends with its background.

styleframe.config.ts
import { styleframe } from "styleframe";
import { useMixBlendModeUtility } from "@styleframe/theme";

const s = styleframe();

useMixBlendModeUtility(s, {
    normal: 'normal',
    multiply: 'multiply',
    screen: 'screen',
    overlay: 'overlay',
    darken: 'darken',
    lighten: 'lighten',
    'color-dodge': 'color-dodge',
    'color-burn': 'color-burn',
    'hard-light': 'hard-light',
    'soft-light': 'soft-light',
    difference: 'difference',
    exclusion: 'exclusion',
    hue: 'hue',
    saturation: 'saturation',
    color: 'color',
    luminosity: 'luminosity',
});

export default s;

useBackgroundBlendModeUtility

The useBackgroundBlendModeUtility() function creates utility classes for controlling how background layers blend together.

styleframe.config.ts
import { styleframe } from "styleframe";
import { useBackgroundBlendModeUtility } from "@styleframe/theme";

const s = styleframe();

useBackgroundBlendModeUtility(s, {
    normal: 'normal',
    multiply: 'multiply',
    screen: 'screen',
    overlay: 'overlay',
    darken: 'darken',
    lighten: 'lighten',
});

export default s;

Examples

Card with Elevation

styleframe.config.ts
import { styleframe } from "styleframe";
import { useBoxShadowUtility } from "@styleframe/theme";

const s = styleframe();
const { selector, modifier } = s;

useBoxShadowUtility(s, {
    sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
    default: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
    md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
    lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
});

// Create hover modifier
const hover = modifier('hover', ({ declarations }) => ({
    '&:hover': declarations,
}));

// Apply shadow with hover state
useBoxShadowUtility(s, { lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)' }, [hover]);

export default s;

Usage in HTML:

<div class="_box-shadow _hover:box-shadow:lg" style="transition: box-shadow 0.2s">
    Hover me for elevation
</div>

Faded Overlay

styleframe.config.ts
import { styleframe } from "styleframe";
import { useOpacityUtility } from "@styleframe/theme";
import { useBackgroundColorUtility } from "@styleframe/theme";

const s = styleframe();

useBackgroundColorUtility(s, {
    black: '#000',
});

useOpacityUtility(s, {
    '50': '0.5',
    '75': '0.75',
});

export default s;

Usage in HTML:

<div class="image-container" style="position: relative;">
    <img src="hero.jpg" alt="Hero">
    <div class="_bg:black _opacity:50" style="position: absolute; inset: 0;">
        <!-- Semi-transparent overlay -->
    </div>
</div>

Best Practices

  • Use consistent shadow scales: Define a shadow scale (sm, default, md, lg, xl) for consistent elevation
  • Consider dark mode: Shadows may need adjustment for dark themes where they can look harsh
  • Animate with care: Box shadows can be expensive to animate; consider using transform for hover effects when possible
  • Use opacity for overlays: Opacity utilities work well for modal overlays and image tints
  • Test blend modes: Blend mode effects vary significantly based on the colors involved
  • Combine with transitions: Add CSS transitions for smooth shadow and opacity changes

FAQ

Borders

Create border utilities for colors, widths, radiuses, styles, outlines, and focus rings with full type safety.

Filters

Create filter utilities for blur, brightness, contrast, grayscale, and backdrop effects with full type safety.