Box Shadow Generator do wstawienia na własną stronę

Box Shadow Generator to narzędzie online, które umożliwia łatwe tworzenie cieni dla elementów HTML za pomocą właściwości CSSbox-shadow.
Dzięki niemu możesz wizualnie dostosować parametry cienia i od razu zobaczyć efekt, a następnie skopiować gotowy kod CSS do użycia na swojej stronie.

Co możesz ustawić w generatorze?

- Przesunięcie poziome i pionowe (X i Y)
- Promień rozmycia (blur radius)
- Promień rozprzestrzenienia (spread radius)
- Kolor cienia (z przezroczystością)
- Opcja „inset” – cień wewnętrzny zamiast zewnętrznego

✨ Box Shadow CSS Generator

Typ elementu:

▢ Box ⬡ Przycisk 📄 Karta ⌨ Input

📐 Rozmiar boxa

Szerokość:

Wysokość:

🎨 Styl boxa

Tło:

Border:

Radius:

🌑 Parametry cienia

Kolor: Opacity:

Offset X:

Offset Y:

Blur:

Spread:

Inset (wewnętrzny) Animacja hover

⚡ Akcje

Presety:

Subtelny Elevated Neumo Glow

📋 Wygenerowany kod

CSS SCSS Tailwind React

Kody generatora

Jak wstawić generator na własną stronę?

Można to zrobić ręcznie lub pobrać gotowca i go edytować jak dusza zapragnie.

Samodzielnie:

Tworzymy nowy folder a w nim odpowiednie pliki:

index.html
style.css
script.js

I wklejamy poniższe kody źródłowe.

index.html

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box Shadow Generator</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body> 
    <div id="project"> 
      <h3>Box Shadow CSS Generator</h3>
      <div id="boxGenerator"></div>
      <div id="console"> 
        <div id="alignDiv"><span>Zmień kolor</span>
          <input type="color" id="color" onchange="color()" oninput="color()" value="#31b8f2">
        </div>
        <div id="alignDiv"> <span>Cień poziomy:</span>
          <input type="range" id="shiftRight" onchange="shiftRight()" oninput="shiftRight()" min="-50" max="50" value="5">
        </div>
        <div id="alignDiv"> <span>Cień pionowy:</span>
          <input type="range" id="shiftDown" onchange="shiftDown()" oninput="shiftDown()" min="-50" max="50" value="5">
        </div>
        <div id="alignDiv"> <span>Blur</span>
          <input type="range" id="blur" onchange="blurFunction()" oninput="blurFunction()" value="5" min="0" max="50">
        </div>
        <div id="alignDiv"> <span>Wielkość cienia:</span>
          <input type="range" id="spread" onchange="spread()" oninput="spread()" value="0" min="-30" max="50">
        </div>
        <div id="alignDiv"> <span>Przeźroczystość cienia:</span>
          <input type="range" id="opacity" onchange="opacity()" oninput="opacity()" min="0.00" max="1.0" value="1.0" step="0.01">
        </div>
        <div id="alignDiv"> <span>Cień wewnętrzny:</span>
          <input type="checkbox" id="check" onchange="check(this.value)">
        </div>
        <div id="results"> 
          <h3>CSS Code</h3><b> 
            <p id="result"></p></b><span id="copy">Kopiuj</span>
        </div>
      </div>
    </div>
    <script src="script.js"> </script>
  </body>
</html>

style.css

body, html {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }

#project {
  margin: 20px; }

#boxGenerator {
  height: 150px;
  width: 75%;
  background: white;
  border: 2px solid grey;
  border-radius: 8px;  
  margin-left: 50px;
  margin-top: 50px; }

input[type="range"] {
  -webkit-appearance: none;
  width: 35%;
  height: 10px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s; }

input[type="range"]::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #0e5a81;
  cursor: pointer; }

input[type="color"] {
  -webkit-appearance: none;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 15px;
  cursor: pointer; }

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0; }

input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 15px; }

#console {
  margin-top: 100px; }

#alignDiv span {
  font-size: 22.5px; }

