Генератор box shadow css

CSS Box Shadow Generator

This CSS box shadow generator will help you learn and design shadows for your containers or boxes on your webpages. The CSS code for shadows requires four values, they are: Horizontal Length, Vertical Length, Blur Radius and Shadow Color.

Update This generator has been updated to allow for multiple shadows to be added.

Box Shadow CSS Property

The box-shadow property is a CSS3 property that allows you to create a shadow effect for almost any element of a web page. It is similar to the Drop Shadows effect in Photoshop, using this property it creates the illusion of depth on 2-dimensional pages.

Using the box-shadow property, you can add one or more shadows to an element. A shadow is a copy of an element offset by a specified distance. Shadows can be external or internal, blurry or flat, they can also follow the contours of blocks with rounded corners — using the border-radius property. Using the keyword inset , shadows are created inside the element, making the element visually voluminous or depressed.

Syntax

The property takes on a composite value of five different parts: horizontal offset, vertical offset, blur, spread and shadow color. In addition, you can specify whether the shadow is external or internal by using the keyword inset .

box-shadow: inset offset-x offset-y blur spread color;

Unlike other properties, such as border, which can be divided into sub-properties (border-width, border-style, etc.), the box shadow CSS property stands alone. Furthermore, the order in which you write the property values ​​is important (except the inset keyword, which can be at the beginning or end.)

Horizontal Offset (X-axis)

The first value offset-x, shifts the shadow along the X axis. A positive value will shift the shadow to the right, and a negative value — to the left.

Источник

CSS box-shadow генератор

box-shadow — это CSS3 свойство, которое позволяет создавать эффект тени для, практически, любого элемента веб страницы. Оно похоже на эффект Drop Shadows в Photoshop, с помощью этого свойства создается иллюзия глубины на 2-мерных страницах.

Синтаксис

Свойство принимает составное значение из пяти разных частей: горизонтальное смещение, вертикальное смещение, размытие, растяжение, цвет тени. К тому же можно указать будет ли тень внешней или внутренней.

 CSS div { box-shadow: offset-x offset-y blur spread color position; } 

В отличие от других свойств, каких как border, которые разбиты на подсвойства (border-width, border-style и тд), box shadow CSS стоит особняком. Соответственно, важен порядок, в котором вы записываете значения свойства.

Горизонтальное смещение (по оси X)

Первое значение offset-x — смещение тени по оси X. Положительное значение сместит тень вправо, а отрицательное — влево.

 CSS .box-1 { box-shadow: -15px 0 10px 0 rgba(0,0,0,0.2); } .box-2 { box-shadow: 15px 0 10px 0 rgba(0,0,0,0.2); } 

Вертикальное смещение (по оси Y)

Второе значение offset-y — смещение тени по оси Y. Положительное значение сместит тень вниз, а отрицательное — наверх.

 CSS .box-1 { box-shadow: 0 15px 10px 0 rgba(0,0,0,0.2); } .box-2 { box-shadow: 0 -15px 10px 0 rgba(0,0,0,0.2); } 

Размытие

Третье значение (blur) представляет собой радиус размытия тени, посмотрите как он работает на box shadow генераторе выше. Значение 0 означает, что тень будет совсем не размыта, края и стороны будут абсолютно четкие. Чем выше значение, тем более мутную и размытую тень вы получите. Отрицательные значения не допускаются.

 CSS .box-1 { box-shadow: 0 5px 0 0 rgba(0,0,0,0.2); } .box-2 { box-shadow: 0 5px 15px 0 rgba(0,0,0,0.2); } .box-3 { box-shadow: 0 5px 30px 0 rgba(0,0,0,0.2); } 

Растяжение

Четвертое значение (spread) представляет собой размер тени или дистанции от тени до элемента. При положительном значении тень увеличится, выйдет за пределы элемента. Отрицательное значение уменьшит и сожмет тень.

 CSS .box-1 { box-shadow: 0 0 5px 0 rgba(0,0,0,0.2); } .box-2 { box-shadow: 0 0 5px 5px rgba(0,0,0,0.2); } .box-3 { box-shadow: 0 0 5px -15px rgba(0,0,0,0.2); } 

