Spis treści

Blob generator CSS

Generator Blob to darmowe narzędzie do tworzenia organicznych, płynnych kształtów przy użyciu właściwości CSS border-radius. Pozwala na intuicyjne dostosowanie czterech promieni krzywizny, aby uzyskać unikalny, „żywy” wygląd elementów.

Aplikacja oferuje podgląd na żywo, wybór kolorów, gradientów, wzorów (patterns) oraz własnych obrazów, opcję animacji, oraz eksport gotowego kodu CSS, SCSS, SVG lub PNG. Idealne do projektowania tła, przycisków, avatarów i dekoracyjnych elementów stron WWW.

Jak działa blob generator CSS?

Blob generator tworzy:

- Kod CSS z clip-path lub border-radius, który definiuje kształt bloba
- Pozwala dostosować gładkość, złożoność, rotację i inne parametry
- Umożliwia kopiowanie gotowego kodu CSS i wklejenie go bezpośrednio do projektu

Jak używać generatora?

- Wybierz kształt: Kliknij jeden z presetów (Domyślny, Okrąg, Organiczny, Fala, Blob) lub ręcznie dostosuj suwaki border-radius (R1-R4).
- Dostosuj wymiary: Wpisz wysokość i szerokość w polach „Wymiary” (50-400px) lub pozostaw domyślne 200×200px.
- Wybierz tło: Wybierz: Kolor jednolity, Gradient (z kątem), Wzór (8 patternów) lub wgraj własny obraz PNG/JPG.
- Dodaj efekty: Włącz animację (pulsowanie) i dostosuj intensywność cienia suwakiem „Cień”.
- Skopiuj kod: Kliknij „Kopiuj CSS” lub „Kopiuj SCSS” – kod zostanie skopiowany do schowka.
- Eksportuj grafikę: Wybierz format (CSS, SVG, PNG) i kliknij „Pobierz” – plik zostanie zapisany na dysku.</p”>

Przykład border-radius z 8 wartościami

CSS pozwala na złożony border-radius w formacie:

border-radius: TL TR BR BL / TL TR BR BL;

Pierwsze 4 wartości to promienie poziome, drugie 4 to promienie pionowe. Dzięki temu uzyskasz organiczne, asymetryczne kształty.

Zastosowanie

- Strony WWW: Unikalne tła sekcji, dekoracyjne elementy, przyciski z organicznym kształtem.
- Aplikacje mobilne: Avatary, ikony, elementy interfejsu z płynnymi kształtami.
- Grafika i branding: Logo, banery, materiały marketingowe z unikalnymi kształtami.
- Prototypowanie: Szybkie tworzenie wizualizacji i mockupów z organicznymi elementami.

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

Można to zrobić ręcznie lub pobrać gotowe pliki i edytować je jak dusza zapragnie.

Samodzielnie:

Tworzymy nowy folder a w nim odpowiednie pliki:

1. index.html
2. style.css
3. script.js

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

index.html

<!DOCTYPE html>

<html lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blob Maker</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="chrome-extension://ihcjicgdanjaechkgeegckofjjedodee/app/content-style.css">
</head>
<body>
<div class="wrapper">
  <div class="output">
    <div id="blob" style="border-radius: 56% 44% 15% 85% / 50% 46% 54% 50%; height: 200px; width: 200px;"></div>
  </div>
  <div class="dimensions">
    <div>
      <label for="blob-height"> Wysokosc </label>
      <input type="number" value="200" id="blob-height">
    </div>
    <div>
      <label for="blob-width"> Szerokosc </label>
      <input type="number" value="200" id="blob-width">
    </div>
  </div>
  <div class="sliders">
    <input type="range" value="30">
    <input type="range" value="80">
    <input type="range" value="60">
    <input type="range" value="40">
  </div>
  <input type="text" id="css-code" readonly="">
  <button id="copy">Kopiuj</button>
</div>
<script src="script.js"></script>
</body>
</html>

style.css

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    outline: none;
    font-family: "Roboto Mono",monospace;
    font-weight: 400;
    color: #010120;
}
body{
    background-color: #008dff;
}
.wrapper{
    background-color: #ffffff;
    width: 45%;
    min-width: 550px;
    padding: 30px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    border-radius: 8px;
}
.output{
    background-color: #eef3f8;
    width: 100%;
    min-height: 250px;
    padding: 20px 0;
    overflow: hidden;
    border-radius: 5px;
    position: relative;
    display: grid;
    place-items: center;
}
#blob{
    height: 300px;
    width: 300px;
    background: linear-gradient(
        #2196f3,
        #025eaa
    );
    box-shadow: 15px 20px 30px rgba(0,0,0,0.15);
}
.dimensions{
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin: 20px 0 40px 0;
}
label{
    font-weight: 500;
}
input[type="number"]{
    height: 40px;
    width: 80px;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #a0a0b0;
    border-radius: 3px;
}
input[type="number"]:focus{
    background-color: #f1f5fa;
    border-color: #025eaa;
    color: #025eaa;
}
.sliders{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}
input[type="text"]{
    width: 82%;
    margin-top: 50px;
    padding: 10px;
    font-size: 12px;
    border: none;
    background-color: #f1eff9;
    border-radius: 3px;
}
button{
    width: 12%;
    margin-left: 4%;
    padding: 10px 0;
    background-color: #2196f3;
    border: none;
    cursor: pointer;
    border-radius: 3px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
}

script.js

// JavaScript Document
// www.skrip.pl
let outputCode = document.getElementById("css-code");

let sliders = document.querySelectorAll("input[type='range']");
sliders.forEach(function(slider){
    slider.addEventListener("input",createBlob);
});

let inputs = document.querySelectorAll("input[type='number']");
inputs.forEach(function(inp){
    inp.addEventListener("change",createBlob);
});

function createBlob(){
    let radiusOne = sliders[0].value;
    let radiusTwo = sliders[1].value;
    let radiusThree = sliders[2].value;
    let radiusFour = sliders[3].value;

    let blobHeight = inputs[0].value;
    let blobWidth = inputs[1].value;

    let borderRadius = `${radiusOne}% ${100 - radiusOne}% ${100 - radiusThree}% ${radiusThree}% / ${radiusFour}% ${radiusTwo}% ${100 - radiusTwo}% ${100 - radiusFour}%`;

    document.getElementById("blob").style.cssText = `border-radius: ${borderRadius}; height: ${blobHeight}px; width: ${blobWidth}px`;

    outputCode.value = `border-radius: ${borderRadius};`
}

document.getElementById("copy").addEventListener("click", function(){
    outputCode.select();
    document.execCommand('copy');
    alert('Code Copied');
});

createBlob();

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

Blob generator CSS online