Css text shadow drop shadow

text-shadow

The text-shadow CSS property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and any of its decorations . Each shadow is described by some combination of X and Y offsets from the element, blur radius, and color.

Try it

Syntax

/* offset-x | offset-y | blur-radius | color */ text-shadow: 1px 1px 2px black; /* color | offset-x | offset-y | blur-radius */ text-shadow: #fc0 1px 0 10px; /* offset-x | offset-y | color */ text-shadow: 5px 5px #558abb; /* color | offset-x | offset-y */ text-shadow: white 2px 5px; /* offset-x | offset-y /* Use defaults for color and blur-radius */ text-shadow: 5px 10px; /* Global values */ text-shadow: inherit; text-shadow: initial; text-shadow: revert; text-shadow: revert-layer; text-shadow: unset;

This property is specified as a comma-separated list of shadows.

Each shadow is specified as two or three values, followed optionally by a value. The first two values are the and values. The third, optional, value is the . The value is the shadow’s color.

When more than one shadow is given, shadows are applied front-to-back, with the first-specified shadow on top.

Values

Optional. The color of the shadow. It can be specified either before or after the offset values. If unspecified, the color’s value is left up to the user agent, so when consistency across browsers is desired you should define it explicitly.

Источник

Shadows

There are a number of ways to add shadows to text and elements in CSS. In this module you’ll learn how to use each option, and the tasks they were designed for.

Say you’ve been sent a design to build and in that design there’s a picture of a t-shirt, cut out, with a drop shadow. The designer tells you that the product image is dynamic and can be updated via the content management system, so the drop shadow needs to be dynamic too. Instead of a t-shirt, the image could be a visor or shorts, or any other item. How do you do that with CSS?

CSS has the box-shadow and text-shadow properties, but the picture isn’t text, so you can’t use text-shadow . If you use box-shadow , the shadow is on the surrounding box, not around the t-shirt.

Luckily, there is another option: the drop-shadow() filter. This enables you to do exactly what the designer asked for. There are plenty of options when it comes to shadows in CSS, each designed for a different use case.

Box shadow #

• Chrome 10, Supported 10
• Firefox 4, Supported 4
• Edge 12, Supported 12
• Safari 5.1, Supported 5.1

The box-shadow property is for adding shadows to the box of an HTML element. It works on block elements and inline elements.

.my-element  
box-shadow: 5px 5px 20px 5px #000;
>

The order of values for box-shadow are as follows:

1. Horizontal offset: a positive number pushes it out from the left and a negative number will push it out from the right.
2. Vertical offset: a positive number pushes it down from the top, and a negative number will push it up from the bottom.
3. Blur radius: a larger number produces a more blurred shadow, whereas a small number produces a sharper shadow.
4. Spread radius (optional): a larger number increases the size of the shadow and a smaller number decreases it, making it the same size as the blur radius if it’s set to 0.
5. Color: Any valid color value. If this isn’t defined, the computed text color will be used.

To make a box shadow an inner shadow, rather than the default outer shadow, add an inset keyword before the other properties.

/* Outer shadow */
.my-element  
box-shadow: 5px 5px 20px 5px #000;
>

/* Inner shadow */
.my-element  
box-shadow: inset 5px 5px 20px 5px #000;
>

Multiple shadows #

You can add as many shadows as you like with box-shadow . Add a comma separated collection of value sets to achieve this:

.my-element  
box-shadow: 5px 5px 20px 5px darkslateblue, -5px -5px 20px 5px dodgerblue, 
inset 0px 0px 10px 2px darkslategray, inset 0px 0px 20px 10px steelblue;
> 

Properties affecting box-shadow #

Adding a border-radius to your box will also affect the shape of the box shadow. This is because CSS is creating a shadow based on the shape of the box as if light is pointing at it.

.my-element  
box-shadow: 0px 0px 20px 5px darkslateblue; 
border-radius: 25px;
>

If your box with box-shadow is in a container that has overflow: hidden , the shadow won’t break out of that overflow either.

div class="my-parent"> 
div class="my-shadow">My shadow is hidden by my parent.</div>
</div>

.my-parent,
.my-shadow  
width: 250px; 
height: 250px;
>

.my-shadow  
box-shadow: 0px 0px 20px 5px darkslateblue;
>

.my-parent  
overflow: hidden;
>

Text shadow #

• Chrome 2, Supported 2
• Firefox 3.5, Supported 3.5
• Edge 12, Supported 12
• Safari 1.1, Supported 1.1

The text-shadow property is very similar to the box-shadow property. It only works on text nodes.

.my-element  
text-shadow: 3px 3px 3px hotpink;
>

The values for text-shadow are the same as box-shadow and in the same order. The only difference is that text-shadow has no spread value and no inset keyword.

When you add a box-shadow it is clipped to the shape of your box, but text-shadow has no clipping. This means that if your text is fully or semi transparent, the shadow is visible through it.

