pixi.js
    Preparing search index...

    Class BlurFilter

    The BlurFilter applies a Gaussian blur to an object. The strength of the blur can be set for the x-axis and y-axis separately.

    import { BlurFilter } from 'pixi.js';

    // Create with default settings
    const filter = new BlurFilter();

    // Create with custom settings
    const filter = new BlurFilter({
        strength: 8,      // Overall blur strength
        quality: 4,       // Blur quality (higher = better but slower)
        kernelSize: 5     // Size of blur kernel matrix
    });

    // Apply to a display object
    sprite.filters = [filter];

    // Update properties
    filter.strength = 10;          // Set both X and Y blur
    filter.strengthX = 5;          // Set only horizontal blur
    filter.strengthY = 15;         // Set only vertical blur
    filter.quality = 2;            // Adjust quality

    // Enable edge pixel clamping
    filter.repeatEdgePixels = true;
    • Higher quality values produce better blur but impact performance
    • Strength controls blur intensity independently for X and Y
    • Can be optimized using quality and kernelSize settings
    • Supports edge pixel clamping for special effects

    Hierarchy (View Summary)

    Index

    Constructors

    constructor

    Properties

    blurXFilter blurYFilter defaultOptions

    Accessors

    blur blurX blurY quality repeatEdgePixels strength strengthX strengthY

    Methods

    apply

    Constructors

    • Parameters

      Returns BlurFilter

    • Parameters

      • Optionalstrength: number
      • Optionalquality: number
      • Optionalresolution: number
      • OptionalkernelSize: number

      Returns BlurFilter

      since 8.0.0

    Properties

    blurXFilter: BlurFilterPass

    The horizontal blur filter

    blurYFilter: BlurFilterPass

    The vertical blur filter

    defaultOptions: Partial<BlurFilterOptions> = ...

    Default blur filter options

    // Set default options for all BlurFilters
    BlurFilter.defaultOptions = {
        strength: 10,       // Default blur strength
        quality: 2,        // Default blur quality
        kernelSize: 7      // Default kernel size
    };
    // Create a filter with these defaults
    const filter = new BlurFilter(); // Uses default options
    • These options are used when creating a new BlurFilter without specific parameters
    • Can be overridden by passing options to the constructor
    • Useful for setting global defaults for all blur filters in your application

    Accessors

    • get blur(): number

      Sets the strength of both the blurX and blurY properties simultaneously

      Returns number

      2

      since 8.3.0

      BlurFilter.strength

    • set blur(value: number): void

      Parameters

      • value: number

      Returns void

    • get blurX(): number

      Sets the strength of the blurX property

      Returns number

      2

      since 8.3.0

      BlurFilter.strengthX

    • set blurX(value: number): void

      Parameters

      • value: number

      Returns void

    • get blurY(): number

      Sets the strength of the blurY property

      Returns number

      2

      since 8.3.0

      BlurFilter.strengthY

    • set blurY(value: number): void

      Parameters

      • value: number

      Returns void

    • get quality(): number

      Sets the number of passes for blur. More passes means higher quality blurring. Controls the precision and smoothness of the blur effect at the cost of performance.

      Returns number

      // High quality blur (slower)
      filter.quality = 8;

      // Low quality blur (faster)
      filter.quality = 2;

      4

      Higher values produce better quality but impact performance

    • set quality(value: number): void

      Parameters

      • value: number

      Returns void

    • get repeatEdgePixels(): boolean

      If set to true the edge of the target will be clamped

      Returns boolean

      false
    • set repeatEdgePixels(value: boolean): void

      Parameters

      • value: boolean

      Returns void

    • get strength(): number

      Sets the strength of both the blurX and blurY properties simultaneously. Controls the overall intensity of the Gaussian blur effect.

      Returns number

      // Set equal blur strength for both axes
      filter.strength = 8;

      // Will throw error if X and Y are different
      filter.strengthX = 4;
      filter.strengthY = 8;
      filter.strength; // Error: BlurFilter's strengthX and strengthY are different

      8

      If strengthX and strengthY are different values

    • set strength(value: number): void

      Parameters

      • value: number

      Returns void

    • get strengthX(): number

      Sets the strength of horizontal blur. Controls the blur intensity along the x-axis independently.

      Returns number

      // Apply horizontal-only blur
      filter.strengthX = 8;
      filter.strengthY = 0;

      // Create motion blur effect
      filter.strengthX = 16;
      filter.strengthY = 2;

      8
    • set strengthX(value: number): void

      Parameters

      • value: number

      Returns void

    • get strengthY(): number

      Sets the strength of the vertical blur. Controls the blur intensity along the y-axis independently.

      Returns number

      // Apply vertical-only blur
      filter.strengthX = 0;
      filter.strengthY = 8;

      // Create radial blur effect
      filter.strengthX = 8;
      filter.strengthY = 8;

      8
    • set strengthY(value: number): void

      Parameters

      • value: number

      Returns void

    Methods

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods