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

Zmień kolor:

Cień poziomy:

Cień pionowy:

Blur

Wielkość cienia:

Przeźroczystość cienia:

Cień wewnętrzny:

Kod CSS

Kopiuj kod

Inna wersja generatora cieni

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 równań kwadratowych

Przelicznik Walut online – oparte na notowaniach NBP

Gra w wojnę – prosta gra w karty

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

Kod CSS

Inna wersja generatora cieni

Kody generatora

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

Samodzielnie:

index.html

style.css

script.js

Chmurka tagów

Zaprzyjaźniona strona

Najczęściej oglądane wpisy

Top Stories

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

Co możesz ustawić w generatorze?

Box Shadow CSS Generator

Kod CSS

Kody generatora

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

Samodzielnie:

index.html

style.css

script.js

Może Ci się spodobać: