# Box Shadow Control

Elementor Box Shadow control displays an input fields for horizontal shadow, vertical shadow, shadow blur, shadow spread and shadow color.

The control is defined in Control_Box_Shadow class which extends Control_Base_Multiple class.

When using this control, the type should be set to \Elementor\Controls_Manager::BOX_SHADOW constant.

# Arguments

# Return Value

[
	'horizontal' => 0,
	'vertical' => 0,
	'blur' => 10,
	'spread' => 0,
	'color' => 'rgba(0,0,0,0.5)',
]
1
2
3
4
5
6
7

(array) An array containing box shadow data:

  • $horizontal (int) Box shadow horizontal size.
  • $vertical (int) Box shadow vertical size.
  • $blur (int) Box shadow blur.
  • $spread (int) Box shadow spread.
  • $color (string) Box shadow color.

# Usage














 
 
 
 
 
 
 
 
 
 







<?php
class Elementor_Test_Widget extends \Elementor\Widget_Base {

	protected function register_controls() {

		$this->start_controls_section(
			'style_section',
			[
				'label' => esc_html__( 'Style', 'textdomain' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control(
			'custom_box_shadow',
			[
				'label' => esc_html__( 'Box Shadow', 'textdomain' ),
				'type' => \Elementor\Controls_Manager::BOX_SHADOW,
				'selectors' => [
					'{{SELECTOR}}' => 'box-shadow: {{HORIZONTAL}}px {{VERTICAL}}px {{BLUR}}px {{SPREAD}}px {{COLOR}};',
				],
			]
		);

		$this->end_controls_section();

	}

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# Notes

Please not that developers should not use this control rather the Box Shadow Group Control.