Drop shadow css online

CSS3 Shadows Generator (Box-Shadow)

Welcome on the CSS3 Shadows Generator (Box-Shadow),
This generator let you generate a CSS3 code that adds a shadow to an html box. This generator let you easily configure different parameters of the shadow. You can change the size (spread), the color, the opacity, the blurriness, the type of shadow (inner or outter) and the offset of the shadow. While you change the parameters of the shadow a preview automatically updates to the new configuration. When the result satisfies you, you can directly copy the CSS3 code of the shadow in the Code section of this generator. The CSS3 properties generated with this generator works only on the newest browsers like FireFox, Safari, Google Chrome, Internet Explorer 9, Opera.

Related Tools (that might interest you)

There are 1 online user(s)
Page generated in 0.003047 seconds
Top
Rules — Contact Us — Help us — RSS News

Copyright © Webestools — Any full or partial copy of our creations is prohibited without the permission of it authors.
All quoted trademarks belong to their respective companies.

Источник

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

A box-shadow tool that allows you to add shadows to images and elements.
You can choose from a wealth of samples and customize them.
It also supports the generation of inner shadows (inset) and multiple shadows. It also supports pseudo-elements such as before and after.
Pneumophysism samples are also available.

Sample list. Select the one that most closely matches the image of what you want to make. It is possible to edit after selecting.

Please note that when you select the example in the sample list, any data being edited will be overwritten.

How to use the tool

・I don’t know how to use the tool.
・I want to know various ways to use it
・I want to know the details of each item
For those who like, we have prepared a video that introduces the contents and features and explains how to use it.

Please take advantage of it.

Lots more videos on Youtube!

List of generators

CSS Gradation Generator

CSS Button Generator

CSS Box Shadow Generator

CSS Text Shadow Generator

CSS Border Generator

CSS Filter Generator

CSS Triangle & Arrow Generator

CSS Backdrop-filter Generator

CSS Transform 2D/3D Generator

CSS Transition Generator

CSS Animation & Keyframes Generator

List of other Tools

Characters Counter

Description of each CSS property

• Negative values for amount of horizontal displacement amount of vertical displacement will place them vertically above and horizontally to the left, respectively.
• A positive value for shadow size makes it larger, while a negative value makes it smaller.

• If only two values are specified, they are set as amount of horizontal displacement amount of vertical displacement
• If only three values are specified, an additional third value is set as amount of shadow blurring
• If only four values are specified, an additional fourth value is set as shadow size

If border-radius is specified, the shadow will also reflect that rounding.
To specify multiple shadows, separate them with a comma «,». The first shadow specified will be in the foreground.
Example description) box-shadow: inset 2px 2px 3px 4px rgba(0, 0, 0, .5), 0px 0px 3px #ff0;

before and after create pseudo-elements as children of an element.
The before is created as the first child element of the element and the after as the last child element of the element.
Also, the content property is required.
When describing «before,» a «:» (colon) is placed in front of it.
However, to distinguish it from pseudo-classes, it is often described with two colons.
Example description)
.test::before content: «»;
>

In addition to strings, quotation marks, counters, images, etc. can be inserted in the content property.
Since it is generated as an inline element, it must be converted to a block element when specifying a size such as width.

Since screen readers may not be able to access pseudo-elements, it is necessary to consider whether pseudo-elements should be used for information that is necessary for users.

The position property sets how the element is positioned.
The top, right, bottom, and left properties determine the position of the placed element if a value other than static (the default value) is specified.
For non-static values, the z-index (order of overlap) can be specified. z-index defaults to auto. A numerical value can be specified, and the higher the value, the higher the element will be displayed as the upper layer (the layer in front).

• relative：The position of the element itself does not change even if it is specified, but unlike static (default value), it is affected if top, etc., is specified.
• absolute：If an ancestor element is specified other than static, it is placed with respect to the nearest specified ancestor element.
• fixed：The elements are positioned relative to the screen.
  The position does not change when scrolling.
• sticky：Like fixed, it fixes the position when scrolled, but it cannot leave the scope of the parent element.

Источник

What is Drop Shadow CSS Generator?

A drop shadow CSS generator is a tool that helps you create CSS code to add drop shadows to HTML elements on a web page. Drop shadows are visual effects that add depth and dimension to an object, making it appear as though it is hovering above the surface below it.

What is Drop Shadow CSS Generator used for?

Drop shadow used to create a visual separation between elements, making it easier for the user to distinguish between different parts of a page. This can be especially useful when designing complex layouts or interfaces that contain many different elements.

How to use drop shadow in CSS?

The filter property in CSS can also be used to add a drop shadow effect to an element. The drop-shadow() function is used within the filter property to create the effect. Here’s an example of how to use filter: drop-shadow() in CSS:.

.box filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
>

In this example, we have applied a drop shadow to an element with class box. The drop-shadow() function takes four parameters: the horizontal offset, vertical offset, blur radius, and color of the shadow.

In the example above, we have used a horizontal offset of 2px, a vertical offset of 2px, a blur radius of 4px, and a shadow color of rgba(0, 0, 0, 0.5), which is a semi-transparent black color.

You can adjust these values to create different types of drop shadows, depending on your design needs. You can also apply the filter: drop-shadow() property to different types of elements, such as text or images.

Источник