Цвет

Цвет тени может быть абсолютно любым и записан в разных форматах, доступных в CSS (HEX, RGB, RGBA и пр), попробуйте разные оттенки в css box shadow generator.

 CSS .box-1 { box-shadow: 0 10px 5px -5px #e6ecc1; } .box-2 { box-shadow: 0 10px 5px -5px rgba(30, 129, 204, 0.2); } 

Внешняя/внутренняя

Значение inset определяет положение тени. По умолчанию оно не указано, это означает, что тень будет снаружи элемента. Для того, чтобы тень была внутри элемента, необходимо в конце добавить ключевое слово inset.

 CSS .box-1 { box-shadow: 10px 10px 10px 2px rgba(34, 60, 80, 0.2) inset; } .box-2 { box-shadow: 10px 10px 10px 2px rgba(34, 60, 80, 0.2); } 

Несколько теней

В CSS тень блока может быть не одна. Чтобы добавить несколько теней, достаточно написать их в одном свойстве через запятую.

 CSS .box-1 { box-shadow: 10px 10px 10px 2px rgba(34, 60, 80, 0.2) inset, 10px 10px 10px 2px rgba(34, 60, 80, 0.2); } 

Круглая тень

Тень может быть круглой, для этого достаточно добавить свойство border-radius

 CSS .box-1 { box-shadow: 10px 10px 10px 0px rgba(34, 60, 80, 0.2); border-radius: 50%; } 

Эффект увеличения с тенью

Используя свойства box-shadow и transform, можно создать иллюзию приближения и отдаления элемента от пользователя.

 CSS .box-1 { transform: scale(1); box-shadow: 0 0 5px 5px rgba(34, 60, 80, 0.2); transition: box-shadow 0.5s, transform 0.5s; } .box-1:hover { ransform: scale(1.2); box-shadow: 0 0 15px 7px rgba(34, 60, 80, 0.2); transition: box-shadow 0.5s, transform 0.5s; } 

Эффект парения элемента с помощью box-shadow

Мы можем добавить тень к псевдоэлементу :after и создать тень ниже элемента. Тем самым создавая иллюзию, что элемент был поднят вверх, а потом упал.

 CSS .box-1 { position: relative; transform: translateY(0); transition: transform 1s; } .box-1::after { content: ""; display: block; position: absolute; bottom: -30px; left: 50%; height: 8px; width: 100%; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.4); border-radius: 50%; background-color: rgba(0, 0, 0, 0.2); transform: translate(-50%, 0); transition: transform 1s; } .box-1:hover { transform: translateY(-40px); transition: transform 1s; } .box-1:hover::after { transform: translate(-50%, 40px) scale(0.75); transition: transform 1s; } 

Тень и свойство clip-path

Тень возможно сделать не только на элементах в виде блока или круга, но и на более сложных формах с использованием свойства clip-path . Правда свойство box-shadow при этом не сработает и нам придется заменить его другим. Приступим, создадим элемент box-1.

 CSS .box-1 { clip-path: polygon(30px 0%, 100% 0%, 100% 100%, 30px 100%, 0 50%); } 

В CSS существует фильтр, который тоже делает CSS тень блока — drop-shadow() . Но у вас не поучится использовать его непосредственно на элементе, так как clip-path просто отрежет эту тень. Поэтому создаем родительский блок и наложим тень на него.

 CSS .box-1__wrapper { filter: drop-shadow(-1px 6px 3px rgba(34, 60, 80, 0.2)); } .box-1 { clip-path: polygon(30px 0%, 100% 0%, 100% 100%, 30px 100%, 0 50%); } 

• Студия Профессиональная разработка сайтов под заказ Подробнее
• Иконки Прекрасный способ визуально выразить главную мысль Подробнее
• Сервисы Полезные инструменты для веб разработчиков Подробнее
• Блог Делимся в опытом и знанием в IT сфере Подробнее
• Поделиться ВконтактеFacebook Контакты support@active-vision.ru