#copy {
  cursor: pointer;
  background: #28a3eb;
  color: white;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  transition: background-color .3s; }

#copy:hover {
  background-color: #1e83aa; }

#result {
  border: 1px solid #555555;
  padding: 8px;
  border-radius: 10px;
  background: white;
  color: #1f1f1f; }

#result:hover {
  cursor: not-allowed;
  user-select: none; }

@media (max-width: 750px) {
  input[type="range"] {
    width: 100%; } }

script.js

// JavaScript Document
// www.skrip.pl
let x = 5, y = 5, z = 5, statusCheck = "", m = 0, s = 1, colors = "#31b8f2";

function shiftRight() {
    let shiftRight = document.getElementById("shiftRight").value;
    x = shiftRight;
}
function shiftDown() {
    let shiftDown = document.getElementById("shiftDown").value;
    y = shiftDown;
}
function blurFunction() {
    let blur = document.getElementById("blur").value;
    z = blur;
}
function opacity() {
    let opacity = document.getElementById("opacity").value;
    color();
    s = opacity;
}
function color() {
    let color = document.getElementById("color").value;
    colors = "rgba(" + color.match(/[A-Za-z0-9]{2}/g).map(function(v) { return parseInt(v, 16) }).join(",") + "," + s + ")";
}
function spread() {
    let spread = document.getElementById("spread").value;
    m = spread;
}

function check(value) {
    let checked = true;
    if (document.querySelector('#check:checked')) {
        checked = false;
    }
    if (checked == false) {
        statusCheck = "inset ";
    } else {
        statusCheck = "";
    }
}
setInterval(function(){
    document.getElementById("result").innerHTML = "-webkit-box-shadow: " + statusCheck + x + "px " + y + "px " + z + "px " + m + "px " + colors + ";" + "<br> box-shadow: " + statusCheck + x + "px " + y + "px " + z + "px " + m + "px " + colors + ";";
    document.getElementById("boxGenerator").style.boxShadow = statusCheck + x + "px " + y + "px " + z + "px " + m + "px " + colors;
}, 1);
document.getElementById("copy").addEventListener("click", function(){
    let copyText = "-webkit-box-shadow: " + statusCheck + x + "px " + y + "px " + z + "px " + m + "px " + colors + ";" + "\n box-shadow: " + statusCheck + x + "px " + y + "px " + z + "px " + m + "px " + colors + ";";
    navigator.clipboard.writeText(copyText);
    alert("Copied to clipboard!");
});

Top Stories

Kalkulator Wagi i Wieku na Planetach – Układ Słoneczny 3D

Video Propt Generator dla AI do tworzenia wideo

Generator Promptów Web AI do tworzenia stron dla laików

Box Shadow Generator CSS

Dzięki niemu możesz wizualnie dostosować parametry cienia i od razu zobaczyć efekt.

Box Shadow Generator do wstawienia na własną stronę

Co możesz ustawić w generatorze?

✨ Box Shadow CSS Generator

📐 Rozmiar boxa

🎨 Styl boxa

🌑 Parametry cienia

⚡ Akcje

📋 Wygenerowany kod

Kody generatora

Jak wstawić generator na własną stronę?

Samodzielnie:

index.html

style.css

script.js

Chmurka tagów

Zaprzyjaźniona strona

Top Stories

Kalkulator Wagi i Wieku na Planetach – Układ Słoneczny 3D

Video Propt Generator dla AI do tworzenia wideo

Generator Promptów Web AI do tworzenia stron dla laików

Box Shadow Generator do wstawienia na własną stronę

Co możesz ustawić w generatorze?

✨ Box Shadow CSS Generator

📐 Rozmiar boxa

🎨 Styl boxa

🌑 Parametry cienia

⚡ Akcje

📋 Wygenerowany kod

Kody generatora

Jak wstawić generator na własną stronę?

Samodzielnie:

index.html

style.css

script.js

Może Ci się spodobać:

Generator Harmonijnej palety kolorów CSS

Grające pianino na stronę

Generator palety harmonijnych kolorów Internetowych

Jak zbudować aplikację pogodową na 5 dni?