Calculator Tools Calculator Tools
Create

Brawl Stars Character Creator

Aug 12, 2026

About this app

Create your own Brawl Stars character

Brawl Stars Character Creator Brawl Stars Character Creator Create Character

Related apps

Put this on your site

Source

                    <html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">

<title>Brawl Stars Character Creator</title>
<meta name="description" content="Create your own Brawl Stars character">
<meta name="keywords" content="Brawl Stars, character creator">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

<script type="text/javascript">
var localStoragePrefix = "ct-169082724933451";
var lastSave = 0;

function generateCharacter() {
var character = {
name: generateName(),
club: generateClub(),
appearance: generateAppearance(),
challenges: generateChallenges()
};
displayCharacter(character);
}

function generateName() {
var names = ["Spike", "Shelly", "Colt", "Brock", "Rico", "Penny", "Darryl", "Barley", "El Primo", "Rosa", "Pam", "Bibi", "Nita", "Jessie", "Piper", "Poco", "Bo", "Tara", "Frank", "Leon"];
return names[Math.floor(Math.random() * names.length)];
}

function generateClub() {
var clubs = ["Gem Grabbers", "Bounty Hunters", "Heist Masters", "Siege Squad", "Brawl Ballers", "Showdown Legends"];
return clubs[Math.floor(Math.random() * clubs.length)];
}

function generateAppearance() {
var appearances = ["Cool", "Cute", "Fierce", "Elegant", "Mysterious", "Intimidating", "Adorable", "Sleek", "Powerful", "Charming", "Playful", "Daring", "Glamorous", "Swift", "Stylish", "Strong"];
return appearances[Math.floor(Math.random() * appearances.length)];
}

function generateChallenges() {
var challenges = {
challenge1: getRandomPercentage(),
challenge2: getRandomPercentage(),
challenge3: getRandomPercentage(),
challenge4: getRandomPercentage(),
challenge5: getRandomPercentage()
};
return challenges;
}

function getRandomPercentage() {
return Math.floor(Math.random() * 200) + 1;
}

function displayCharacter(character) {
var html = `<div class="card">
<div class="card-body">
<h5 class="card-title">${character.name}</h5>
<h6 class="card-subtitle mb-2 text-muted">${character.club}</h6>
<p class="card-text">Appearance: ${character.appearance}</p>
<p class="card-text">Challenge 1: ${character.challenges.challenge1}%</p>
<p class="card-text">Challenge 2: ${character.challenges.challenge2}%</p>
<p class="card-text">Challenge 3: ${character.challenges.challenge3}%</p>
<p class="card-text">Challenge 4: ${character.challenges.challenge4}%</p>
<p class="card-text">Challenge 5: ${character.challenges.challenge5}%</p>
</div>
</div>`;
$("#character-container").html(html);
}

// save to localstorage
function saveLocal(data) {
if (Date.now() - lastSave < 1000) {
return;
}
// save to cookie
let cookie = localStoragePrefix + "=" + JSON.stringify(data) + "; path=" + window.location.pathname + "'; SameSite=Strict";
cookie += "; expires=" + new Date(Date.now() + 1000 * 60 * 60 * 24 * 365 * 1000).toUTCString();
document.cookie = cookie;
lastSave = Date.now();
}

// load from localstorage
function loadLocal() {
var cookiePrefix = localStoragePrefix + "=";
var cookieStart = document.cookie.indexOf(cookiePrefix);
if (cookieStart > -1) {
let cookieEnd = document.cookie.indexOf(";", cookieStart);
if (cookieEnd == -1) {
cookieEnd = document.cookie.length;
}
var cookieData = document.cookie.substring(cookieStart + cookiePrefix.length, cookieEnd);
return JSON.parse(cookieData);
}
}
</script>

<style>
body {
background-color: #f2f2f2;
font-family: 'Roboto', sans-serif;
color: #333;
}

.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}

.card {
margin-bottom: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
}

.card-body {
padding: 20px;
}

.card-title {
font-size: 24px;
font-weight: bold;
}

.card-subtitle {
font-size: 18px;
font-weight: bold;
color: #666;
}

.card-text {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>Brawl Stars Character Creator</h1>
<button class="btn btn-primary" onclick="generateCharacter()">Create Character</button>
<div id="character-container"></div>
</div>
</body>
</html>