.my-element  
text-shadow: 3px 3px 3px gold; 
color: rgb(0 0 0 / 70%);
>

Multiple shadows #

You can add as many shadows as you like with text-shadow , just as with box-shadow . Add a comma separated collection of value sets, and you can create some really cool text effects, such as 3D text.

.my-element  
text-shadow: 1px 1px 0px white, 
2px 2px 0px firebrick; 
color: darkslategray;
>

Drop shadow #

• Chrome, Not supported
• Firefox, Not supported
• Edge, Not supported
• Safari, Not supported

To achieve a drop shadow that follows any potential curves of an image, use the CSS drop-shadow filter. This shadow is applied to an alpha mask which makes it very useful for adding a shadow to a cutout image, as in the case in the intro of this module.

.my-image  
filter: drop-shadow(0px 0px 10px rgba(0 0 0 / 30%))
>

We cover CSS filters in another module, but in short, filters allow you to apply multiple graphical effects to the pixels of an element.

The drop-shadow filter has the same values as box-shadow but the inset keyword and spread value are not allowed. You can add as many shadows as you like, by adding multiple instances of drop-shadow values to the filter property. Each shadow will use the last shadow as a positioning reference point.

Which shadow value below is unique to box-shadow ?

Horizontal offset Vertical offset Blur radius Spread radius Color inset

Источник

drop-shadow()

The drop-shadow() CSS function applies a drop shadow effect to the input image. Its result is a .

Try it

A drop shadow is effectively a blurred, offset version of the input image’s alpha mask, drawn in a specific color and composited below the image.

Note: This function is somewhat similar to the box-shadow property. The box-shadow property creates a rectangular shadow behind an element’s entire box, while the drop-shadow() filter function creates a shadow that conforms to the shape (alpha channel) of the image itself.

Syntax

drop-shadow(offset-x offset-y blur-radius color) 

The drop-shadow() function accepts a parameter of type (defined in the box-shadow property), with the exception that the inset keyword and spread parameters are not allowed.

Parameters

The color of the shadow, specified as a . If unspecified, the value of the color property is used.

Examples

Setting a drop shadow using pixel offsets and blur radius

/* Black shadow with 10px blur */ drop-shadow(16px 16px 10px black) 

Setting a drop shadow using rem offsets and blur radius

/* Reddish shadow with 1rem blur */ drop-shadow(.5rem .5rem 1rem #e23) 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Feb 21, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

drop-shadow()

The drop-shadow() CSSfunction applies a drop shadow effect to the input image. Its result is a .

Try it

A drop shadow is effectively a blurred, offset version of the input image’s alpha mask, drawn in a specific color and composited below the image.

Note: This function is somewhat similar to the box-shadow property. The box-shadow property creates a rectangular shadow behind an element’s entire box, while the drop-shadow() filter function creates a shadow that conforms to the shape (alpha channel) of the image itself.

Syntax

drop-shadow(offset-x offset-y blur-radius color)

The drop-shadow() function accepts a parameter of type (defined in the box-shadow property), with the exception that the inset keyword and spread parameters are not allowed.

Parameters

The color of the shadow, specified as a . If unspecified, the value of the color property is used.

Examples

Setting a drop shadow using pixel offsets and blur radius

/* Black shadow with 10px blur */ drop-shadow(16px 16px 10px black)

Setting a drop shadow using rem offsets and blur radius

/* Reddish shadow with 1rem blur */ drop-shadow(.5rem .5rem 1rem #e23)

Specifications

Источник

drop-shadow()

drop-shadow() CSS — функция применяет эффект тени к входному изображению. Его результат — .

Try it

Каплевидная тень-это,по сути,размытая,смещенная версия альфа-маскировки входного изображения,нарисованная определенным цветом и составленная под изображением.

Примечание. Эта функция в некоторой степени похожа на свойство box-shadow . Свойство box-shadow создает прямоугольную тень за всем блоком элемента , а функция фильтра drop-shadow() создает тень, которая соответствует форме (альфа-канал) самого изображения .

Syntax

drop-shadow(offset-x offset-y blur-radius color)

Функция drop-shadow() принимает параметр типа (определенный в свойстве box-shadow ), за исключением того, что ключевое слово inset и параметры spread не допускаются.

Parameters

Два значения , которые определяют смещение тени. offset-x указывает горизонтальное расстояние, где отрицательные значения располагают тень слева от элемента. offset-y указывает вертикальное расстояние, где отрицательные значения размещают тень над элементом. Если оба значения равны 0 , тень помещается непосредственно за элементом.

Examples

Установка падающей тени с помощью смещения пикселей и радиуса размытия

/ * Черная тень с размытием 10 пикселей * / drop-shadow(16px 16px 10px black)

Настройка падающей тени с помощью смещения rem и радиуса размытия

/ * Красноватая тень с размытием 1rem * / drop-shadow(.5rem .5rem 1rem #e23)

Specifications

Источник