© 2019 — 2023 Active-Vision. Политика конфиденциальности. Вся информация на сайте носит справочный характер и не является публичной офертой, определяемой статьей 437 ГК РФ

Источник

CSS Box Shadow Generator

CSS Box Shadow Generator is a free online tool for generating CSS box shadows in any color and size. You can create the box shadow you need by tuning the parameters, preview it as a box, circle or header and get the CSS code directly. Here is how a box shadow looks in HTML.

There are different parameters you must set in CSS box-shadow property. These are the following. Optional parameters are showed in parenthesis.

box-shadow: (inset) h-offset v-offset (blur) (spread) color;

• Inset: «inset» is an optional parameter works like a flag and it changes the shadow from outer to inner. By default, shadow is outset, and you don’t need to write anything to set it in CSS. Just use «inset» to change its default position.
• Horizontal Offset: Horizontal offset or h-offset is the distance of shadow from center in x-axis. It’s a required parameter. It may be either negative or positive. Negative values put the shadow to the left of the box, while positive put the shadow to the right.
• Vertical Offset: Vertical offset or v-offset is the distance of shadow from center in y-axis. It’s a required parameter. It may be either negative or positive. Negative values put the shadow above the box, while positive values put the shadow below.
• Blur: Blur is the amount of blur that will be applied to shadow. It has to be zero or positive. Blur is an optional parameter. If you don’t set it, it will be calculated as zero.
• Spread: Spread is the radius of the shadow spread that will be subtracted or added to shadow itself. If its value is negative, shadow will be smaller, vice versa. Spread is an optional parameter. If you don’t set it, it will be calculated as zero.
• Color: It determines the color of the shadow. It’s a required parameter.

How to use Online CSS Box Shadow Generator?

You can generate a CSS box shadow by following these steps.

1. First, set the sizes of h-offset, v-offset, blur and spread in pixels.
2. Determine the colors for background, box, and shadow. Background and box colors are for preview-only. Shadow color will be used in the CSS code generated.
3. You can enable inset shadow by activating the checkbox if needed.
4. There are 2 preview modes. One is box and other is header. You can check the generated box shadow in both modes according to your needs.
5. You can copy the CSS code generated manually or by using the button «Copy CSS».

Источник

Box-shadow generator

This tool lets you construct CSS box-shadow effects, to add box shadow effects to your CSS objects.

The box-shadow generator enables you to add one or more box shadows to an element.

On opening the tool, you’ll find a rectangle in the top-right section of the tool. That’s the element you’re going to be applying shadows to. When this element is selected (as it is, when you first load the page) you can apply some basic styling to it:

• Set the element’s color using the color picker tool.
• Give the element a border using the «border» checkbox.
• Use the sliders to set the element’s top , left , width , and height properties.

To add a box shadow, click the «+» button at the top-left. This adds a shadow, and lists it in the column on the left. Now you can set the values of the new shadow:

• Set the shadow’s color using the color picker tool.
• Set the shadow to be inset using the «inset» checkbox.
• Use the sliders to set the element’s position, blur, and spread.

To add another shadow, click «+» again. Now any values you set will apply to this new shadow. Change the order in which these two shadows are applied using the ↑ and ↓ buttons at the top-left. Select the first shadow again by clicking it in column on the left. To update the element’s own styles, select it by clicking the button labelled «element» along the top.

You can add ::before and ::after pseudo-elements to the element, and give them box shadows as well. To switch between the element and its pseudo-elements, use the buttons along the top labeled «element», «:before», and «:after».

The box at the bottom-right contains the CSS for the element and any before:: or ::after pseudo-elements.

See also

This interactive tool lets you visually create border images (the border-image property).

This interactive tool lets you visually create rounded corners (the border-radius property).

Found a content problem with this page?

This page was last modified on May 24, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник